<template>
    <div id="loan-record">
        <br>
        <div class="top">
            <el-form :inline="true" :model="queryModel" class="demo-form-inline">
                <el-input class="search-input" placeholder="银行账号" icon="search"
                          v-model="searchContent"></el-input>
                <div class="btn">
                    <el-button @click="queryBatch" type="primary">查询</el-button>
                    <el-button v-if="$permissionUtils.btnPermission('addCard')" @click="addBankCard" type="primary"><i
                            class="el-icon-plus"></i>新增银行卡
                    </el-button>
                </div>
            </el-form>
        </div>

        <div>
            <div class="system-list">
                <el-table :data="records" stripe style="width: 100%">
                    <el-table-column type="index" width="60"></el-table-column>
                    <el-table-column prop="relationNo" label="业务组" :formatter="nullFormat"></el-table-column>
                    <el-table-column prop="ownerName" label="银行账户"></el-table-column>
                    <el-table-column prop="openBankName" label="银行"></el-table-column>
                    <el-table-column prop="bankAccount" label="银行账号"></el-table-column>
                    <el-table-column prop="ownerMobile" label="预留手机号码" :formatter="nullFormat"></el-table-column>
                    <el-table-column prop="openSubBankName" label="支行信息" :formatter="nullFormat"></el-table-column>
                    <el-table-column prop="useFlag" label="状态" :formatter="useFlagFormat"></el-table-column>
                    <el-table-column prop="gmtCreated" label="创建时间" :formatter="dateFormat"></el-table-column>
                    <el-table-column label="操作">
                        <template scope="scope">
                            <el-button v-if="$permissionUtils.btnPermission('stickCard')" type="text" size="small"
                                       @click="lendBankCardList(scope.row)">业务组列表
                            </el-button>
                            <el-button v-if="$permissionUtils.btnPermission('stickCard')" type="text" size="small"
                                       @click="editLendBankCard(scope.row)">编辑
                            </el-button>
                            <el-button v-if="$permissionUtils.btnPermission('stickCard')" type="text" size="small"
                                       @click="setUseFlagOk(scope.row)">设置为可用
                            </el-button>
                            <el-button v-if="$permissionUtils.btnPermission('stickCard')" type="text" size="small"
                                       @click="setUseFlagNo(scope.row)">设置为不可用
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="page">
                <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="page.current"
                        :page-size="page.size"
                        layout="prev, pager, next"
                        :total="page.total">
                </el-pagination>
            </div>
        </div>

        <!--窗口组件-->
        <template>
            <!--添加出借银行卡-->
            <addLendBankCardDialog
                    v-if="ui.addLendBankCardDialog.visible"
                    :dialogVisible="ui.addLendBankCardDialog.visible"
                    :dialogVisible.sync="ui.addLendBankCardDialog.visible">
            </addLendBankCardDialog>
        </template>

        <!--窗口组件-->
        <template>
            <!--修改出借银行卡-->
            <editLendBankCardDialog
                    v-if="ui.editLendBankCardDialog.visible"
                    :dialogVisible="ui.editLendBankCardDialog.visible"
                    :dialogVisible.sync="ui.editLendBankCardDialog.visible"
                    :relationNo="ui.editLendBankCardDialog.relationNo"
                    :relationType="ui.editLendBankCardDialog.relationType"
                    :ownerName="ui.editLendBankCardDialog.ownerName"
                    :bankAccount="ui.editLendBankCardDialog.bankAccount"
                    :ownerMobile="ui.editLendBankCardDialog.ownerMobile"
                    :openBankName="ui.editLendBankCardDialog.openBankName"
                    :openSubBankName="ui.editLendBankCardDialog.openSubBankName">
            </editLendBankCardDialog>
        </template>
    </div>

</template>


<script type="text/ecmascript-6">

    import * as moment from "moment";
    import addLendBankCardDialog from "./AddLendBankCardDialog";
    import editLendBankCardDialog from "./EditLendBankCardDialog";

    export default {
        components: {
            addLendBankCardDialog,
            editLendBankCardDialog,
        },
        name: "LendBankCardList",
        data() {
            return {
                searchContent: '',
                queryModel: {},
                records: [],
                page: {
                    current: 1,
                    size: 10,
                    total: 0
                },
                ui: {
                    addLendBankCardDialog: {
                        visible: false,
                    },
                    editLendBankCardDialog: {
                        visible: false,
                    }
                }
            }
        },

        mounted: function () {
            this.loadSearchData();
        },

        created() {
            if (this.$route != null && this.$route.query != null && this.$route.query.flag) {
                this.flag = this.$route.query.flag;
                this.searchContent = this.$route.query.searchContent;
            }
        },

        methods: {

            //添加银行卡
            addBankCard() {
                this.ui.addLendBankCardDialog = {
                    visible: true,
                };
            },

            queryBatch() {
                this.loadSearchData();
            },
            /** 加载搜索数据 */
            loadSearchData() {
                var url = `/card/search/lendList/${this.page.current}`;
                if (this.searchContent != '') {
                    url = url + `/${this.searchContent}`
                }

                this.$$get(url)
                    .then(res => {
                        if (res.data.code < 1)
                            throw res.data.msg;
                        this.page = this.clonePage(res.data);
                        this.records = res.data.data.data;
                    })
                    .catch(err => this.$$msg.err(err))
            },
            handleCurrentChange() {
                this.loadSearchData();
            },


            dateFormat: function (row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD HH:mm:ss");
            },

            //业务组列表
            lendBankCardList(record){
                this.$router.push({
                    path: 'DutyBizGroupsListDialog',
                    query: {
                        bizGroup: record.relationNo,
                        searchContent:this.searchContent,
                    }
                })
            },

            //编辑银行卡信息
            editLendBankCard(record){
                this.ui.editLendBankCardDialog = {
                    visible: true,
                    relationType: record.relationType,
                    relationNo: record.relationNo,
                    ownerName: record.ownerName,
                    bankAccount: record.bankAccount,
                    ownerMobile: record.ownerMobile,
                    openBankName: record.openBankName,
                    openSubBankName: record.openSubBankName,
                };
            },

            setUseFlagOk(record){
                this.commonGet(`/card/isUseFlag/` + record.id + `/` + `YES`)
            },

            setUseFlagNo(record){
                this.commonGet(`/card/isUseFlag/` + record.id + `/` + `NO`)
            },

            commonGet(url) {
                this.$$get(url)
                    .then(res => {
                        if (res.data.code < 1)
                            throw res.data.msg;
                        this.$message({message: res.data.msg, type: 'success'});
                        this.loadSearchData();
                    })
                    .catch(err => this.$$msg.err(err))
            },

            useFlagFormat: function (row) {
                let value = row.useFlag;
                if (value === 'YES') {
                    return '可用'
                } else if (value === 'NO') {
                    return '不可用'
                } else {
                    return ''
                }
            },
            nullFormat(row, column) {
                var param = row[column.property];
                if (param == null || param == '') {
                    return ' ';
                }
                return param;
            }

        }
    }
</script>