<template>
  <!-- 此组件用于cips页面回填参与行 -->
  <div>
    <!-- 行号 -->
    <c-col :span="24">
      <el-form-item :label="mainInfo.keyLabel" :prop="`${mainInfo.moduleKey}.${mainInfo.keyProp}`">
        <c-input v-model="model[mainInfo.moduleKey][mainInfo.keyProp]" placeholder="请输入"
          @keyup.enter.native="showPtapDialog" @change="resetHanghao" clearable @clear="clear" @input="extkeyChange">
        </c-input>
      </el-form-item>
    </c-col>
    <!-- 名称 -->
    <c-col :span="24">
      <c-form-item :label="mainInfo.otherLabel" :prop="`${mainInfo.moduleKey}.${mainInfo.otherProp}`">
        <c-input v-model="model[mainInfo.moduleKey][mainInfo.otherProp]" placeholder="请输入"
          @keyup.enter.native="showPtapDialog1" @change="resetMincheng" show-word-limit></c-input>
      </c-form-item>
    </c-col>
    <!-- 弹窗 -->
    <el-dialog v-dialogDrag width="80%" :title="dialogTitle" :visible.sync="dialogTableVisible" v-if="dialogTableVisible">
      <div v-if="!loading && tableList.length === 0">暂无数据</div>
      <div v-else style="width: 100%;">
        <el-table id='tableRef' style="width: 100%;" max-height="300px" v-loading="loading" :data="tableList"
          @row-dblclick="dbClickRow" :before-close="beforeClose">
          <el-table-column v-for="(item,key) in tableColumn" :key="key" :prop="item.prop" :render-header="renderheader"
            :label="item.label">
          </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next, jumper" :total="total" :page-size="pageSize"
          :current-page="currentPage" @current-change="currentChange">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { columnMap } from "./ptapColumn.js";
  import { getCipmodBankInfo } from "~/service/business/common";
  import { get } from 'lodash'
  // 银行信息模块
  export default {
    inject: ["root"],
    props: {
      model: {
        type: Object,
        default: () => { }
      },
      coltyp: {
        //决定弹框的表头
        type: String,
        default: 'X'
      },
      mainInfo: {
        type: Object,
        default: function () {
          return {
            moduleKey: '',
            keyLabel: '',
            keyProp: '',
            otherLabel: '',
            otherProp: '',
            cyzgbs: '',
            banktyp: ''
          };
        }
      },
    },
    data() {
      return {
        dialogTitle: "", // 弹框标题
        dialogTableVisible: false, // 控制弹框的展示和隐藏
        loading: false,
        total: 0,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30, 40, 50, 100],
        pageSize: 5,
        tableList: [],
        tableColumn: []
      };
    },
    watch: {},
    methods: {
      beforeClose(done) {
        this.dialogTableVisible = false;
        this.currentPage = 1;
        done();
      },
      resetHanghao() {
        if (this.model[this.mainInfo.moduleKey][this.mainInfo.keyProp] == "") {
          this.model[this.mainInfo.moduleKey][this.mainInfo.keyProp] = '';
          this.model[this.mainInfo.moduleKey][this.mainInfo.otherProp] = '';
        }
      },
      resetMincheng() {
        if (this.model[this.mainInfo.moduleKey][this.mainInfo.otherProp] == '') {
          this.model[this.mainInfo.moduleKey][this.mainInfo.keyProp] = '';
          this.model[this.mainInfo.moduleKey][this.mainInfo.otherProp] = '';
        }
      },
      renderheader(h, { column, $index }) {
        return h("span", {}, [
          h("span", {}, column.label.split("/")[0]),
          h("br"),
          h("span", {}, column.label.split("/")[1])
        ]);
      },
      async showPtapDialog() {
				// 参考老系统,去掉检验
        // if (this.model[this.mainInfo.moduleKey][this.mainInfo.keyProp].length < 6) {
        //   this.$alert('至少输入六位行号', '提示信息', {
        //     confirmButtonText: '确定',
        //   });
        //   return
        // }
        // 分层取值
        await this.getTableData();
        if (this.total == 1) {
          this.dbClickRow(this.tableList[0]);
        } else {
          this.dialogTitle = `详情`;
          this.dialogTableVisible = true;
          this.tableColumn = columnMap[this.coltyp];
        }
      },
      async showPtapDialog1() {
        if (this.model[this.mainInfo.moduleKey][this.mainInfo.otherProp].length < 4) {
          this.$alert('至少输入四位名称', '提示信息', {
            confirmButtonText: '确定',
          });
          return
        }
        // 设置弹框标题
        await this.getTableData();
        if (this.total == 1) {
          this.dbClickRow(this.tableList[0]);
        } else {
          this.dialogTitle = `详情`;
          this.dialogTableVisible = true;
          this.tableColumn = columnMap[this.coltyp];
        }
        // 分层取值

      },
      currentChange(num) {
        this.currentPage = num;
        this.getTableData();
      },
      dbClickRow(row, column, event) {
        this.model[this.mainInfo.moduleKey][this.mainInfo.keyProp] = row.bch;
        this.model[this.mainInfo.moduleKey][this.mainInfo.otherProp] = row.bchname;
        this.dialogTableVisible = false;
      },
      // 获取弹框内的table数据
      async getTableData() {
        return new Promise(async (resolve) => {
          this.loading = true;
          this.tableList = [];
          this.pageSize = 10;
          this.total = 0;
          // 获取table的表格数据
          let params = {
            bch: this.model[this.mainInfo.moduleKey][this.mainInfo.keyProp] || "",
            bchname: this.model[this.mainInfo.moduleKey][this.mainInfo.otherProp] || "",
            cyzgbs: this.mainInfo.cyzgbs,
            banktyp: this.mainInfo.banktyp,
            pageNum: this.currentPage,
            pageSize: this.pageSize
          };
          getCipmodBankInfo(params).then(
            res => {
              if (res.respCode == SUCCESS) {
                if (res.data && res.data.list) {
                  this.total = res.data.total;
                  this.tableList = res.data.list.map(it => ({
                    ...it,
                    // 添加新key将Party Number和Address Number换行
                    partyBankExtkey: `${it.bch}`,
                    partyBankName: `${it.bchname}`
                  }));
                  this.currentPage = res.data.pageNum;
                  this.pageSize = res.data.limit;
                  resolve(this.tableList)
                }
              }
            }
          )
          this.loading = false;
        })
      }
    },
    clear() {
      this.$emit('clear')
    },
    //extkey清空时
    extkeyChange() {
      if (!this.model[this.argadr.grp][this.argadr.rol].pts.extkey) {
        this.model[this.argadr.grp][this.argadr.rol].pts.nam = ''
        this.model[this.argadr.grp][this.argadr.rol].pts.ennam = ''
        this.model[this.argadr.grp][this.argadr.rol].pts.enadr = ''
        this.model[this.argadr.grp][this.argadr.rol].pts.cnnam = ''
        this.model[this.argadr.grp][this.argadr.rol].pts.cnadr = ''
        this.model[this.argadr.grp][this.argadr.rol].pts.adrblk = ''
        this.model[this.argadr.grp][this.argadr.rol].pts.ptainr = ''
        this.model[this.argadr.grp][this.argadr.rol].pts.ptyinr = ''
        this.markExtkey = ''
        // this.disabledDetail = true
      }
    },

  }
</script>
<style scoped>
  .el-dialog__body {
    /* min-height: 120%; */
  }

  .el-table .cell {
    white-space: pre-wrap;
  }
</style>