<template>
  <div>
    <c-col v-if="!noRef" :span="24">
      <c-form-item 
        :label="`${argadr.title}参考号`" 
        :prop="`${argadr.grp}.${argadr.rol}.pts.ref`"
      >
        <c-input :disabled="disabledRef" v-model="model[argadr.grp][argadr.rol].pts.ref" :placeholder="'请输入' + argadr.title + '参考号'"></c-input>
      </c-form-item>
    </c-col>
    <c-col :span="24">
      <el-form-item 
        :label="`${argadr.title}${!editExtLabel ? 'ID' : ''}`"
        :prop="`${argadr.grp}.${argadr.rol}.pts.extkey`"
        style="width: 100%" 
      >
        <c-fullbox>
          <c-input
            v-model="model[argadr.grp][argadr.rol].pts.extkey"
            placeholder="请输入"
            maxlength="16"
            :disabled="disabledExtkey"
            @keyup.enter.native="showPtapDialog(`${argadr.grp}.${argadr.rol}.pts.extkey`)"
          >
          </c-input>
          <template slot="footer">
            <c-button
              style="margin:0 10px 0 10px;padding: 0 12px;"
              size="small"
              type="primary"
              icon="el-icon-search"
              :disabled="disabledExtkey"
              @click="onSeainf(`${argadr.grp}.${argadr.rol}.pts.extkey`)"
            >
            </c-button>
            <c-button
              style="margin:0 0"
              size="small"
              type="primary"
              :disabled="disabledExtkey"
              @click="onAplpDet"
            >
              {{ $t('buttons.details') }}
            </c-button>
          </template>
        </c-fullbox>
      </el-form-item>
    </c-col>
    <template v-if="!onlySearch">
      <c-col v-if="isAdrblk|| !haveAdrLabel" :span="24">
        <el-form-item 
        :label="isAdrblk? '地址名称' : ''" 
        :prop="`${argadr.grp}.${argadr.rol}.pts.adrblk`"
      >
          <c-input 
            type="textarea" 
            :rows="4" 
            v-model="model[argadr.grp][argadr.rol].pts.adrblk" 
            maxlength="150" 
            show-word-limit 
            placeholder="请输入地址名称"
            :disabled="disabled||model[argadr.grp][argadr.rol].pts.extkey!=''?true:false"
          ></c-input>
        </el-form-item>
      </c-col>
      <!-- 显示名称和地址字段 -->
      <template v-else>
        <c-col :span="24">
          <el-form-item 
            :label="`${argadr.title}名称`" 
            :prop="`${argadr.grp}.${argadr.rol}.namelc`"
          >
            <c-input 
              type="textarea" 
              v-model="model[argadr.grp][argadr.rol].namelc" 
              :placeholder="'请输入' + argadr.title + '名称'" 
              :disabled="disabled"
              :rows="2" 
              maxlength="35" 
              show-word-limit
            >
            </c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item 
            :label="`${argadr.title}地址`" 
            :prop="`${argadr.grp}.${argadr.rol}.adrelc`"
          >
            <c-input 
              type="textarea" 
              :rows="2" 
              v-model="model[argadr.grp][argadr.rol].adrelc" 
              :placeholder="'请输入' + argadr.title + '地址'"
              :disabled="disabled" 
              maxlength="35" 
              show-word-limit
            ></c-input>
          </el-form-item>
        </c-col>
      </template>
    </template>
    <!-- 弹窗 -->
    <el-dialog width="80%" 
      :title="dialogTitle" 
      :visible.sync="dialogTableVisible"
    >
      <div v-if="!loading && tableList.length === 0">暂无数据</div>
      <div v-else>
        <el-table 
          id='tableRef' 
          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 { getPtaTableDtat, getPtsptaByInr } from "~/service/business/common";
