<template>
    <div class="bg">
        <m-nav-bar mode="black" background="#fff" title="我的银行卡列表"></m-nav-bar>
        <div class="card">
            <div @click="goCashout(item)" class="item" v-for="(item, index) in bankCardList" :key="index">
                <div style="width:100%;display: flex;align-items: center;">
                    <div class="font30" style="width:30%;text-align: left"> {{ item.encTrueName }}</div>
                    <div class="font22" style="width:70%;color: #8A9099;text-align: right;"> {{ item.createTime }}</div>
                </div>
                <div class="font26">
                    {{ findBankNameByCode(item.bankCode) }}({{ item.encBankNo }})
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import api from '@/api'
import { reactive, ref } from 'vue'
import WXBANKLIST from '@/assets/js/wxBankList';
import { useRouter } from 'vue-router';
import { isTemplateElement } from '@babel/types';
export default {
    setup() {
        const router = useRouter()
        const bankCardList = ref<any>([])
        const findBankNameByCode = (code: number) => {
            console.log(code)
            let bankName = ""
            WXBANKLIST.forEach(item => {
                if (item.bankCode == code) {
                    bankName = item.bankName
                }

            })
            return bankName

        }
        const goCashout = (item: {
            createTime: string;
            updateTime: string;
            id: number;
            openid: string;
            encTrueName: string;
            bankCode: number;
            encBankNo: string;

        }) => {
            router.push({
                path: "/cashout",
                query: {
                    cashToCardShow: 1,
                    bankCode: item.bankCode,
                    bankName:findBankNameByCode(item.bankCode),
                    encBankNo:item.encBankNo,
                    encTrueName:item.encTrueName
                }
            })


        }
        api.wx.studentWxBankList({
            pageNum: 1,
            pageSize: 1000
        }).then(res => {
            bankCardList.value = res.data.rows



        })

        return {
            findBankNameByCode,
            bankCardList,
            goCashout

        }
    }
}
</script>

<style lang="scss" scoped>
.font30 {
    font-size: 30px;
}

.font22 {
    font-size: 22px;
}

.font26 {
    font-size: 26px;

}

.bg {
    background: #fff;
    min-height: 100vh;
}

.card {
    display: flex;
    padding: 0 30px;

    .item {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 130px;
        border-bottom: 1px solid #E8E8E8;
        vertical-align: bottom;
    }
}
</style>