<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-12-29 10:04:52
-->
<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"
      :rules="rules"
      v-if="activeName==1"
      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="头像">
            <el-image style="width:102px;height:126px" :src="ruleForm.avatar || avatar" fit="contain" />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名/名称" prop="ywrmc">
                <el-input v-model="ruleForm.ywrmc" maxlegth="15"
                  :disabled="!showButton"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件种类" prop="zjzl">
                <el-select
                  clearable
                  v-model="ruleForm.zjzl"
                  :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="12">
              <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="12">
              <el-form-item label="性别" prop="xb">
                <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-row>
          <el-row>
            <el-col :span="12">
              <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="12">
              <el-form-item label="国家/地区" prop="gj">
                <el-input
                  v-model="ruleForm.gj"
                  maxlength="3"
                  :disabled="!showButton"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="义务人类型" prop="ywrlx">
            <el-select
              clearable
              v-model="ruleForm.ywrlx"
              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="qlbl">
            <el-input
              v-model="ruleForm.qlbl"
              maxlength="32"
              :disabled="!showButton || this.ruleForm.gyfs == 1"></el-input>
          </el-form-item>
        </el-col>
        <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-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="户籍所在省市" prop="hjszss">
            <el-input
              v-model="ruleForm.hjszss"
              maxlength="3"
              :disabled="!showButton"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="地址" prop="txdz">
            <el-input
              v-model="ruleForm.txdz"
              maxlength="100"
              :disabled="!showButton"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="发证机关" prop="fzjg">
            <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="电子邮件" prop="dzyj">
            <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="工作单位" prop="gzdw">
            <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="代理机构" prop="dlrjg">
            <el-input
              v-model="ruleForm.dlrjg"
              maxlength="32"
              :disabled="!showButton"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="代理人姓名" prop="dlrmc">
            <el-input
              v-model="ruleForm.dlrmc"
              maxlength="15"
              :disabled="!showButton"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="代理人证件类型" prop="dlrzjlx">
            <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-col :span="8">
          <el-form-item label="代理人证件号" prop="dlrzjh">
            <el-input
              v-model="ruleForm.dlrzjh"
              :disabled="!showButton"
              maxlength="18"
              oninput="this.value=this.value.replace(/[^\X0-9]/g,'')"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="代理人电话" prop="dlrdh">
            <el-input
              v-model="ruleForm.dlrdh"
              :disabled="!showButton"
              maxlength="11"
              oninput="value=value.replace(/[^\d]/g,'')"></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="483">
        <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="483">
        <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 "./addYwrData";
  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 {
        avatar: require('../../../../image/user.png'),
        isShow: false,
        isBz: false,
        activeName: '1',
        loading: false,
        myValue: this.value,
        ruleForm: {
          ywrlx: "",
          ywrmc: "",
          zjzl: "",
          zjh: "",
          dh: "",
          xb: "",
          frmc: "",
          gjdq: "",
          szss: "",
          txdz: "",
          yb: "",
          fzjg: "",
          dzyj: "",
          qlbl: "",
          gzdw: "",
          avatar: "",
          dljg: "",
          dlrxm: "",
          dlrzjlx: "",
          dlrzjh: "",
        },
        rules: {
          ywrlx: [{ required: true, message: "义务人类型", trigger: "change" }],
          ywrmc: [{ 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 = _.cloneDeep(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.ywrlx
        this.ruleForm.dwdz = this.ruleForm.txdz
        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.ywrmc = item.qymc
              item.txdz = item.dwdz
              item.id = getUuid(16)
            })
          }
        })
      },
      /**
       * @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, ywrlx: '2' }));
            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.ywrmc = item.qymc
              item.txdz = item.dwdz
              item.id = getUuid(16)
            })
          }
        })
      },
      /**
       * @description: handleYHCurrentChange
       * @param {*} val
       * @author: renchao
       */
      handleYHCurrentChange (val) {
        this.pageData.currentPage = val
        this.handleSearchQY()
      },
      /**
       * @description: 身份证打卡器
       * @author: renchao
       */
      readClick () {
        function getObjectByValue (arrayOfObjects, value) {
          var name = ''
          arrayOfObjects.forEach(item => {
            if (item.dname.includes(value)) name = item.dcode
          })
          return name
        }
        getIdCardInfo(this.BASE_API.gaopaiyi).then(res => {
          if (this.BASE_API.gaopaiyi == 'jy') {
            const {
              Name,
              IdNo,
              Sex,
              Address,
              Agencvy,
              PhotoB64
            } = JSON.parse(res)
            if (Name) {
              this.ruleForm.ywrmc = Name;
              this.ruleForm.zjzl = '1';
              this.ruleForm.zjh = IdNo;
              this.ruleForm.xb = getObjectByValue(this.dictData['A43'], Sex);
              this.ruleForm.txdz = Address;
              this.ruleForm.fzjg = Agencvy;
              this.ruleForm.avatar = 'data:image/png;base64,' + PhotoB64
              this.$message({
                message: '读取成功！',
                type: 'success'
              })
            } else {
              this.$message({
                message: '请放置身份证',
                type: 'warning'
              })
            }
          } else {
            if (res.data.code == 0) {
              let data = res.data.IDCardInfo
              this.ruleForm.ywrmc = data.name
              this.ruleForm.zjzl = '1'
              this.ruleForm.zjh = data.cardID
              this.ruleForm.xb = data.sexCode
              this.ruleForm.txdz = data.address
              this.ruleForm.fzjg = data.issueOrgan
              this.ruleForm.avatar = 'data:image/png;base64,' + data.photoBase64
              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>