<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">
            <div class="bank-info" v-for="(item, index) in list" :key="index">
                <div class="info1">
                    <div class="text1">{{ item.bankName }}</div>
                    <div class="text2">{{ getNum(item.bankNo) }}</div>
                </div>
                <div class="info2">{{ item.cardTypeDesc }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: []
        };
    },
    mounted() {
        this.$http.get('/user/myBankCard').then(res => {
            this.list = res;
        });
    },
    methods: {
        add() {
            this.checkAuth().then(() => {
                this.$router.push('/mineBanksAdd');
            });
        },
        getNum(No) {
            return '**** ' + No.substr(-4, 4);
        }
    }
};
</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: #ffffff;
        line-height: 24px;
        margin-top: 17px;
    }
}
@colorList: #37b074, #ea4f56, #36a0b9, #f79439;
.bank-info {
    each(@colorList,{
        &:nth-child( 4n + @{index} ){
            background:  linear-gradient(90deg, @value, lighten(@value , 20%) 100%);
        }
    
    });

    height: 75px;
    .flex-col();
    border-radius: 8px;
    margin: 20px 16px;
    justify-content: center;
    padding: 0 10px;

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