import UserApi from "@/apis/userApi";
import Button from "@/component/button";
import Flex from "@/component/flex";
import Label from "@/component/label";
import Layout from "@/component/layout";
import Padding, { EdgeInsets } from "@/component/padding";
import SizeBox from "@/component/sizeBox";
import APPConfig from "@/config";
import AppContext from "@/context/appContext";
import UserHelper from "@/helper/userHelper";
import ImageUtil from "@/utils/imgUtils";
import RouteUtil from "@/utils/routeUtil";
import { Image, ScrollView, View, Text } from "@tarojs/components";
import { pxTransform } from "@tarojs/taro";
import { useRequest } from "ahooks";
import React, { useContext, useMemo, useState } from "react";
import "./index.scss";

const Home = () => {
  const appContext = useContext(AppContext);
  const { screenWidth, statusBarHeight } = appContext.systemInfo!;
  const [bottomRemark, setBottomRemark] = useState('')

  const indexInfoResult = useRequest(() => {
    return UserApi.getIndexInfoUsingPost({
      params: { appId: APPConfig.APPID },
    }).toData();
  });
  
  const channelResult = useRequest(() => {
    return UserApi.homeFetchChannel({
      data: { channelCode: 'txxcx01', refer: '' },
    }).toData().then(res => {
      setBottomRemark(res.bottom_remark)
    })
  });


  const imgBackStyle = useMemo(() => {
    return {
      ...ImageUtil.calculationHeight(332 / 170, (screenWidth - 64 + 16) / 2),
      position: "relative",
    } as React.CSSProperties;
  }, []);
  const item = (index: number, title: string, desc: string) => {
    return (
      <View style={imgBackStyle}>
        <Image
          className='background-image'
          src={require(`../../assets/icon_home_characteristic_b_${index}.png`)}
        />
        <Flex
          rowGap='sm'
          className='background-content background-content-wrap'
        >
          <Flex columnGap='sm' direction='row' alignItem='center'>
            <Image
              className='background-content-i'
              src={require(`../../assets/icon_home_characteristic_i_${index}.png`)}
            />
            <Label bold>{title}</Label>
          </Flex>
          <Label style={{ fontSize: pxTransform(22) }} type='secondary'>
            {desc}
          </Label>
        </Flex>
      </View>
    );
  };
  return (
    <Layout safe className='index' bottomBarIndex={0}>
      <ScrollView className='index-container'>
        <SizeBox height={statusBarHeight} />
        <Image
          className='index-logo'
          src={require("../../assets/new-edition/index-logo.png")}
        />
        <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
          <View
            style={{
              ...ImageUtil.calculationHeight(
                686 / 484,
                appContext.systemInfo!.screenWidth - 32
              ),
              position: "relative",
            }}
            className='index-panel'
          >
            <Flex
              alignItem='center'
              justifyContent='center'
              rowGap={24}
              className='index-back-content'
            >
              <Label className='index-back-se'>最高可申请（元）</Label>
              <Label className='index-back-amount'>200,000.00</Label>
              <Flex
                alignItem='center'
                justifyContent='center'
                direction='row'
                className='index-back-info'
                columnGap={12}
              >
                <Text>年利率7.2%起</Text>
                <View className='split-char'></View>
                <Text>期限3-36个月</Text>
                <View className='split-char'></View>
                <Text>持牌放款</Text>
              </Flex>
              <View className='index-back-btn-container'>
                <View className='index-back-btn-tip'>
                  现在申请，最快1分钟激活额度
                </View>
                <Button
                  onClick={() => {
                    UserHelper.afterLogin({
                      pop: false,
                      callback: async () => {
                        indexInfoResult.data &&
                          RouteUtil.toWebViewPage({
                            url: indexInfoResult.data.link,
                          });
                      },
                    });
                  }}
                  className='index-back-btn'
                >
                  {indexInfoResult.data?.name || "立即激活"}
                </Button>
              </View>
            </Flex>
          </View>
          <View className='index-step-container'>
            <View className='background'></View>
            <Flex
              alignItem='center'
              justifyContent='center'
              direction='row'
              columnGap={8}
            >
              <Text>01.提交申请</Text>
              <Image
                style={{ width: "24px", height: "24px" }}
                src={require("../../assets/new-edition/icon-next.svg")}
              />
              <Text>02.需求评估</Text>
              <Image
                style={{ width: "24px", height: "24px" }}
                src={require("../../assets/new-edition/icon-next.svg")}
              />
              <Text>03.签约办理</Text>
            </Flex>
          </View>
        </Padding>

        <SizeBox height={24} />
        {/* <Padding padding={EdgeInsets.symmetric({ vertical: 68 })}>
          <Flex alignItem="center" justifyContent="center">
            <Image
              src={require("@/assets/icon_home_characteristic.png")}
              className="index-iocn-title"
            />
          </Flex>
        </Padding> */}

        {/* <Flex rowGap="sm" style={{ padding: "0 16PX" }}>
          <Flex direction="row">
            {item(0, "产品丰富", "信用、抵押、质押均可")}
            <SizeBox width={16} />
            {item(1, "快速便捷", "最快10分钟出结果")}
          </Flex>
          <Flex direction="row">
            {item(2, "场景多元", "可用于消费、经营等")}
            <SizeBox width={16} />
            {item(3, "信息保密", "严格保护申请人信息")}
          </Flex>
        </Flex> */}
        <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
          <Image
            src={require("../../assets/new-edition/platform.png")}
            className='index-platform-image'
          />
        </Padding>

        <Flex
          justifyContent='center'
          alignItem='center'
          rowGap={24}
          className='index-bottom-tip'
        >
          <View>
            { bottomRemark }
            {/* { channelResult.data?.bottomRemark || "哈哈哈哈" } */}
            {/* 郑重声明：平台只提供贷款咨询和推荐服务，放款由银行或金融机构进行，贷款额度、放款时间以资金分审批结果为准，所有贷款申请在未成功贷款前绝不收取任何费用，为了保证您的资金安全，请不要相信任何要求您支付费用的信息、邮件、电话等不实信息。 */}
          </View>
          <View>如遇问题请向{ channelResult.data?.customerServiceInfo || '400-003-9350'}举报投诉，平台将及时为您解决！</View>
        </Flex>
      </ScrollView>
    </Layout>
  );
};

export default Home;
