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 } from '@tarojs/components';
import { pxTransform } from '@tarojs/taro';
import { useRequest } from 'ahooks';
import React, { useContext, useMemo } from 'react';
import './index.scss'

// const func = () => {
//     return new Promise<string>(p => {
//         setTimeout(() => {
//             p("请求成功123123" + (+new Date()));
//         }, 2000);
//     })
// }


// const Example = () => {
//     const result = useRequest(() => {
//         return func();
//     }, {
//         pollingInterval: 3000
//     })

//     return (
//         <View>
//             <Label>
//                 {
//                     result.loading ? "请求中" : result.data
//                 }
//             </Label>
//             <Button onClick={() => {
//                 result.refresh();
//             }} >更新</Button>
//         </View>
//     )
// }




const Home = () => {
    const appContext = useContext(AppContext);
    const { screenWidth } = appContext.systemInfo!;

    const indexInfoResult = useRequest(() => {
        return UserApi.getIndexInfoUsingPost({
            params: { appId: APPConfig.APPID }
        }).toData();
    })
    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>
                <Image style={ImageUtil.calculationHeight(750 / 88, appContext.systemInfo!.screenWidth)} src={require('../../assets/home_logo.png')} />
                <SizeBox height={24} />
                <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })} >
                    <View style={{ ...ImageUtil.calculationHeight(686 / 380, appContext.systemInfo!.screenWidth - 32), position: "relative" }} >
                        <Image src={require("@/assets/icon_home_back.png")} className="index-back" />
                        <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>
                            <Button onClick={() => {
                                UserHelper.afterLogin({
                                    pop: false,
                                    callback: async () => {
                                        indexInfoResult.data && RouteUtil.toWebViewPage({
                                            url: indexInfoResult.data.link,
                                        })
                                    }
                                })
                            }} className='index-back-btn' color="white" fill >{indexInfoResult.data?.name || "立即申请"}</Button>
                        </Flex>
                    </View>
                </Padding>
                <Padding padding={EdgeInsets.symmetric({ vertical: 68 })} >
                    <Flex alignItem="center" justifyContent='center' >
                        <Image src={require('@/assets/icon_home_process.png')} className="index-iocn-title" />
                    </Flex>

                </Padding>
                <Padding padding={EdgeInsets.symmetric({ horizontal: 32 })}>
                    <Flex direction="row" justifyContent="space-around" >
                        <Flex >
                            <Image src={require('../../assets/icon_home_process_data.png')} className="index-process-img" />
                            <Label size="sm" bold >填写资料</Label>
                        </Flex>
                        <Flex >
                            <Image src={require('../../assets/icon_home_process_qualifications.png')} className="index-process-img" />
                            <Label size="sm" bold >资质评估</Label>
                        </Flex>
                        <Flex >
                            <Image src={require('../../assets/icon_home_process_capital.png')} className="index-process-img" />
                            <Label size="sm" bold >匹配资金</Label>
                        </Flex>
                    </Flex>
                </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>
            </ScrollView>
        </Layout>
    )
}

export default Home;




