<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>
                <img
                    class="choose-icon"
                    :src="item.enabled ? (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;
        }
        let info = [...this.payConfig].find(item => {
            return item.enabled;
        });
        if (info) {
            this.checked = info.key;
        }
    },
    data() {
        return {
            checked: null,
            payConfig: [
                // {
                //     name: '首信易快捷支付',
                //     icon: 'https://cdn.raex.vip/image/2022-05-19-15-16-35vrSuZKWN.png',
                //     show: true,
                //     enabled: true,
                //     description: '',
                //     sort: 0,
                //     key: 'SYXPAY'
                // },
                {
                    name: '支付宝',
                    icon: 'https://cdn.raex.vip/image/2022-05-18-17-46-08sBUUyUlw.png',
                    show: true,
                    enabled: true,
                    description: '',
                    sort: 1,
                    key: 'ALIPAY'
                }
                // {
                //     name: '余额',
                //     icon: 'https://cdn.raex.vip/image/2022-05-18-17-52-41NwCNOLDd.png',
                //     show: true,
                //     enabled: true,
                //     description: '',
                //     sort: 1,
                //     key: 'BALANCE'
                // }
            ],
            icons: [
                require('@assets/svgs/icon_gouxuan_huise.svg'),
                require('@assets/icon_gouxuan_pre.png'),
                require('@assets/icon_gouxuan_huise1.png')
            ]
        };
    },
    methods: {
        pick(item) {
            if (item.show && item.enabled) {
                this.checked = item.key;
            } else {
                this.$toast('敬请期待');
            }
        }
    },
    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: 48px;
    .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: #fff;
        line-height: 24px;
        flex-grow: 1;
        padding: 0 10px;
    }
    .choose-icon {
        width: 24px;
        height: 24px;
    }

    &.not {
        span {
            color: @text3;
        }
    }
}
</style>
