import { Radio, RadioGroup, ScrollView, View } from "@tarojs/components";
import './index.less'
import { useMemo, useState } from "react";
import { setApp } from "@src/config";
import { Store } from "@src/app";
import { inject, observer } from "mobx-react";
import { getEnum } from "@src/utils";
interface Props {
    store?: Store;
    mar0?: boolean
    pay: (payData: any) => void//支付刷新小说内容
}
function VipBox(props?: Props) {
    let [eq, setEq] = useState(0)
    let [payData, setPayData] = useState<any>(null)
    let vipList = getEnum("VIP_DAYS")
    let [ok, setOk] = useState(false)
    let data = useMemo(() => {
        let thatData = props?.store?.indexStore?.rechargeTemplate?.find(item => item.templateType === 2)
        let datas = thatData?.rechargeConfigs[0]?.rechargeConfigList
        if (datas?.length > 0) {
            setApp({ payData: datas[0] })
            setPayData(datas[0])
        }
        return datas
    }, [props?.store?.indexStore?.rechargeTemplate])

    return <>
        <ScrollView
            className='vip_box'
            scrollX={true}
            scrollWithAnimation
        >
            {
                data?.map((item: {
                    color,//背景色
                    description,//整数购买文案
                    extra,//右上角描述值
                    gearType,//充值类型
                    gift,//赠送
                    obtain,//获得书币/vip每天价格
                    price,//价格
                    subscript,//右上角文案 首充|超值等
                    vipDays,//vip天数
                }, index) => {
                    return <View className={`vip_box_k ${eq === index ? "ac" : ""}`} onClick={() => {
                        setEq(index)
                        setApp({ payData: item })
                        setPayData(item)
                    }}>
                        <View className="vip_box_tip">{item?.subscript}</View>
                        <View className="vip_box_title">{vipList?.find(i => i.value === item.vipDays)?.text?.replace('会员', '')}</View>
                        <View className="vip_box_num">{item?.price}元</View>
                        {/* <View className="vip_box_price"></View> */}
                        <View className="vip_box_give">{item?.obtain}元/天</View>
                    </View>
                })
            }
        </ScrollView>
        <View className="vip_box_btn" onClick={() => {
            setOk(true);
            props?.pay({ templateIndex: eq, rechargeTemplateId: props?.store?.indexStore?.rechargeTemplate?.find(item => item.templateType === 2)?.id })
        }}>支付{payData?.price}元</View>
        {/* <View className={`vip_box_gz ${props?.mar0 ? "mar_bom_0" : ""}`}>
            <RadioGroup onChange={(e: any) => {
                setOk(true)
            }}>
                <Radio checked={ok} value='选中' >已阅读并同意《会员服务协议》</Radio>
            </RadioGroup>

        </View> */}
    </>
}
export default inject('store')(observer(VipBox)) 