{% load static %}

<style>
    .pay-method-box{height: 100px;border: solid 1px #eee;position: relative;}
    .pay-tag{position: absolute;right: 0;top: 0;}
    .pay-method-box:hover{border: solid 1px #f14668;cursor: pointer;}
    .active{border: solid 1px #f14668;}
</style>

<div id="payMethod">
    <div class="columns">
        <div class="column is-3" v-for="pay in payMethods" :key="pay.value" @click="payMethod(pay)">
            <div class="pay-method-box is-flex is-align-items-center is-justify-content-center" :class="{active:pay.is_default}">
                <div class="pay-icon mr-3" v-if="pay.value == 3">
                    <img :src="pay.icon" width="36px">
                </div>
                <img v-else class="mr-3" :src="pay.icon" width="36px">

                <div v-if="pay.value == 3">
                    <h1 class=" is-size-4">{$ pay.name $}</h1> 
                    <span class="has-text-grey-light">余额：{{ request.user.baykeuser.balance }}</span>
                </div>
                <h1 v-else class="is-size-4">{$ pay.name $}</h1> 

                <div v-if="pay.is_default" class="tag is-danger pay-tag is-radiusless is-size-6">{$ text $}</div>
            </div>
        </div>
    </div>
</div>

<script>
    var payMethod = new Vue({
        el: '#payMethod',
        delimiters: ['{$', '$}'],
        data: {
            payMethods: [
                {
                    value: 1,
                    name: "支付宝支付",
                    icon: "{% static 'img/alipay.svg' %}",
                    is_default: true
                },
                {
                    value: 2,
                    name: "微信支付",
                    icon: "{% static 'img/wxpay.svg' %}",
                    is_default: false
                },
                {
                    value: 3,
                    name: "余额支付",
                    icon: "{% static 'img/ye.svg' %}",
                    is_default: false
                },
            ],
            defaultPay: null,
            text: "默认",
        },
        created(){
            // 设置默认支付方式
            this.payMethods.forEach(element => {
                if (element.is_default) {
                    this.defaultPay = element
                }
            })
        },
        methods: {
            // 支付方式
            payMethod(pay){
                this.defaultPay = pay
                this.payMethods.forEach(element => {
                    if (pay.value == element.value){
                        element.is_default = true
                        this.text = "已选择√"
                    }else{
                        element.is_default = false
                    }
                })
            },
        }
    })
</script>