// 机构信息模块
export default {
  inject: ["root"],
  props: {
    model: {
      type: Object,
      default: undefined
    },
    argadr: {
      type: Object,
      default: function() {
        return {
          title: "", //角色名称
          rol: "", //角色
          grp: "" //所属模块
        };
      }
    },
    ptytyp: {
      //决定弹框的表头
      type: String
    },
    bchinr: {
      type: String
    },
    disabled: {
      //地址名称是否灰显
      type: Boolean,
      default: false
    },
    disabledRef: {
      //ref是否灰显 (true:参考号处灰显)
      type: Boolean,
      default: false
    },
    disabledExtkey: {
      //extkey是否灰显(true:申请人处灰显)
      type: Boolean,
      default: false
    },
    isAdrblk: {
      //false：申请人参考号/申请人/申请人名称/申请人地址 true：申请人参考号/申请人/地址名称
      type: Boolean,
      default: true
    },
    onlySearch: {
      //是否只展示extkey(true：textarea不显示)
      type: Boolean,
      default: false
    },
    noRef: {
      //true：参考号不显示
      type: Boolean,
      default: false
    },
    editExtLabel: {
      //自定义ID label(false：申请人id)
      type: Boolean,
      default: true
    },
    haveAdrLabel: {
      //false:textarea无lable
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogTitle: "", // 弹框标题
      dialogTableVisible: false, // 控制弹框的展示和隐藏
      loading: true,
      total: 0,
      currentPage: 1,
      pageSizes: [5, 10, 20, 30, 40, 50, 100],
      pageSize: 5,
      tableList: [],
      inputValue: "",
      tableColumn: []
    };
  },
  watch: {},
  methods: {
    // 表头 头部换行，以 / 作为换行标志
    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("/")[0]),
        h("br"),
        h("span", {}, column.label.split("/")[1])
      ]);
    },

    onSeainf(data) {
      this.$emit("onSeainf", data);
    },
    onAplpDet() {
      this.$emit("onAplpDet");
    },

    showPtapDialog(key) {
      const value = this.model[this.argadr.grp][this.argadr.rol].pts.extkey;
        // 设置弹框标题
        this.dialogTitle = `${this.argadr.title}详情`;
        this.dialogTableVisible = true;
        // 分层取值
        this.getTableData(value);
    },

    currentChange(num) {
      this.currentPage = num;
      this.getTableData();
    },

    // 获取弹框内的table数据
    getTableData(value) {
      this.loading = true;
      this.tableList = [];
      this.currentPage = 1;
      this.pageSize = 10;
      this.total = 0;
      // 获取table的表格数据
      let params = {
        ptytyp: this.ptytyp,
        extkey: value || "",
        bchinr: this.bchinr,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      getPtaTableDtat(params, this.moduleRouter()).then(res => {
        if (res.respCode == SUCCESS) {
          if (Array.isArray(res.data.list)) {
            this.loading = false; //接口掉完变成false
            this.total = res.data.total;
            this.tableList =
              res.data.list &&
              res.data.list.map(it => ({
                ...it,
                // 添加新key将Party Number和Address Number换行
                // 返回值有大量空格，无意义，需去掉
                partyNumberAndAdressNumber: `${
                  it.ptaptyextkey ? it.ptaptyextkey.replace(/\s*/g, "") : ""
                }\n${it.ptaobjkey ? it.ptaobjkey.replace(/\s*/g, "") : ""}`,
                bchbranchAndBchbchname: `${
                  it.bchbranch ? it.bchbranch.replace(/\s*/g, "") : ""
                }\n${it.bchbchname ? it.bchbchname.replace(/\s*/g, "") : ""}`,
                adrnam1AndPtanam1: `${
                  it.adrnam1 ? it.adrnam1.replace(/\s*/g, "") : ""
                }\n${it.ptanam1 ? it.ptanam1.replace(/\s*/g, "") : ""}`,
                adradr1AndAdrstr1: `${
                  it.adradr1 ? it.adradr1.replace(/\s*/g, "") : ""
                }\n${it.adrstr1 ? it.adrstr1.replace(/\s*/g, "") : ""}`,
                adrstr2Andadrloccty: `${
                  it.adrstr2 ? it.adrstr2.replace(/\s*/g, "") : ""
                }\n${it.adrloccty ? it.adrloccty.replace(/\s*/g, "") : ""}`,
                adrloczipAndadrloctxt: `${
                  it.adrloczip ? it.adrloczip.replace(/\s*/g, "") : ""
                }\n${it.adrloctxt ? it.adrloctxt.replace(/\s*/g, "") : ""}`
              }));
            this.currentPage = res.data.offset;
            this.pageSize = res.data.limit;
            this.tableColumn = JSON.parse(
              JSON.stringify(columnMap[this.ptytyp])
            );
          }
        }
      });
    },
    async dbClickRow(row, column, event) {
      let params = {
        inr: row.ptainr
      };
      const response = await getPtsptaByInr(params, this.moduleRouter());
      if (response.respCode == SUCCESS) { 
        // 回填数据
        this.model[this.argadr.grp][this.argadr.rol].pts.extkey = row.ptainr;
        this.model[this.argadr.grp][this.argadr.rol].pts.adrblk = response.data.adrnam1;
        this.model[this.argadr.grp][this.argadr.rol].pts.rol = this.argadr.rol.toUpperCase();
        if(!this.isAdrblk && this.haveAdrLabel){
          this.model[this.argadr.grp][this.argadr.rol].pts.namelc = response.data.nam;
          // this.model[this.argadr.grp][this.argadr.rol].pts.ptainr = response.data.ptaobjinr;
          this.model[this.argadr.grp][this.argadr.rol].pts.adrelc = response.data.adrelc;
        }
      }
      this.dialogTableVisible = false;
    },

    beforeClose(done) {
      this.dialogTableVisible = false;
      this.currentPage = 1;
      done();
    }
  },

  created: function() {}
};
</script>
<style scope>
.el-dialog__body {
  min-height: 120%;
}
.el-table .cell {
  white-space: pre-wrap;
}
</style>