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 AppContext from '@/context/appContext';
import ImageUtil from '@/utils/imgUtils';
import { Image, View } from '@tarojs/components';
import { PropsWithChildren, useContext } from 'react';
import './index.scss'
import { Cell } from "@taroify/core"
import { Arrow } from "@taroify/icons"
import useStore from '@/hooks/useRedux';
import RouteUtil from '@/utils/routeUtil';
import Taro from '@tarojs/taro';
import Button from '@/component/button';

interface IMineProps {

}

const Mine = (props: PropsWithChildren<IMineProps>) => {
    const { screenSize } = useContext(AppContext);
    const userInfo = useStore(p => p.userInfo);
    return (
        <Layout className='mine' bottomBarIndex={1} >
            <View style={{ ...ImageUtil.calculationHeight(750 / 328, screenSize.width), position: "relative" }} >
                <Image src={require('@/assets/icon_mine_back.png')} className="background-image" />
                <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} />
            <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>
        </Layout>
    )
}

export default Mine;