<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-09-26 16:49:33
-->
<template>
  <dialogBox
    title="权利人信息"
    width="75%"
    isMain
    v-model="myValue"
    :isFullscreen="false"
    @submitForm="submitForm"
    @closeDialog="closeDialog"
    :isButton="isShow">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="from-clues-header">
      <el-tab-pane label="基本信息" name="1"></el-tab-pane>
      <el-tab-pane label="企业信息" v-if="showButton" name="2"></el-tab-pane>
      <el-tab-pane label="银行机构" v-if="showButton" name="3"></el-tab-pane>
    </el-tabs>

    <el-form
      :model="ruleForm"
      v-if="activeName==1"
      :rules="rules"
      ref="ruleForm"
      label-width="120px">
      <el-form-item label="身份证读卡器">
        <el-button type="text" icon="el-icon-tickets" :disabled="!showButton" @click="readClick">读取</el-button>
        <el-button type="primary" v-if="isBz" @click="handleFilings">信息备案</el-button>
      </el-form-item>
      <el-row>
        <el-col :span="8">
          <el-form-item label="权利人类型" prop="qlrlx">
            <el-select
              clearable
              v-model="ruleForm.qlrlx"
              class="width100"
              :disabled="!showButton"
              placeholder="请选择">
              <el-option
                v-for="item in dictData['A36']"
                :key="item.dcode"
                :label="item.dname"
                :value="item.dcode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名/名称" prop="qlrmc">
            <el-input
              v-model="ruleForm.qlrmc"
              maxlegth="15"
              :disabled="!showButton"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件种类" prop="zjzl">
            <el-select
              clearable
              v-model="ruleForm.zjzl"
              :disabled="!showButton"
              class="width100"
              @change="handleZjzl"
              placeholder="请选择">
              <el-option
                v-for="item in dictData['A30']"
                :key="item.dcode"
                :label="item.dname"
                :value="item.dcode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="证件号" prop="zjh">
            <el-input
              v-model="ruleForm.zjh"
              :disabled="!showButton"
              maxlength="18"
              oninput="this.value=this.value.replace(/[^\X0-9]/g,'')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="dh">
            <el-input
              v-model="ruleForm.dh"
              :disabled="!showButton"
              maxlength="11"
              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="权利比例">
            <el-input
              v-model="ruleForm.qlbl"
              maxlength="32"
              :disabled="!showButton || this.ruleForm.gyfs == 1"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="法人名称" prop="frmc">
            <el-input
              v-model="ruleForm.frmc"
              maxlength="32"
              :disabled="!showButton"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="国家/地区" prop="gj">
            <el-input
              v-model="ruleForm.gj"
              maxlength="3"
              :disabled="!showButton"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="户籍所在省市">
            <el-input
              v-model="ruleForm.hjszss"
              maxlength="3"
              :disabled="!showButton"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="地址">
            <el-input
              v-model="ruleForm.dz"
              maxlength="100"
              :disabled="!showButton"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="发证机关">
            <el-input
              v-model="ruleForm.fzjg"
              maxlength="10"
              :disabled="!showButton"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电子邮件">
            <el-input
              v-model="ruleForm.dzyj"
              :disabled="!showButton"
              maxlength="25"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮编" prop="yb">
            <el-input
              v-model.number="ruleForm.yb"
              :disabled="!showButton"
              maxlength="6"
              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="工作单位">
            <el-input
              v-model="ruleForm.gzdw"
              maxlength="32"
              :disabled="!showButton"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="代理机构">
            <el-input
              v-model="ruleForm.dlrjgmc"
              maxlength="32"
              :disabled="!showButton"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="代理人电话">
            <el-input
              v-model="ruleForm.dlrdhhm"
              :disabled="!showButton"
              maxlength="11"
              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="代理人姓名">
            <el-input
              v-model="ruleForm.dlrxm"
              maxlength="15"
              :disabled="!showButton"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="代理人证件类型">
            <el-select
              clearable
              v-model="ruleForm.dlrzjlx"
              :disabled="!showButton"
              class="width100"
              placeholder="请选择">
              <el-option
                v-for="item in dictData['A30']"
                :key="item.dcode"
                :label="item.dname"
                :value="item.dcode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="性别">
            <el-select
              clearable
              v-model="ruleForm.xb"
              :disabled="!showButton"
              class="width100"
              placeholder="请选择">
              <el-option
                v-for="item in dictData['A43']"
                :key="item.dcode"
                :label="item.dname"
                :value="item.dcode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="代理人证件号">
            <el-input
              v-model="ruleForm.dlrzjh"
              :disabled="!showButton"
              maxlength="18"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div v-if="activeName==2" class="padding10">
      <el-form :model="queryFormQY" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名/名称">
              <el-input placeholder="姓名/名称" v-model="queryFormQY.qymc" clearable class="width100">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号">
              <el-input placeholder="证件号" v-model="queryFormQY.zjh" clearable class="width100">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="btnColRight">
            <el-form-item>
              <el-button type="primary" @click="handleSearchQY">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="tableDataQy.data" border v-Loading="loading" :height="426.8">
        <el-table-column label="序号" type="index" width="50" align="center">
          <template slot-scope="scope">
            {{(pageData.currentPage - 1) * pageData.pageSize + scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column v-for="item in tableDataQy.columns" :key="item.index" :width="item.width" :prop="item.prop" :label="item.label" align="center">
        </el-table-column>
        <el-table-column label="操作" width="50">
          <template slot-scope="scope">
            <el-button type="text" @click="handleSelect(scope.row)">使用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next,total" :total="tableDataQy.total"
        @current-change="handleQYCurrentChange"></el-pagination>
    </div>
    <div v-if="activeName==3" class="padding10">
      <el-form :model="queryFormYH" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名/名称">
              <el-input placeholder="姓名/名称" v-model="queryFormYH.qymc" clearable class="width100">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号">
              <el-input placeholder="证件号" v-model="queryFormYH.zjh" clearable class="width100">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="btnColRight">
            <el-form-item>
              <el-button type="primary" @click="handleSearchYH">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="tableDataYh.data" border v-Loading="loading" :height="426.8">
        <el-table-column label="序号" type="index" width="50" align="center">
          <template slot-scope="scope">
            {{(pageData.currentPage - 1) * pageData.pageSize + scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column v-for="item in tableDataYh.columns" :key="item.index" :prop="item.prop" :label="item.label" align="center">
        </el-table-column>
        <el-table-column label="操作" width="50">
          <template slot-scope="scope">
            <el-button type="text" @click="handleSelect(scope.row)">使用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next,total" :total="tableDataYh.total"
        @current-change="handleYHCurrentChange"></el-pagination>
    </div>
  </dialogBox>
</template>
<script>
  import { mapGetters } from "vuex";
  import store from '@/store/index.js'
  import { replace } from "@/api/company.js"
  import { getUuid } from "@/utils/operation.js"
  import { getIdCardInfo } from '@/utils/operation.js'
  import { queryQyByPage, queryYhByPage, addQy } from "@/api/xxba.js";
  import { dataYh, dataQy, sendThis } from "./addQlrData";
  export default {
    props: {
      value: { type: Boolean, default: false },
      details: { type: Object, default: {} },
      showButton: { type: Boolean, default: false },
    },
    computed: {
      ...mapGetters(["dictData"]),
    },
    mounted () {
      sendThis(this);
    },
    data () {
      return {
        isShow: false,
        isBz: false,
        activeName: '1',
        loading: false,
        myValue: this.value,
        ruleForm: {
          bsmBdcqz: "",
          bsmQlr: "",
          bsmQlxx: "",
          bz: "",
          cbfbm: "",
          dh: "",
          dlrdhhm: "",
          dlrjgmc: "",
          dlrxm: "",
          dlrzjh: "",
          dlrzjlx: "",
          dz: "",
          dzyj: "",
          fbfbm: "",
          frdh: "",
          frmc: "",
          fzjg: "",
          gj: "",
          gzdw: "",
          hjszss: "",
          qlrlx: "",
          qlrmc: "",
          qlrtz: "",
          sfczr: "",
          sshy: "",
          sxh: 0,
          xb: "",
          yb: "",
          zjh: "",
          zjzl: "",
        },
        rules: {
          qlrlx: [{ required: true, message: "权利人类型", trigger: "change" }],
          qlrmc: [{ required: true, message: "姓名/名称", trigger: "blur" }],
          zjzl: [{ required: true, message: "证件种类", trigger: "change" }],
          zjh: [{ required: true, message: "证件号", trigger: "blur" }],
        },
        pageData: {
          currentPage: 1,
          pageSize: 8
        },
        // 企业
        queryFormQY: {
          qymc: "",
          zjh: ""
        },
        tableDataQy: {
          total: 0,
          columns: dataQy.columns(),
          data: [],
        },
        // 银行
        queryFormYH: {
          qymc: "",
          zjh: ""
        },
        tableDataYh: {
          total: 0,
          columns: dataYh.columns(),
          data: [
          ]
        }
      }
    },
    watch: {
      value (val) {
        this.myValue = _.cloneDeep(val)
        if (val && Object.keys(this.details).length > 0) {
          this.activeName = '1'
        }
        this.isShow = this.showButton
      },
      details: {
        handler: function (val, oldVal) {
          this.ruleForm = val;
        },
        deep: true
      }
    },
    methods: {
      handleZjzl (val) {
        if (['6', '7', '8'].includes(val)) {
          this.isBz = true
        } else {
          this.isBz = false
        }
      },
      /**
       * @description: 信息备案
       * @author: renchao
       */
      handleFilings () {
        this.ruleForm.qymc = this.ruleForm.qlrmc
        this.ruleForm.dwdz = this.ruleForm.dz
        addQy(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.$message.success('备案成功')
          } else {
            this.$message.error(res.message);
          }
        })
      },
      /**
       * @description: handleClick
       * @author: renchao
       */
      handleClick (event, tab) {
        if (this.activeName != 1) {
          this.isShow = false
        } else {
          this.isShow = true
        }
        this.pageData.currentPage = 1
        if (this.activeName == 2) {
          this.handleSearchQY()
        } else {
          this.handleSearchYH()
        }
      },
      /**
       * @description:企业查询
       * @param {*} val
       * @param {*} code
       * @author: renchao
       */
      dicStatus (val, code) {
        let data = store.getters.dictData[code],
          name = '暂无'
        if (data) {
          data.map((item) => {
            if (item.dcode == val) {
              name = item.dname
            }
          })
          return name
        }
      },
      /**
       * @description: 企业信息搜索
       * @author: renchao
       */
      handleSearchQY () {
        let data = { ...this.queryFormQY, ...this.pageData }
        this.tableDataQy.data = []
        queryQyByPage(data).then((res) => {
          if (res.code === 200) {
            let { total, records } = res.result;
            this.tableDataQy.total = total;
            this.tableDataQy.data = records;
            this.tableDataQy.data.forEach(item => {
              item.zjzlMc = this.dicStatus(item.zjzl, 'A30')
              item.qlrmc = item.qymc
              item.dz = item.dwdz
            })
          }
        })
      },
      /**
       * @description: handleQYCurrentChange
       * @param {*} val
       * @author: renchao
       */
      handleQYCurrentChange (val) {
        this.pageData.currentPage = val
        this.handleSearchQY()
      },
      /**
       * @description: handlesQYSelect
       * @param {*} val
       * @author: renchao
       */
      handleSelect (val) {
        let that = this
        let bsmSldy = window.currentSelect.bsmSldy ? window.currentSelect.bsmSldy : ''
        this.$confirm('是否同步材料信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          distinguishCancelAndClose: true,//区分取消与关闭
        }).then(() => {
          replace(val.bsmCompany, this.$route.query.bsmSlsq, bsmSldy).then(res => {
            that.$emit("updateDetail", _.cloneDeep({ ...val, qlrlx: '2', id: getUuid(16) }));
            that.$emit("input", false);
            if (res.code == 200) {
              that.$message({
                type: 'success',
                message: '同步成功!'
              })
            } else {
              this.$message.error(res.message);
            }
          })
        }).catch(action => {
          if (action == 'cancel') {
            that.$emit("updateDetail", _.cloneDeep({ ...val, sqrlx: '2' }));
            that.$emit("input", false);
          }
        })
      },
      /**
       * @description: 银行信息搜索
       * @author: renchao
       */
      handleSearchYH () {
        let data = { ...this.queryFormYH, ...this.pageData }
        this.tableDataYh.data = []
        queryYhByPage(data).then((res) => {
          if (res.code === 200) {
            let { total, records } = res.result;
            this.tableDataYh.total = total;
            this.tableDataYh.data = records;
            this.tableDataYh.data.forEach(item => {
              item.zjzlMc = this.dicStatus(item.zjzl, 'A30')
              item.qlrmc = item.qymc
              item.dz = item.dwdz
            })
          }
        })
      },
      /**
       * @description: handleYHCurrentChange
       * @param {*} val
       * @author: renchao
       */
      handleYHCurrentChange (val) {
        this.pageData.currentPage = val
        this.handleSearchQY()
      },
      /**
       * @description: 身份证打卡器
       * @author: renchao
       */
      readClick () {
        getIdCardInfo().then(res => {
          if (res.data.code == 0) {
            let data = res.data.IDCardInfo
            this.ruleForm.qlrmc = data.name
            this.ruleForm.zjzl = '1'
            this.ruleForm.zjh = data.cardID
            this.ruleForm.xb = data.sexCode
            this.ruleForm.dz = data.address
            this.ruleForm.fzjg = data.issueOrgan
            this.$message({
              message: '读取成功！',
              type: 'success'
            })
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        })
      },
      /**
       * @description: closeDialog
       * @author: renchao
       */
      closeDialog () {
        this.$emit("input", false);
        this.$refs["ruleForm"].resetFields();
      },
      /**
       * @description: submitForm
       * @author: renchao
       */
      submitForm () {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.$emit("input", false);
            this.$emit("updateDetail", _.cloneDeep(this.ruleForm));
          } else {
            return false;
          }
        });
      },
    },
  };
</script>
<style scoped lang="scss">
  @import "~@/styles/dialogBoxheader.scss";
  .submit-button {
    text-align: center;
    height: 52px;
    padding-top: 10px;
    background-color: #fff;
  }
  .padding10 {
    padding-bottom: 10px;
  }
</style>