<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 border :column="tableData.columns" :data="tableData.data" :pagination="false" :calcHeight="300">
    </lb-table>
    <el-row>
      <el-col :span="6">
        <el-form-item label="领证人" prop="lzrxm">
          <el-input v-model="ruleForm.lzrxm"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="证件类型" prop="lzrzjlb">
          <el-select v-model="ruleForm.lzrzjlb" filterable clearable placeholder="请选择">
            <el-option v-for="item in zjzlData" :key="item.dcode" :label="item.dname" :value="item.dcode">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="证件号" prop="lzrzjh">
          <el-input v-model="ruleForm.lzrzjh"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <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>
  import Vue from 'vue'
  import store from '@/store/index.js'
  import table from "@/utils/mixin/table";
  import { getUnclaimedBdcqz, issueCertificate } from "@/api/bdcqz.js";
  import { datas } from "../javascript/fzxxdata";
  import { log } from 'bpmn-js-token-simulation';
  export default {
    props: {
      formData: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    mixins: [table],
    data () {
      return {
        zjzlData: 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, message: '请输入电话号码', trigger: 'blur' }
          ],
        },
        tableData: {
          total: 0,
          columns: datas.columns().lzgrid,
          data: [],
        },
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.loadGrid()
      })
    },
    methods: {
      //列表初始化
      loadGrid () {
        getUnclaimedBdcqz({ bsmSlsq: Vue.prototype.$currentRoute.query.bsmSlsq }).then(res => {
          if (res.code === 200) {
            this.tableData.data = res.result.list;
            this.ruleForm.fzrmc = res.result.fzrmc
            this.ruleForm.fzsj = res.result.fzsj
            this.ruleForm.fzsl = res.result.fzsl

          }
        })
      },
      handleSubmit () {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            issueCertificate(this.ruleForm).then(res => {
              if (res.code == 200) {
                this.$message.success('保存成功');
                this.$parent.queryClick();
                this.$emit("input", false);
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            this.$message.error("请填写领取人信息！")
            return false;
          }
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
</style>