<template>
    <view class="pay-radio">
        <wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44" @change="Pay.handleChangePay">
            <block v-for="(item, index) in PayList" :key="index">
                <wd-radio :value="item.value">
                    <view
                        class="flex justify-between items-center"
                        v-if="!(hidePlatformBalance && item.type === PayCategory.PlatformBalance) && !(hideStoreBalance && item.type === PayCategory.StoreBalance) && !(hideWechat && item.type === PayCategory.WeChatPay)"
                    >
                        <view class="flex items-center">
                            <wd-img width="50rpx" height="50rpx" :src="`${OSS}${item.icon}`"></wd-img>
                            <view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
                        </view>
                    </view>
                    <view class="absolute right-0 top-6rpx right-60rpx" v-if="item.type !== PayCategory.WeChatPay">可用{{ userInfo.user_money }}</view>
                </wd-radio>
            </block>
        </wd-radio-group>
    </view>
</template>

<script lang="ts" setup name="Pay">
	/**
	 * Pay 支付组件
	 * @description 用于展示支付
     */
    import { PayList as OriginPayList, PayCategory, PayValue } from '@/utils/pay'
    import { IUserInfoResult } from '@/api/types/user'
    import { getUserInfo } from '@/api/user'

	const OSS = inject('OSS')
    const pay = ref<number>() // 支付方式

    // 当前用户信息
    const userInfo = reactive<IUserInfoResult>({
        account: '',
        avatar: '',
        create_time: '',
        has_auth: false,
        has_password: false,
        id: 0,
        mobile: '',
        nickname: '',
        real_name: '',
        sex: '',
        sn: 0,
        user_money: '',
        version: 0
    })

    onMounted(async () => {
        // 获取个人用户信息
        const userRes = await getUserInfo()
        Object.assign(userInfo, userRes || {})
    })

    const props = defineProps({
        // 是否隐藏平台余额支付
        hidePlatformBalance: {
            type: Boolean,
            default: false
        },

        // 是否隐藏门店余额支付
        hideStoreBalance: {
            type: Boolean,
            default: false
        },

        // 是否隐藏微信支付
        hideWechat: {
            type: Boolean,
            default: false
        }
    })

    // 定义emit事件
    const emit = defineEmits(['pay'])
    
    const Pay = {
        // 支付方式改变
        handleChangePay(e: {value: number}) {
            emit('pay', e.value)
        }
    }

    const PayList = computed(() => {
        return OriginPayList.filter(item => {
            if (props.hidePlatformBalance && item.type === PayCategory.PlatformBalance) return false
            if (props.hideStoreBalance && item.type === PayCategory.StoreBalance) return false
            if (props.hideWechat && item.type === PayCategory.WeChatPay) return false
            return true
        })
    })

    watch(PayList, (list) => {
        if (list.length > 0) {
            pay.value = list[0].value
            emit('pay', pay.value )
        } else {
            pay.value = undefined
        }
        }, { immediate: true })
        
</script>

<script lang="ts">
    export default {}
</script>

<style lang="scss">
    .pay-radio {
        :deep() {
            .wd-radio {
                position: relative;
                margin-bottom: 40rpx;
            }
            
            .wd-radio:last-child {
                margin-bottom: 0;
            }
        }
    }
</style>