import { View } from '@tarojs/components'
import { useObserver } from 'mobx-react';
import modalStore from '@src/store/modalStore';
import './index.less'
import Vip from './vip';
import Shubi from './shubi';
import { setApp } from '@src/config';
import { templateBuy } from '@src/server/wx/pay';

interface Props {
    type?: 'vip' | 'shubi',
    isBook?: boolean,
    shubiData?: {
        payCoin: number,
        coinNum: number,
    },
    payBookInfo?: {
        bookId: number,
        bookParagraphId: null,
        orderCondition: "阅读中"
    },
    callBackFn?: () => void//支付刷新小说内容
}

const GlobalModal: React.FC<Props> = (props) => {
    let { type = "shubi", isBook = true, shubiData, payBookInfo, callBackFn } = props
    return useObserver(() => {
        let { visible } = modalStore
        const hide = (e) => {
            e.stopPropagation()
            modalStore.hideModal()
            // 关闭弹窗清空支付数据
            setApp({ payData: null })
        }
        //模板支付
        const pay = async (payData: any) => {
            let params: any = {}
            if (payBookInfo) {
                params = { ...payBookInfo, ...payData }
            } else {
                params = { orderCondition: "个人中心", ...payData }
            }
              
            console.log("支付模板数据", params)
            let res = await templateBuy(params)
            if(res){
                callBackFn?.()//刷新页面
                modalStore.hideModal()
            }
          
        }
        return <>
            {visible && <View className="modal" onClick={hide}>
                <View className="box" onClick={(e) => { e.stopPropagation() }}>
                    {/* 关闭 */}
                    <View className='clear' onClick={hide}></View>
                    {/* Vip */}
                    {type === 'vip' && <Vip isBook={isBook} pay={pay} />}
                    {/* 书币 */}
                    {type === 'shubi' && <Shubi isBook={isBook} shubiData={shubiData} pay={pay} />}
                </View>
            </View>}
        </>
    })
}

export default GlobalModal