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 { useParams } from '@/component/routes/hooks/useParams';
import SizeBox from '@/component/sizeBox';
import UserHelper from '@/helper/userHelper';
import { IRoutesUrls } from '@/routes/route.h5';
import RouteUtil from '@/utils/routeUtil';
// import Radio from '@taroify/core/radio/radio';
import { Image, Radio, View, Icon } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useRequest } from 'ahooks';
import { PropsWithChildren, useEffect, useState } from 'react';
import './index.scss'

interface ILoginProps {

}

export interface ILoginParms<T = any> {
    callback?: () => Promise<any>,
    page?: IRoutesUrls,
    params?: T;
    /**回调函数是否先于路由动作之前执行 */
    callbackBeforeRoute?: number;
    pop?: number;
}

export class LoginCallback {

}

const Login = (props: PropsWithChildren<ILoginProps>) => {
    const [value, setValue] = useState(false);
    const params = useParams<ILoginParms>();
    const aggrement = useRequest(() => {
        return UserApi.agreementsUsingPost({ data: { "pageView": "register_privacy" } }).toData();
    })
    useEffect(() => {
        () => {
            UserHelper.callback = undefined;
        }
    })
    const { pop = 1 } = params;
    return (
        <Layout className='login' >
            <Flex className='login-back' >
                <Flex flex={1} className='icon-title'>
                    {/*这里新增返回图标 用户点击返回上一页 */}
                    <View className='icon-back' onClick={() => {
                        RouteUtil.pop();
                    }
                    }>
                    </View>

                </Flex>
                <Flex flex={1} >
                </Flex>
                <Flex alignItem="center" className='login-back-logo-wrap' >
                    <Image className='login-logo' src={require("@/assets/logo.png")} />
                </Flex>
                <Flex flex={2} />
                <Padding padding={EdgeInsets.symmetric({ horizontal: 80 })} >
                    <Flex alignItem='center' rowGap={12} >
                        <Button openType="getPhoneNumber" onGetPhoneNumber={async (e) => {
                            if (!value) {
                                // 提示用户勾选协议
                                // Message.error('请勾选协议');
                                Taro.showToast({
                                    title: '请仔细阅读并同意协议!',
                                    icon: 'none',
                                    duration: 2000
                                })

                                return false
                            }
                            console.log(e, 5555, pop);
                            if (e.detail.code && await UserHelper.userWxLogin(e.detail.code) === true) {
                                if (params.callbackBeforeRoute?.toString() === "1") {
                                    console.log('进来了', params)
                                    if (params.page) {
                                        RouteUtil.replace(params.page, { params: params.params });
                                    }
                                    else {
                                        +pop && RouteUtil.pop();
                                    }
                                }
                                console.log('进来了----71', params)
                                if (UserHelper.callback) {
                                    await UserHelper.callback();
                                }
                                if (params.callbackBeforeRoute?.toString() !== "1") {
                                    if (params.page) {
                                        RouteUtil.replace(params.page, { params: params.params });
                                    }
                                    else {

                                        +pop && RouteUtil.pop();
                                    }
                                }
                            }
                        }} fill >手机号快捷登录</Button>
                        <SizeBox height={16} />
                        {
                            aggrement.data &&
                            <>
                                <Flex direction="row" alignItem='center' style={{ whiteSpace: 'nowrap' }}  >
                                    <Radio value={'2'}
                                        className='radio-list__radio'
                                        checked={value}
                                        style={{ transform: 'scale(0.7)', fontSize: '14px' }}
                                        onClick={
                                            () => {
                                                setValue(!value)
                                            }
                                        } color="#4063eb" >
                                    </Radio><View style='font-size:14px'>我已阅读并同意</View>
                                    {
                                        aggrement.data?.map((p, index) => {
                                            return (
                                                <Label key={index}
                                                    onClick={() => {
                                                        RouteUtil.toWebViewPage({ url: p.url })
                                                    }}
                                                    className='login-aggrement' size="sm" >《{p.name}》</Label>
                                            )
                                        })
                                    }
                                </Flex>
                            </>
                        }
                    </Flex>
                </Padding>
                <Flex flex={1} />
            </Flex>
        </Layout>
    )
}

export default Login;