<template>
  <dialogBox title="不动产权证领取" width="85%" @closeDialog="closeDialog" @submitForm="handleSubmit" v-model="value">
    <div class="zslq">
      <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" :heightNum="600">
        </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>
    </div>
  </dialogBox>
</template>

<script>
  import store from '@/store/index.js'
  import table from "@/utils/mixin/table";
  import { getUnclaimedBdcqz, issueCertificate } from "@/api/bdcqz.js";
  import { datas } from "../javascript/fzxxdata";
  export default {
    props: {
      value: { type: Boolean, default: true }
    },
    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: [],
        },
      }
    },
    watch: {
      value (val) {
        if (val) {
          this.loadGrid();
        }
      },
    },
    methods: {
      //列表初始化
      loadGrid () {
        getUnclaimedBdcqz({ bsmSlsq: this.$route.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;
          }
        });
      },
      closeDialog () {
        this.$emit("input", false);
      },
    }
  }
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
</style>