import {  useState } from 'react'
import Taro, { useDidHide, useShareAppMessage } from '@tarojs/taro'
import { View, Text, Image, Navigator } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import './index.less'
import { Store } from '@src/app'
import ModalStore from '@src/store/modalStore'
import IosShowPay from '@src/components/pay/IosShowPay'
import GlobalModal from '@src/components/bottomModal'
import { share } from '@src/utils'
import { setClipboardData, showToast } from '@src/utils/compatibility'

interface Props {
    store: Store;
}

function My(props: Props) {
    let { userInfoStore, indexStore } = props.store
    const [payType, setPayType] = useState<"shubi" | "vip">("shubi")
    //支付弹窗
    const payBtn = (e, type) => {
        e.stopPropagation()
        setPayType(type)
        ModalStore.showModal()
    }
    // 使用 useDidHide 如果需要在页面隐藏时做一些处理
    useDidHide(() => {
        ModalStore.hideModal()
    });
    // 分享
    useShareAppMessage(async () => {
        // 获取当前页面栈
        const pages = Taro.getCurrentPages()
        // 获取栈顶的页面，即当前页面
        const currentPage = pages[pages.length - 1]
        // 获取页面的路径和参数
        const route = currentPage.route // 页面路径
        if (route) {
            let shareInfo: any = await share({ pagePath: route })
            let { sharePicUrl, shareTitles, pageName, pagePath } = shareInfo
            return {
                title: shareTitles || app.appInfo?.appName + '-' + pageName,
                path: pagePath || undefined,
                imageUrl: sharePicUrl || undefined
            }
        }
        return {}
    })
    const copy = () => {
        setClipboardData({
            data: userInfoStore?.userInfo?.openId || "",
            success: function (res) {
                setClipboardData({
                    data: userInfoStore?.userInfo?.openId || "",
                    success: function (res) {
                        showToast({
                            title: "复制成功",
                            icon: "success"
                        })
                    }
                })
            }
        })
    }
    return <View className='my'>
        <View className="userInfo">
            <View className="userInfo_box">
                {/* 个人信息 */}
                <View className="top" >
                    <View className="left" >
                        <View className="avtai">
                            {/* || (userInfoStore.userInfo?.avatarUrl ? userInfoStore.userInfo?.avatarUrl : require('../../icon/avatar.jpg')) */}
                            <Image mode="widthFix" lazy-load src={"https://test-book-content.oss-cn-hangzhou.aliyuncs.com/bookImageFE90FDA493CE46C694B423F4F4EA7BCB.jpg"} />
                        </View>
                        <View className="name" style={userInfoStore.isAuth ? { width: Taro.pxTransform(120) } : {}}>
                            <View className='name_id'>
                                <Text className="ID">ID:{userInfoStore?.userInfo?.nickname || userInfoStore?.userInfo?.openId}</Text>
                                <Image onClick={copy} className='copy' lazy-load src={require('../../icon/copy.png')} />
                            </View>
                            {
                                userInfoStore.isVip && <View className="grade">
                                    <Image lazy-load src={require('../../icon/grade.png')} />
                                    <Text>V1</Text>
                                </View>
                            }
                        </View>
                    </View>
                </View>
                {/* 付费功能 */}
                <IosShowPay>
                    {/* vip续费  模板存在才显示*/}
                    {!!indexStore?.rechargeTemplate?.find(item => item.templateType === 2) && <View className="bottom">
                        <View>
                            <View className="left">
                                <Image lazy-load src={require('../../icon/VIP.png')} />
                                <View className="txt">
                                    <Text>会员尊享免费解锁权益</Text>
                                    {
                                        userInfoStore.isVip && <Text className="tfv">有效期至:{userInfoStore?.userInfo?.vipExpireTime}</Text>
                                    }
                                </View>
                            </View>
                            <View className="right" onClick={(e) => {
                                payBtn(e, "vip")
                            }}>{userInfoStore.isVip ? '立即续费' : '立即开通'}</View>
                        </View>
                        <Image lazy-load src={require('../../icon/vipBack.png')} />
                    </View>}
                    {/*我的账户  模板存在才显示*/}
                    {!!indexStore?.rechargeTemplate?.find(item => item.templateType === 1) && <View className='account_info'>
                        <View className='account_info_title'>我的账户</View>
                        <View className='account_info_content'>
                            <View className='account_info_content_left'>
                                <View className='account_info_content_text'>
                                    <Text>{userInfoStore.userInfo?.coinNum || 0}</Text>
                                    <Text>书币</Text>
                                </View>
                                {/* <View className='account_info_content_text' onClick={() => { }}>
                                    <Text>0</Text>
                                    <Text>赠币</Text>
                                </View> */}
                            </View>
                            <View className='account_info_content_btn' onClick={(e) => {
                                payBtn(e, "shubi")
                            }}>充值</View>
                        </View>
                    </View>}
                    {/* 支付弹窗 */}
                    <GlobalModal type={payType} isBook={false} />
                </IosShowPay>
                {/* 底部功能入口 */}
                <View className="list_bt" >
                    <Navigator className="item" url="/pages/my/contactService/index">
                        <View className="left">
                            <Image lazy-load src={require('../../icon/phone.png')} mode="widthFix" />
                            <Text>联系客服</Text>
                        </View>
                        <View className="right">
                            <Image lazy-load src={require('../../icon/jtRight.png')} mode="widthFix" />
                        </View>
                    </Navigator>
                    <View className="line"></View>
                    <Navigator className="item" url="/pages/my/aboutUs/index">
                        <View className="left">
                            <Image lazy-load src={require('../../icon/we.png')} mode="widthFix" />
                            <Text>关于我们</Text>
                        </View>
                        <View className="right">
                            <Image lazy-load src={require('../../icon/jtRight.png')} mode="widthFix" />
                        </View>
                    </Navigator>
                </View>
            </View>
        </View>
    </View>
}
export default inject('store')(observer(My));