<template>
  <div class="page bankNumber-container">
    <!--条件查询-->
    <data-filter :rules="filterRules" :filter="filterForm" @submit="submitFilterForm" @reset="resetFilterForm"/>
    <!--表格功能区域-->
    <data-table-ctrl
      @add="onAddRecord"
      @blankName="onBlankName"
      @export="onExport()"
    />
    <!--表格列表-->
    <data-table
      class="table-list-mod"
      :table-height="tableHeight"
      :list="list"
      @ctrlRow="onTableCtrlRow"
    />
    <!--分页-->
    <pagination
      class="table-pagination"
      :class="{'fixed':tableHeight}"
      v-show="total>0"
      :total="total"
      :pageSizes="[20,50,100]"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      :autoScroll="false"
      @pagination="onPagination"
    />
    <!--弹窗-->
    <el-dialog :append-to-body='true'
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :title='dialog.title'
               :visible='dialog.visible'
               :width="dialog.width"
               @close="onDialogClose"
               center
               class="dialog-dynamic-mod"
    >
      <component :inject-data="dialogInjectData" :is="dialog.component" @close="onDialogClose"/>
    </el-dialog>
  </div>
</template>

<script>
  import dataFilter from './dataFilter';
  import dataTableCtrl from './dataTableCtrl';
  import dataTable from './dataTable';
  import blankPropsDialog from './blankPropsDialog';
  import addBlankDialog from './addBlankDialog';
  import {dialogMixin,paginationMixin,importExportMixin} from './mixin';
  import Pagination from './Pagination';
  import { bankInfoService } from './api';
  import { defaultFilterForm,defaultListQuery } from './relationFieldBankNumber';
  import { filterFormRules } from './validateBankNumber';
  import {API_BASE_URL} from './config';

  export default {
    name: "bankNumber",
    components: {
      dataFilter,
      dataTableCtrl,
      dataTable,
      Pagination
    },
    mixins: [dialogMixin,paginationMixin,importExportMixin],
    data() {
      return {
        // 查询表单验证
        filterRules: Object.assign({}, filterFormRules),
        filterForm: Object.assign({}, defaultFilterForm),
        listQuery: Object.assign({}, defaultListQuery), // 分页查询条件
        // 表格数据
        total: 0,
        tableHeight: null,
        list: [],
        // 弹出层注入数据
        dialogInjectData: {},
        exportSubmitting:false
      }
    },
    computed: {},
    created() {

    },
    async mounted() {
      await this.getList(this.listQuery);
      this.listenTableHeight();
    },
    methods: {
      /****查询条件****/
      async submitFilterForm(data,valid){
        this.filterForm.submitting = true;
        if(valid){
          this.listQuery = Object.assign({}, defaultListQuery, this.filterForm);
          await this.getList(this.listQuery);
          this.filterForm.submitting = false;
        }else {
          this.filterForm.submitting = false;
        }
      },
      resetFilterForm(){
        this.filterForm = Object.assign({}, defaultFilterForm);
        this.listQuery = Object.assign({}, defaultListQuery);
        this.getList(this.listQuery);
      },
      /****表格****/
      async getList(params) {
        try {
          const { pageNo,pageSize,branchName,bankNo } = params;
          const reqParams = {
            branchName: branchName,
            bankNo: bankNo,
            page: pageNo,
            rows: pageSize
          };
          const res = await bankInfoService.pageBank(reqParams);
          if(res && res.data){
            this.list = res.data.rows;
            this.total = res.data.total;
          }
        }catch (e) {
          this.filterForm.submitting = false;
          console.warn('getList error:',e);
        }
      },
      onTableCtrlRow(item,type){
        switch (type) {
          case 'update':
            this.editTableRow(item);
            break;
          case 'del':
            this.delTableRow(item);
            break;
        }
      },
      async editTableRow(item){
        try {
          const { bankInfoId } = item;
          const res = await bankInfoService.getBankByBankInfoId({bankInfoId});
          if(res && res.data){
            this.dialogInjectData={
              dialogForm:{
                ...res.data,
                isEdit:true
              }
            };
            this.setDialog(true, '银行信息管理-编辑', addBlankDialog,'720px');
          }else {
            this.$message.error(res.rspDesc || '获取详情失败');
          }
        }catch (e) {
          console.warn("editTableRow error:",e)
        }
      },
      delTableRow(item){
        this.$confirm(`${item.bankName} 是否删除?`, '警告', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
          center:true
        }).then(async () => {
          try {
            const { bankInfoId } = item;
            const res = await bankInfoService.deleteBank({ bankInfoId });
            if(res && res.rspCode==='success'){
              this.$message.success('删除成功');
              this.getList(this.listQuery);
            }else {
              this.$message.error(res.rspDesc || '删除失败');
            }
          }catch (e) {
            console.warn('onDelItem error:',e);
            this.$message.error('删除失败');
          }
        }).catch( () => {} );
      },
      // 分页
      onPagination(data) {
        const {page, limit} = data;
        this.listQuery.pageNo = page;
        this.listQuery.pageSize = limit;
        this.getList(this.listQuery);
      },
      /**弹窗**/
      onAddRecord(){
        this.dialogInjectData={};
        this.setDialog(true, '银行信息管理-添加', addBlankDialog,'720px');
      },
      onBlankName(){
        this.dialogInjectData={};
        this.setDialog(true, '银行名称管理', blankPropsDialog,'720px');
      },
      onDialogClose(isRefresh) {
        this.setDialog();
        if (isRefresh) {
          //  刷新列表需要重置分页
          this.resetFilterForm();
        }
      },
      /**导出**/
      onExport(){
        this.queryExport(this.filterForm,`${API_BASE_URL}/bank/downloadBankExcel`,'/bankNumber');
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .bankNumber-container{
    .table-list-mod{
      padding:10px 20px 10px 20px;
    }
    .table-pagination {
      margin-top: 0;
      padding: 5px 20px 10px 20px;
      &.fixed {
        padding: 5px 20px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1002;
      }
    }
  }
  .dialog-dynamic-mod{

  }
</style>
