<template>
    <div>
        <template v-for="(item, index) in payConfig" :key="index">
            <div
                class="pay-item"
                @click="pick(item)"
                v-if="item.show && (item.key === 'BALANCE' ? showBalance : true)"
                :key="index"
            >
                <div class="img-icon">
                    <img class="icon" :src="item.icon" alt="" />
                </div>
                <span>{{ item.name }}</span>
                <van-icon
                    v-if="item.enabled && checked === item.key"
                    class-prefix="font_family"
                    name="icon-icon_gouxuan_pre"
                />
                <img
                    v-else
                    class="choose-icon"
                    :src="checkEnabled(item) ? (checked === item.key ? icons[1] : icons[0]) : icons[2]"
                    alt=""
                />
            </div>
        </template>
    </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
export default {
    props: {
        modelValue: {},
        showBalance: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        ...mapState(['userInfo']),
        ...mapGetters(['iosReview'])
    },
    created() {
        if (this.value) {
            this.checked = this.value;
        }
        if (this.iosReview) {
            this.payConfig = [
                {
                    name: '绿魔币 ',
                    key: 'BALANCE',
                    icon: 'https://cdn.raex.vip/image/2022-05-18-17-46-19eDglIIAy.png',
                    show: true,
                    enabled: true
                }
            ];
            this.checked = 'BALANCE';
        } else {
            this.$http.get('/sysConfig/get/pay_config').then(res => {
                let configs = JSON.parse(res.value).filter(item => {
                    if (item.key === 'BALANCE') {
                        return this.userInfo && this.userInfo.walletEnabled;
                    }
                    return true;
                });
                if (this.$store.getters.inWechat) {
                    configs.forEach(item => {
                        if (item.key === 'ALIPAY') {
                            item.key = 'ALIPAY_BRIDGE';
                        }
                    });
                }
                this.payConfig = configs.sort((a, b) => a.sort - b.sort);
                this.checked = (configs.find(i => i.show && i.enabled) || {}).key;
            });
        }
    },
    data() {
        return {
            checked: null,
            payConfig: [],
            icons: [
                require('@assets/icon_gouxuan_huise.png'),
                require('@assets/icon_gouxuan_pre.png'),
                require('@assets/icon_gouxuan_huise1.png')
            ]
        };
    },
    methods: {
        pick(item) {
            if (item.show && item.enabled) {
                if (item.key === 'QUICK_BIND' && this.authStatus !== '已认证') {
                    this.$dialog
                        .confirm({
                            title: '实名认证',
                            message: '您的账户还未通过实名认证，认证后可进行添加银行卡',
                            confirmButtonText: '前往认证'
                        })
                        .then(() => {
                            if (this.authStatus === '认证中' || this.authStatus === '认证失败') {
                                this.$router.push('/' + this.$route.params.companyId + '/waiting');
                            } else {
                                this.$router.push('/' + this.$route.params.companyId + '/faceAuth');
                            }
                        });
                } else {
                    this.checked = item.key;
                }
            } else {
                this.$toast('敬请期待');
            }
        },
        checkEnabled(info) {
            if (info.key === 'QUICK_BIND' && this.authStatus !== '已认证' && info.enabled) {
                return false;
            } else {
                return info.enabled;
            }
        }
    },
    watch: {
        value(val) {
            this.checked = val;
        },
        checked(val) {
            this.$emit('update:modelValue', val);
        }
    }
};
</script>
<style lang="less" scoped>
.pay-item {
    display: flex;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid @tabBorder;
    .icon {
        height: 24px;
        width: 24px;
        object-fit: contain;
        display: block;
    }
    .img-icon {
        // width: 45px;
        .flex();
        justify-content: center;
    }
    span {
        font-size: 14px;
        font-weight: bold;
        color: @text0;
        line-height: 24px;
        flex-grow: 1;
        padding: 0 10px;
    }
    .choose-icon {
        width: 24px;
        height: 24px;
    }

    &.not {
        span {
            color: @text3;
        }
    }
    .font_family {
        color: var(--primlight);
    }
}
</style>
