<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-11-07 08:46:12
-->
<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
    <el-row>
      <el-col :span="8">
        <el-form-item label="发证人姓名">
          <el-input v-model="ruleForm.fzrmc" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="发证时间">
          <el-input v-model="ruleForm.fzsj" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="发证数量">
          <el-input v-model="ruleForm.fzsl" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <lb-table :column="tableData.columns" @row-dblclick="handleRowClick" ref="table" @selection-change="handleSelectionChange"
      :data="tableData.data"
      :pagination="false"
      :calcHeight="300">
    </lb-table>
    <el-row>
      <el-col :span="3">
        <el-form-item label="身份证读卡器">
          <el-button type="text" icon="el-icon-tickets" @click="readClick">读取</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="领证人" prop="lzrxm" label-width="70px">
          <el-input v-model="ruleForm.lzrxm"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="证件类型" prop="lzrzjlb" label-width="80px">
          <el-select v-model="ruleForm.lzrzjlb" filterable clearable placeholder="请选择">
            <el-option v-for="item in lzrzjlbData" :key="item.dcode" :label="item.dname" :value="item.dcode">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="证件号" prop="lzrzjh" label-width="70px">
          <el-input v-model="ruleForm.lzrzjh"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="领证人电话" prop="lzrdh">
          <el-input v-model="ruleForm.lzrdh"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item class="text-center">
      <el-button @click="$popupCacel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  const checkPhone = (rule, value, callback) => {
    let regPone = null
    let mobile = /^(1[3456789]\d{9})$/  //手机号
    let tel = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/ // 座机
    if (value && value[0] === '0') {// 检查 value 是否存在并且不是 null 或者 undefined
      regPone = tel
    } else if (value && value[0] !== '0') {
      regPone = mobile
    }
    if (regPone === null) {
      return callback(
        new Error('请输入电话')
      )
    } else if (!regPone.test(value)) {
      return callback(
        new Error("请输入正确的电话格式,其中座机格式'区号-座机号码'")
      )
    } else {
      callback()
    }
  };
  import Vue from 'vue'
  import store from '@/store/index.js'
  import table from "@/utils/mixin/table";
  import { getIdCardInfo } from '@/utils/operation.js'
  import { getUnclaimedBdcqz, issueCertificate, getBdcqzQlr } from "@/api/bdcqz.js";
  import { datas } from "../../javascript/fzxxdata";
  export default {
    props: {
      formData: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    mixins: [table],
    data () {
      return {
        lzrzjlbData: store.getters.dictData['A30'],
        ruleForm: {
          fzrmc: '',
          fzsj: '',
          fzsl: '',
          bdcqzList: [],
          lzrxm: '',
          lzrzjlb: '',
          lzrzjh: '',
          lzrdh: ''
        },
        rules: {
          lzrxm: [
            { required: true, message: '请输入领证人', trigger: 'blur' }
          ],
          lzrzjlb: [
            { required: true, message: '请选择证件类型', trigger: 'change' }
          ],
          lzrzjh: [
            { required: true, message: '请输入证件号', trigger: 'blur' }
          ],
          lzrdh: [
            { required: true, validator: checkPhone, trigger: ["blur"] }
          ]
        },
        tableData: {
          total: 0,
          columns: datas.columns().lzgrid,
          data: []
        }
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.loadGrid()
      })
    },
    methods: {
      /**
       * @description: 身份证打卡器
       * @author: renchao
       */
      readClick () {
        getIdCardInfo().then(res => {
          if (res.data.code == 0) {
            let data = res.data.IDCardInfo
            this.ruleForm.lzrxm = data.name
            this.ruleForm.lzrzjlb = '1'
            this.ruleForm.lzrzjh = data.cardID
            this.$message({
              message: '读取成功！',
              type: 'success'
            })
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        })
      },
      /**
       * @description: 列表初始化
       * @author: renchao
       */
      loadGrid () {
        let that = this
        getUnclaimedBdcqz({ bsmSlsq: Vue.prototype.$currentRoute.query.bsmSlsq }).then(res => {
          if (res.code === 200) {
            this.tableData.data = res.result.list;
            this.$nextTick(() => {
              this.tableData.data.forEach(item => {
                that.$refs.table.toggleRowSelection(item)
              })
            })
            this.ruleForm.fzrmc = res.result.fzrmc
            this.ruleForm.fzsj = res.result.fzsj
            this.ruleForm.fzsl = res.result.fzsl
            this.ruleForm.bdcqzList = res.result.list;
            res.result.list.length && this.getQlr(res.result.list[0].bsmBdcqz)
          }
        })
      },
      /**
       * @description: 获取权利人信息
       * @author: renchao
       */
      getQlr (bsmBdcqz) {
        getBdcqzQlr(bsmBdcqz).then(res => {
          if (res.code === 200) {
            this.ruleForm.lzrxm = res.result.qlrmc;
            this.ruleForm.lzrzjlb = res.result.zjzl;
            this.ruleForm.lzrzjh = res.result.zjh;
            this.ruleForm.lzrdh = res.result.dh;
          }
        })
      },
      /**
       * @description: handleSelectionChange
       * @param {*} val
       * @author: renchao
       */
      handleSelectionChange (val) {
        this.ruleForm.bdcqzList = val
      },
      /**
       * @description: handleRowClick
       * @param {*} row
       * @author: renchao
       */
      handleRowClick (row) {
        this.$refs.table.toggleRowSelection(row)
      },
      /**
       * @description: handleSubmit
       * @author: renchao
       */
      handleSubmit () {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            issueCertificate(this.ruleForm).then(res => {
              if (res.code == 200) {
                this.$message.success('保存成功');
                //刷新列表
                store.dispatch('user/reWorkFresh', true)
                this.$popupCacel()
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            return false;
          }
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
</style>