<template>
    <div class="page">
        <div class="add" @click="add" v-if="list.length === 0">
            <img src="@assets/png-tianjia.png" alt="" />
            <span>添加银行卡</span>
            <div class="tips">
                <img src="@assets/safe.png" alt="" />
                <span>信息加密处理，保护个人隐私不泄密</span>
            </div>
        </div>
        <div class="list" v-if="list.length > 0">
            <div class="list-title">
                <span>我的卡</span>
                <img src="@assets/bankicon.png" alt="" />
            </div>
            <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 {
            colorList: ['#6b73a1', '#ea4f56', '#36a0b9', '#f79439'],
            list: []
        };
    },
    mounted() {
        this.getBank();
    },
    methods: {
        getColor(bank) {
            const cyrb53 = function (str, seed = 0) {
                let h1 = 0xdeadbeef ^ seed,
                    h2 = 0x41c6ce57 ^ seed;
                for (let i = 0, ch; i < str.length; i++) {
                    ch = str.charCodeAt(i);
                    h1 = Math.imul(h1 ^ ch, 2654435761);
                    h2 = Math.imul(h2 ^ ch, 1597334677);
                }
                h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
                h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
                return 4294967296 * (2097151 & h2) + (h1 >>> 0);
            };
            if (bank) {
                console.log(cyrb53(bank));
                return this.colorList[cyrb53(bank) % 4];
            }
            return this.colorList[0];
        },
        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: @bg;
    padding: 16px;
    box-sizing: border-box;
    .page_top {
        font-size: 20px;
        font-weight: bold;
        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 {
        background-color: @bg2;
        border-radius: 12px;
        .flex-col();
        padding: 20px 0;
        align-items: center;
        img {
            width: 54px;
            height: 54px;
        }
        span {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
            margin-top: 17px;
        }

        .tips {
            .flex();
            margin-top: 6px;
            img {
                width: 16px;
                height: 16px;
                display: flex;
            }
            span {
                font-size: 12px;
                color: #ffffff40;
                line-height: 18px;
                margin-top: 0;
                margin-left: 1px;
            }
        }
    }
    .van-swipe-cell {
        height: 100px;
        background: @bg2;
        // margin-top: 30px;
        box-sizing: border-box;
        .bank_info {
            height: 80px;
            padding-top: 20px;
            display: flex;
            justify-content: space-between;
            border-radius: 12px;
            background-color: #00A371;
            .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-left: 16px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.van-swipe-cell + .van-swipe-cell {
    margin-top: 20px;
}

.list {
    padding: 0 16px 30px;
    background-color: @bg2;
    border-radius: 12px;

    .list-title {
        .flex();

        font-size: 17px;
        color: #ffffff;
        line-height: 18px;
        padding: 16px 0;
        img {
            width: 60px;
            height: 22px;
            margin-left: 6px;
        }
    }
}
// .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>
