<template>
    <div class="page">
        <div class="page_top">我的银行卡</div>
        <div class="page_tip">成功绑定后不能修改</div>
        <div class="add" @click="add" v-if="list.length === 0">
            <img src="@assets/png-tianjia.png" alt="" />
            <span>添加银行卡</span>
        </div>
        <div class="list">
            <van-swipe-cell :name="index" v-for="(item, index) in list" :key="index" :before-close="beforeClose">
                <div class="bank_info">
                    <div class="bank_info_left">
                        <div class="text1">{{item.bankName}}</div>
                        <div class="text2">{{ item.cardTypeDesc }}</div>
                    </div>
                    <div class="bank_info_right">
                        <div class="text3">{{ getNum(item.bankNo) }}</div>
                        <img src="@assets/png-ka@3x.png" alt="" class="bank_info_right_img" />
                    </div>
                </div>
                <!-- <div class="bank-info">
                    <div class="info1">
                        <div class="text1">11111{{ item.bankName }}</div>
                        <div class="text2">11111{{ getNum(item.bankNo) }}</div>
                    </div>
                    <div class="info2">1111{{ item.cardTypeDesc }}</div>
                    <img class="card-bg" alt="" />
                </div> -->
                <template #right>
                    <van-button text="解绑" type="danger" class="delete-button" />
                </template>
            </van-swipe-cell>
        </div>
    </div>
    <!-- <div class="page">
        <div class="list">
            <van-swipe-cell :name="index" v-for="(item, index) in list" :key="index" :before-close="beforeClose">
                <div class="bank-info">
                    <div class="info1">
                        <div class="text1">{{ item.bankName }}</div>
                        <div class="text2">{{ getNum(item.bankNo) }}</div>
                    </div>
                    <div class="info2">{{ item.cardTypeDesc }}</div>
                    <img class="card-bg" alt="" />
                </div>
                <template #right>
                    <van-button
                        text="解绑"
                        type="danger"
                        class="delete-button"
                    />
                </template>
            </van-swipe-cell>
        </div>
    </div> -->
</template>

<script>
export default {
    data() {
        return {
            list: []
        };
    },
    mounted() {
        this.getBank();
    },
    methods: {
        getBank() {
            this.$http.get('/user/myBankCard').then(res => {
                this.list = res;
            });
        },
        add() {
            this.checkAuth().then(() => {
                this.$router.push('/mineBanksAdd');
            });
        },
        getNum(No) {
            return '**** ' + No.substr(-4, 4);
        },
        beforeClose({ position, name }) {
            console.log(name);
            console.log(position);
            if (position === 'right') {
                return new Promise(resolve => {
                    this.$dialog
                        .confirm({
                            title: '确定解绑该银行卡吗?'
                        })
                        .then(() => {
                            this.cancelBank();
                            resolve(true);
                        })
                        .catch(() => {
                            resolve(true);
                        });
                });
            } else {
                return true;
            }
        },
        cancelBank() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http
                .post('/user/removeBankCard')
                .then(res => {
                    this.$toast.success('解绑成功');
                    this.getBank();
                })
                .catch(e => {
                    this.$toast(e.error);
                });
        }
    }
};
</script>

<style lang="less" scoped>
.page {
    background: #0f0f27;
    padding: 16px;
    box-sizing: border-box;
    .page_top {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 24px;
        margin-bottom: 6px;
    }
    .page_tip {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffca5e;
        line-height: 17px;
    }
    .add {
        .flex-col();
        padding: 60px 0;
        align-items: center;
        img {
            width: 54px;
            height: 54px;
        }
        span {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
            margin-top: 17px;
        }
    }
    .van-swipe-cell {
        height: 100px;
        background: #29293f;
        border-radius: 12px;
        margin-top: 30px;
        padding-top: 20px;
        box-sizing: border-box;
        .bank_info{
            height: 80px;
            display: flex;
            justify-content: space-between;
            .bank_info_left {
            margin-left: 16px;
            color: #ffffff;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            .text1 {
                font-size: 14px;
                line-height: 24px;
                margin-bottom: 2px;
            }
            .text2 {
                font-size: 10px;
                line-height: 10px;
            }
        }
        .bank_info_right {
            position: relative;
            .text3 {
                margin-right: 16px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 24px;
            }
            .bank_info_right_img {
                width: 166px;
                height: 68px;
                position: absolute;
                bottom: 0px;
                right: 0px;
            }
        }
        }
        /deep/.van-swipe-cell__right {
        padding: 12px 0 30px 16px;
        box-sizing: border-box;
        display: flex;
    }
    }
}
// .van-swipe-cell {
//     .delete-button {
//         width: 40px;
//         height: 40px;
//         border-radius: 20px;
//         padding: 0;
//         /deep/.van-button__content {
//             display: flex;
//             flex-direction: column;
//             .van-button__icon {
//                 font-size: 18px;
//             }
//             .van-button__text {
//                 margin-left: 0;
//                 font-size: 12px;
//                 transform: scale(0.8);
//             }
//         }
//     }
// }
// .van-swipe-cell + .van-swipe-cell {
//     margin-top: 16px;
// }
// @colorList: #6b73a1, #ea4f56, #36a0b9, #f79439;
// .bank-info {
//     color: #fff;
//     border-radius: 8px;
//     each(@colorList,{
//         &:nth-child( 4n + @{index} ){
//             background:  linear-gradient(90deg, @value, lighten(@value , 10%) 100%);
//         }

//     });
//     height: 100px;
//     .flex-col();
//     justify-content: center;
//     padding: 0 10px;
//     position: relative;
//     .card-bg {
//         width: 166px;
//         height: 68px;
//         position: absolute;
//         right: 0;
//         bottom: 0;
//         z-index: 0;
//     }

//     .info1 {
//         .flex();
//         justify-content: space-between;
//         font-size: @font2;
//         line-height: 24px;
//     }
//     .info2 {
//         font-size: @font1;
//     }
// }
</style>