<template>
    <div class="payment-wrap">

        <div class="payment-item" v-for="item in paymentList" :key="item.name">
            <dl>
                <dt>
                    <img v-if="item.type == '1'" src="@/assets/register/weixin_pay.png" alt="">
                    <img v-if="item.type == '2'" src="@/assets/register/zhifubao_pay.png" alt="">
                    <img v-if="item.type == '3'" src="@/assets/register/taobao_pay.png" alt="">
                    <img v-if="item.type == '4'" src="@/assets/register/jingdong_pay.png" alt="">
                </dt>
                <dd>
                    <p>{{ item.name }}</p>
                    <p>{{ item.num }}</p>
                </dd>
            </dl>
            <GuipSwitch :modelValue="item.flag" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
            </GuipSwitch>
        </div>
    </div>
</template>
<script>
import GuipSwitch from '@/components/GuipSwitch.vue';

export default {
  name: '',
  props:['paymentList'],
  components: {
    GuipSwitch
  },
  data(){
    return {
        payImg:{
            '1':'weixin_pay.png',
            '2':'zhifubao_pay.png',
            '3':'taobao_pay.png',
            '4':'jingdong_pay.png',
        }
    }
  },
  methods:{
    onSwitchChange(data){
        console.log(data,'---');
    }
  }
}
</script>
<style lang="scss">
.payment-wrap{
    .payment-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        dl{
            display: flex;
        }
        dt img{
            width: 32px;
            height: 32px;
        }
        dd{
            margin-left: 12px;
            p{
                font-size: 12px;
                font-weight: normal;
                line-height: 13px;
                letter-spacing: 0.08em;
                font-variation-settings: "opsz" auto;
                text-align: left;
                color: #8A9099;
            }
        }
        dd p:first-child{
            font-size: 14px;
            line-height: 18px;
            margin-bottom: 6px;
            color: #1E2226;
        }
    }
}
</style>