import Flex from "@/component/flex";
import UserApi from "@/apis/userApi";
import APPConfig from "@/config";
import { useRequest } from "ahooks";
import Layout from "@/component/layout";
import Padding, { EdgeInsets } from "@/component/padding";
import SizeBox from "@/component/sizeBox";
import AppContext from "@/context/appContext";
import ImageUtil from "@/utils/imgUtils";
import { Image, View, Text, Button as TaroButton } from "@tarojs/components";
import { PropsWithChildren, useContext, useRef } from "react";
import useStore from "@/hooks/useRedux";
import RouteUtil from "@/utils/routeUtil";
import UserHelper from "@/helper/userHelper";
import Button from "@/component/button";
import {
  parseQueryParams,
  isOuterLink,
  replaceQueryParam,
} from "@/utils/toolsUtil";
import "./index.scss";
import LoginBox from "../components/LoginBox";
import StorageUtil, { EStorage } from "@/utils/storageUtil";

interface IMineProps {}

// @ts-ignore
const Mine = (props: PropsWithChildren<IMineProps>) => {
  const channelCode = StorageUtil.get(EStorage.channelCode) || "";

  const appContext = useContext(AppContext);
  // const { screenSize } = useContext(AppContext);
  const { statusBarHeight } = appContext.systemInfo!;
  const userInfo = useStore((p) => p.userInfo);
  const isUserLogin = UserHelper.isLogin();

  const indexInfoResult: any = useRequest(() => {
    return UserApi.getIndexInfoUsingPost({
      params: { appId: APPConfig.APPID },
    }).toData();
  });

  const childRef: any = useRef();
  const handleOpen = () => {
    childRef.current.handleOpen();
  };
  const postJumpUrlResult = () => {
    const params: any = parseQueryParams(indexInfoResult.data.link);
    return UserApi.getJumpUrlPost({
      loading: true,
      data: {
        appId: APPConfig.APPID,
        channelCode: params.channelCode,
        productId: params.productId,
      },
    })
      .toData()
      .then((res: any) => {
        console.log("获取跳转链接结果", res);
        RouteUtil.toWebViewPage({ url: res?.adJumpLink });
      });
  };

  const loginFlowHandler = () => {
    UserHelper.UpdateOpenId();
    if (isOuterLink(indexInfoResult.data.link)) {
      // 如果是外部链接，不用管
      postJumpUrlResult();
    } else {
      const jumpUrl = channelCode
        ? replaceQueryParam(
            indexInfoResult.data.link,
            "channelCode",
            channelCode
          )
        : indexInfoResult.data.link;

      RouteUtil.toWebViewPage({
        url: jumpUrl,
      });
    }
  };

  const ApplyButton = ({ isLogin }) => {
    return (
      <>
        {isLogin ? (
          <Button
            className="mine-apply-panel-button"
            onClick={() => {
              UserHelper.afterLogin({
                pop: false,
                callback: async () => {
                  indexInfoResult.data && loginFlowHandler();
                },
              });
            }}
          >
            立即申请
          </Button>
        ) : (
          <Button onClick={handleOpen} className="mine-apply-panel-button">
            立即申请
          </Button>
        )}
      </>
    );
  };
  const LoginBoxs = ({ isLogin, userName }) => {
    return (
      <>
        {isLogin ? (
          <View className="mine-info">
            <Padding padding={EdgeInsets.symmetric({ horizontal: 20 })}>
              <Image
                src={require("../../../assets/icon_head.png")}
                className="avatar-image-head"
              />
            </Padding>
            <View className="mine-box">
              <Text className="mine-login">{userName}</Text>
              <Text className="mine-text">欢迎来到{APPConfig.NAME}~</Text>
            </View>
          </View>
        ) : (
          <View className="mine-info" onClick={handleOpen}>
            <Padding padding={EdgeInsets.symmetric({ horizontal: 20 })}>
              <Image
                src={require("../../../assets/icon_head.png")}
                className="avatar-image-head"
              />
            </Padding>
            <View className="mine-box">
              <Text className="mine-login">登录/注册</Text>
              <Text className="mine-text">欢迎来到{APPConfig.NAME}~</Text>
            </View>
          </View>
        )}
      </>
    );
  };
  const maskPhone = (phone: string) => {
    if (!phone || phone.length !== 11) return phone; // 确保电话号码有效且长度为11位
    return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1***$2");
  };
  const userName = maskPhone(userInfo.userMobile);
  return (
    <Layout className="mine" bottomBarIndex={2}>
      <SizeBox height={statusBarHeight}></SizeBox>
      <SizeBox height={36}></SizeBox>
      <LoginBoxs isLogin={isUserLogin} userName={userName}></LoginBoxs>
      <View
        className="mine-apply-panel"
        style={{
          ...ImageUtil.calculationHeight(
            750 / 324,
            appContext.systemInfo!.screenWidth - 32
          ),
          position: "relative",
        }}
      >
        <Text className="mine-apply-panel-title">最高可申请（元）</Text>
        <Flex justifyContent="space-between" alignItem="center" direction="row">
          <Text className="mine-apply-panel-money">200,000</Text>
          {/* <Button
            className='mine-apply-panel-button'
            onClick={() => {
              UserHelper.afterLogin({
                pop: false,
                callback: async () => {
                  indexInfoResult.data &&
                    RouteUtil.toWebViewPage({
                      url: indexInfoResult.data.link,
                    });
                },
              });
            }}
          >
            立即申请
          </Button> */}
          <ApplyButton isLogin={isUserLogin}></ApplyButton>
        </Flex>
        <Flex
          justifyContent="flex-start"
          alignItem="center"
          direction="row"
          columnGap={12}
          className="mine-apply-panel-tip"
        >
          <Text>年化利率7.2-24%(单利)</Text>
          <View className="split-char"></View>
          <Text>期限3-36个月</Text>
        </Flex>
      </View>

      <View className="mine-apply-panel-warn">
        <Image
          src={require("@/assets/new-edition/icon-info.png")}
          className="icon-info"
        />
        <Text>具体额度以资金方审批为准</Text>
      </View>

      {/* <View
        style={{
          ...ImageUtil.calculationHeight(750 / 328, screenSize.width),
          position: "relative",
        }}
        onClick={() => {
          UserHelper.afterLogin({
            pop: false,
            callback: async () => {},
          });
        }}
      >
        <Flex justifyContent="flex-end" className="background-content">
          <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
            <Flex columnGap={32} direction="row" alignItem="center">
              <Image
                src={require("@/assets/icon_mine_avatar.png")}
                className="mine-avatar"
              />
              <Label bold>
                {userInfo ? `HI，${userInfo.userMobile}` : "点击此处登录"}
              </Label>
            </Flex>
          </Padding>
        </Flex>
      </View> */}
      <SizeBox height={16} />
      <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
        <View className="mine-tools-panel-title">我的工具</View>
        <View className="mine-tools-panel">
          <TaroButton
            open-type="contact"
            session-from="sessionFrom"
            className="mine-tools-item"
          >
            <Image
              src={require("@/assets/new-edition/icon-service.svg")}
              className="mine-tools-item-icon"
            />
            <Text className="mine-tools-item-title">在线客服</Text>
            <Image
              src={require("@/assets/new-edition/icon-arrow-right.svg")}
              className="icon-arrow"
            />
          </TaroButton>
          <View
            className="mine-tools-item"
            onClick={() => {
              RouteUtil.push("/pages/user/setting/index");
            }}
          >
            <Image
              src={require("@/assets/new-edition/icon-setting.svg")}
              className="mine-tools-item-icon"
            />
            <View className="mine-tools-item-title">系统设置</View>
            <Image
              src={require("@/assets/new-edition/icon-arrow-right.svg")}
              className="icon-arrow"
            />
          </View>
        </View>
      </Padding>
      <SizeBox height={20} />

      {/* <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
        <Image
          onClick={() => {
            // https://huirong.bicredit.xin/
            RouteUtil.toWebViewPage({
              url: "https://mp.weixin.qq.com/s/mN4BDqA5iyUDyJse1u_BEA",
            });
          }}
          src={require("@/assets/new-edition/wechat-official.png")}
          className="mine-image-wechat-official"
        />
      </Padding> */}
      {/* <Flex direction="row" className="mine-menu">
        <Flex
          onClick={() => {
            // https://huirong.bicredit.xin/
            RouteUtil.toWebViewPage({
              url: "https://h5.bicredit.xin/view/webapp/business-cooperation.html",
            });
          }}
          columnGap="sm"
          direction="row"
          alignItem="center"
          justifyContent="center"
          flex={1}
          className="mine-menu-wrap"
        >
          <Label>商务合作</Label>
          <Image
            src={require("@/assets/icon_mine_business.png")}
            className="mine-menu-icon"
          />
        </Flex>
        <SizeBox width={16} />
        <Flex flex={1}>
          <Button
            className="mine-menu-wrap"
            open-type="contact"
            session-from="sessionFrom"
          >
            <Flex
              columnGap="sm"
              direction="row"
              alignItem="center"
              justifyContent="center"
              style={{ height: "100%" }}
              flex={1}
            >
              在线客服
              <Image
                src={require("@/assets/icon_mine_service.png")}
                className="mine-menu-icon"
              />
            </Flex>
          </Button>
        </Flex>
      </Flex> */}
      <SizeBox height={16} />
      {/* <Cell
        size="large"
        onClick={() => {
          RouteUtil.push("/pages/user/aggrement/index");
        }}
        icon={
          <Image
            src={require("@/assets/icon_mine_aggrement.png")}
            className="mine-item-icon"
          />
        }
        title="用户协议"
        rightIcon={<Arrow />}
      ></Cell>
      <SizeBox height={8} /> */}
      {/* <Cell size="large" icon={<Image src={require('@/assets/icon_mine_upgrade.png')} className="mine-item-icon" />} title="检查更新" rightIcon={<Arrow />}  ></Cell>
            <SizeBox height={8} /> */}
      {/* <Cell
        onClick={() => {
          RouteUtil.push("/pages/user/setting/index");
        }}
        size="large"
        icon={
          <Image
            src={require("@/assets/icon_mine_setting.png")}
            className="mine-item-icon"
          />
        }
        title="设置"
        rightIcon={<Arrow />}
      ></Cell> */}
      <LoginBox ref={childRef}></LoginBox>
    </Layout>
  );
};

export default Mine;
