<template>
    <el-dialog
        width="660px"
        :visible.sync="innerVisibleBankList"
        append-to-body
        :before-close="closeDialog"
    >
        <div slot="title" class="header-title">暂支持以下银行卡</div>
        <div class="bank-list">
            <ul class="clearfix">
                <li v-for="item in privateBankList" :key="item.id">
                    <img :src="item.bankCode" alt />
                    {{ item.bankName }}
                </li>
            </ul>
        </div>
    </el-dialog>
</template>

<script>
import { api_findJsBankList } from "api/center.js";
export default {
    name: "noAuth",
    data() {
        return {
            privateBankList: []
        };
    },
    created() {
        let findJsBankListParams = {
            params: {}
        };
        api_findJsBankList(findJsBankListParams).then(res => {
            if (res.success) {
                this.privateBankList = res.data;
                this.privateBankList.filter(item => {
                    item.bankCode = require("assets/images/bankcard/" +
                        item.bankCode +
                        ".png");
                });
            } else {
                this.$message.error(res.msg);
            }
        });
    },
    props: {
        innerVisibleBankList: Boolean
    },
    methods: {
        closeDialog() {
            this.$emit("close");
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.bank-list {
    ul {
        li {
            float: left;
            width: 33%;
            height: 50px;
            line-height: 50px;
            text-align: left;
            padding-left: 30px;
            box-sizing: border-box;
            background: #fafafa;
            border-bottom: 1px solid #eaeaea;
            border-left: 1px solid #eaeaea;
            &:nth-of-type(1) {
                border-top: 1px solid #eaeaea;
            }
            &:nth-of-type(2) {
                border-top: 1px solid #eaeaea;
            }
            &:nth-of-type(3) {
                border-top: 1px solid #eaeaea;
            }
            &:nth-child(3n) {
                border-right: 1px solid #eaeaea;
            }
            &:last-child {
                border-right: 1px solid #eaeaea;
            }
            img {
                vertical-align: middle;
                margin-right: 10px;
            }
        }
    }
}
</style>
