<template>
  <div class="eibs-tab">
    <!-- ----------左 ---------->
    <c-col :span="12" class="col-left">
      <c-col :span="24">
        <el-form-item label="行号" prop="fqcyjg">
          <c-input v-model="model.fqcyjg" maxlength="12" placeholder="请输入行号" />
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="银行类别" prop="jigulb">
          <c-select placeholder="请选择银行类别" v-model="model.jigulb" dbCode="JIGULB" :isShowKeyAndLabel="true" />
        </el-form-item>
      </c-col>
    </c-col>

    <!------------- 右 ---------->
    <c-col :span="12" class="col-right">
      <c-col :span="24">
        <el-form-item label="银行名称" prop="fukrhm">
          <c-input placeholder="请输入银行名称" v-model="model.fukrhm" maxlength="93" />
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item label="机构状态" prop="canjcc" :rules="rules.canjcc">
          <c-select v-model="model.canjcc" placeholder="请输入银行状态" maxlength="1">
            <el-option v-for="item in canjcclist" :key="item.value" :label="item.value+' - '+item.label" :value="item.value"
              :isShowKeyAndLabel="true" />
          </c-select>
        </el-form-item>
      </c-col>
    </c-col>

    <!-- 重置与查询 -->
    <c-col :span="24" style="text-align: right">
      <el-button size="small" @click="handleReset">重置</el-button>
      <el-button type="primary" icon="el-icon-search" size="small" :loading="searchLoading" @click="onSearch()">查询</el-button>
    </c-col>

    <!-- 查询详情 -->
    <c-col :span="24">
      <c-paging-table :data="bnkData" :columns="bnkColumns" :pageNumber="model.pageNum" :pageSize="model.pageSize"
        :total="model.total" v-on:queryFunc="queryFunc" :border="true">
        <c-table-column fixed="right" prop="op" label="操作" width="100px">
          <template slot-scope="{ scope }">
            <c-button style="margin-left: 0" size="small" type="info" @click="bnkInfo(scope.$index, scope.row)">详情
            </c-button>
          </template>
        </c-table-column>
      </c-paging-table>
    </c-col>

    <el-dialog
      :title="
        '联行行号信息详情'
      "
      :visible.sync="infoDialog"
      top="10vh"
      width="80%"
      :destroy-on-close="true"
      :before-close="handleClose"
    >
      <m-bankinfo ref="bank" :model="infomation" :canjcclist="canjcclist" :operate="operate"> </m-bankinfo>
    </el-dialog>
  </div>
</template>

<script>
  import {
    queryByPage
  } from "~/service/manage/bnk.js";
  import BankInfo from "../Dbibnk/BnkInfo.vue";

  export default {
    name: "",
    components: {
      "m-bankinfo": BankInfo,
    },
    props: ["model"],
    inject: ["root"],
    data() {
      return {
        searchLoading: false,
        infoDialog: false,
        infomation: {},
        operate: "",
        rules: {
          jigulb: [{
              required: false,
              message: '请输入银行类别',
              trigger: 'blur'
            },
            {
              validator: this.isNum,
              trigger: 'blur'
            }
          ],
          canjcc: [{
              required: false,
              message: '请输入银行状态',
              trigger: 'blur'
            },
            {
              validator: this.isNum,
              trigger: 'blur'
            }
          ]
        },
        bnkData: [],
        bnkColumns: [{
            label: '行号',
            prop: 'fqcyjg',
            width: '120'
          },
          {
            label: '银行状态',
            prop: 'canjcc',
            width: '120'
          },
          {
            label: '银行类别',
            prop: 'jigulb',
            width: '120'
          },
          {
            label: '直接参与行号',
            prop: 'cjjghh',
            width: '150'
          },
          {
            label: '节点代码',
            prop: 'jieddm',
            width: '120'
          },
          // {
          //   label: '城市代码',
          //   prop: 'chshdm',
          //   width: '120'
          // },
          {
            label: '银行名称',
            prop: 'fukrhm',
            width: '200'
          },
          // {
          //   label: '地址',
          //   prop: 'dizhii',
          //   width: '100'
          // },
          // {
          //   label: '生效日期',
          //   prop: 'sxiorq',
          //   width: '120'
          // },
          // {
          //   label: '失效日期',
          //   prop: 'shixrq',
          //   width: '120'
          // },
          {
            label: '生效失效日期',
            prop: 'beiyrq',
            width: '120'
          },
          {
            label: '记录状态',
            prop: 'jiluzt',
            width: '120'
          },
        ],
        jigulb: [{
            value: '01',
            label: '直接参与人行'
          },
          {
            value: '02',
            label: '直接参与国库'
          },
          {
            value: '03',
            label: 'EIS转换中心'
          },
          {
            value: '04',
            label: '直接参与商业银行'
          },
          {
            value: '05',
            label: '开户特许直接参与者'
          },
          {
            value: '06',
            label: '开户特许间接参与者'
          },
          {
            value: '07',
            label: '间接参与者'
          },
          {
            value: '08',
            label: '无户特许直接参与者(债券)'
          }
        ],
        // zhuant: [
        //   {
        //     value: '1',
        //     label: '一代'
        //   },
        //   {
        //     value: '2',
        //     label: '二代'
        //   }
        // ],
        canjcclist: [
          { value: '112', label: ''},
          { value: '122', label: ''},
          { value: '212', label: ''},
          { value: '222', label: ''},
        ],
      };
    },
    created() {
      this.onSearch()
    },
    activated() {
      const {
        update
      } = this.$route.params
      if (update) {
        this.onDblBnkSearch()
      }
    },
    methods: {
      isNum(rule, value, callback) {
        if (value) {
          const age = /^[0-9]*$/
          if (!age.test(value)) {
            callback(new Error('只能为数字'))
          } else {
            callback()
          }
        }
        callback()
      },
      handleReset() {
        this.root.$refs.modelForm.resetFields();
      },
      onSearch() {
        this.model.pageNum = 1;
        this.model.pageSize = PageSize;
        this.onDblBnkSearch();
      },
      onDblBnkSearch() {
        this.searchLoading = true;
        delete this.model.modifySet;
        queryByPage(this.model).then(res => {
          if (res.respCode == SUCCESS) {
            const list = res.data.list
            this.bnkData = list
            this.model.pageNum = res.data.pageNumber
            this.model.pageSize = res.data.pageSize
            this.model.total = res.data.total
            this.searchLoading = false;
          } else {
            this.searchLoading = false;
          }
        })
      },
      queryFunc(pageNumber, pageSize) {
        this.model.pageNum = pageNumber
        this.model.pageSize = pageSize
        this.onDblBnkSearch()
      },
      bnkInfo(index, row) {
        // this.$router.push(`/business/dbibnk/${row.fqcyjg}`)
        this.infoDialog = true;
        this.infomation = row;
        this.operate = "details"
      },
      handleClose() {
        this.infoDialog = false;
      }
    }
  }
</script>

<style scoped>
  .table-button-item-list {
    padding: 0;
    margin: 0;
  }

  .table-button-item-list li {
    list-style: none;
    padding: 5px 0;
    text-align: center;
    color: #606266;
    cursor: pointer;
  }
</style>