<template>
  <div class="eibs-tab">
    <c-col :span="24">
      <!-- ==================左边================ -->
      <c-col :span="12" style="padding-right: 20px">
        <c-col :span="24">
          <el-form-item label="查询码" prop="seacod">
            <c-input v-model="model.seacod" maxlength="6" placeholder="请输入查询码"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="客户号" prop="cliextkey">
            <c-input v-model="model.cliextkey" @keyup.enter.native="showPtapDialog()" @blur="handleExtkeyBlur()" @clear="clear()" @input="extkeyInput()" maxlength="10" placeholder="请输入客户号"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="客户名称" prop="clinam">
            <c-input v-model="model.clinam" disabled maxlength="40" placeholder="请输入客户名称"></c-input>
          </el-form-item>
        </c-col>

        <c-col :span="24">
          <el-form-item label="组织机构代码" prop="custcode">
            <c-input v-model="model.custcode" maxlength="32" placeholder="请输入组织机构代码"></c-input>
          </el-form-item>
        </c-col>
      </c-col>
    </c-col>

    <!-- 客户信息弹窗 -->
		<el-dialog title="客户信息详情" v-dialogDrag width="64%" :visible.sync="dialogTableVisible" destroy-on-close :close-on-click-modal="false" :close-on-press-escape="false" :show-close="true" v-if="dialogTableVisible" :modal-append-to-body="false" :append-to-body="true">
			<div v-if="!tableLoading && tableList.length === 0">暂无数据</div>
			<div v-else style="width: 100%;height: 100%;">
				<el-table id='tableRef' height="calc(100% - 32px)" style="width: 100%;" v-loading="tableLoading" :data="tableList" @row-dblclick="dbClickRow" :before-close="beforeClose">
					<el-table-column label="客户号" prop="extkey" width="auto">
					</el-table-column>
					<el-table-column label="客户名称" prop="nam" width="auto">
					</el-table-column>
					<el-table-column label="客户类型" prop="ptytyp" width="auto">
					</el-table-column>
				</el-table>
				<el-pagination class="eContainer-pagination" layout="prev, pager, next, jumper, ->, sizes, total" :page-sizes="pageSizes" :page-size="pageSize" :current-page="currentPage" :total="total" @size-change="sizeChange" @current-change="currentChange"></el-pagination>
			</div>
		</el-dialog>

    <el-dialog :visible.sync="model.qylsvisible" v-if="model.qylsvisible" width="70%" title="查询结果">
      <m-infodsp :info="model.info"></m-infodsp>
    </el-dialog>

  </div>
</template>
<script>
import event from "../event";
import Infodsp from "./Qylsinfodsp.vue";
import { queryPtyInfos } from "~/service/business/common";
import commonFunctions from "~/mixin/commonFunctions.js";
import commonDepend from "~/mixin/commonDepend.js";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event, commonFunctions, commonDepend],
  components: {
    "m-infodsp": Infodsp
  },
  data() {
    return {
      dialogTitle: "", // 弹框标题
      dialogTableVisible: false, // 控制弹框的展示和隐藏
      tableLoading: false,
      total: 0,
      currentPage: 1, // 页数
      pageSizes: [5, 10, 20, 30, 40, 50, 100],
      pageSize: 10, // 条数
      tableList: [],
      markExtkey: "",
      visible: false
    };
  },
  methods: {
    // extkey输入框失焦
    handleExtkeyBlur(e) {
      let extkey = this.model.cliextkey;
      if (extkey && extkey !== this.markExtkey) {
        this.showPtapDialog();
      }
    },

    // 弹框
    async showPtapDialog() {
      if (this.tableLoading || this.dialogTableVisible) {
        return;
      }
      const value = this.model.cliextkey;
      // 分层取值
      await this.getTableData(value);
      if (this.total == 1) {
        this.dbClickRow(this.tableList[0]);
      } else {
        // 设置弹框标题
        this.dialogTableVisible = true;
        this.$nextTick(() => {
          this.root.$refs["modelForm"].validateField([`cliextkey`]);
        });
      }
    },

    // 获取弹框内的table数据
    async getTableData(value) {
      return new Promise(async resolve => {
        this.tableLoading = true;
        this.tableList = [];
        // 获取table的表格数据
        let params = {
          extkey: value || "",
          bchbranch: JSON.parse(window.sessionStorage.accbch).branch,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        };
        const loading = this.loading();
        const res = await queryPtyInfos(params, this.moduleRouter());
        loading.close();
        if (res.respCode == SUCCESS) {
          if (res.data && res.data.list) {
            this.total = res.data.total;
            this.tableList = res.data.list;
            resolve(this.tableList);
          }
        }
        this.tableLoading = false; //接口掉完变成false
      });
    },

    async dbClickRow(row, column, event) {
      this.markExtkey = row.extkey;
      this.model.cliextkey = row.extkey;
      this.model.clinam = row.nam;
      this.model.custcode = row.juscod;
      this.$nextTick(() => {
        this.root.$refs["modelForm"].validateField([`cliextkey`]);
      });
      this.dialogTableVisible = false;
    },

    //extkey清空时
    extkeyInput() {
      if (!this.model.cliextkey) {
        this.model.clinam = "";
        this.model.custcode = "";
        this.markExtkey = "";
        this.clear();
      }
    },

    // 清除
    clear() {
      this.$emit("clear");
      this.$nextTick(() => {
        this.root.$refs["modelForm"].validateField([`cliextkey`]);
      });
    },

    // 关闭弹框
    handleCloseDialogTable() {
      this.dialogTableVisible = false;
    },

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

    sizeChange(num) {
      this.pageSize = num;
      const value = this.model.cliextkey;
      this.getTableData(value);
    },

    currentChange(num) {
      this.currentPage = num;
      const value = this.model.cliextkey;
      this.getTableData(value);
    },
  },
  created: function() {}
};
</script>
<style>
</style>