<template>
    <div class="page">
        <page-bar>我的银行卡</page-bar>

        <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" :style="{ background: getColor(item.bankNo) }">
                    <div class="info1">
                        <div class="text1">{{ item.bankName }}</div>
                        <div class="text2">{{ getNum(item.bankNo) }}</div>
                    </div>
                    <div class="info2">{{ item.cardTypeDesc }}</div>
                    <img src="../../assets/png-ka.png" class="card-bg" alt="" />
                </div>
                <template #right>
                    <van-button
                        :icon="require('../../assets/icon_jiebang.png')"
                        text="解绑"
                        type="danger"
                        class="delete-button"
                    />
                </template>
            </van-swipe-cell>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            colorList: ['#6b73a1', '#ea4f56', '#36a0b9', '#f79439']
        };
    },
    created() {
        this.getBank();
    },
    computed: {
        ...mapState(['bankCard']),
        list() {
            return this.bankCard ? [this.bankCard] : [];
        }
    },
    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.$store.dispatch('getBankCard', true);
        },
        add() {
            this.checkAuth().then(() => {
                this.$router.push('/' + this.$route.params.companyId + '/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-color: @bg3;
}
.add {
    .flex-col();
    padding: 60px 0;
    align-items: center;

    img {
        width: 54px;
        height: 54px;
    }

    span {
        font-size: 14px;
        color: @text0;
        line-height: 24px;
        margin-top: 17px;
    }
}
.list {
    padding: 20px 16px;
}
.van-swipe-cell {
    /deep/.van-swipe-cell__right {
        padding: 30px 0 30px 16px;
        box-sizing: border-box;
        display: flex;
    }
    .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;
    height: 100px;
    .flex-col();
    // margin: 20px 16px;
    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>
