<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-08-16 16:40:38
-->
<template>
  <dialogBox title="申请人信息" width="60%" isMain v-model="myValue" :isFullscreen="false" @submitForm="submitForm"
    @closeDialog="closeDialog" :isButton="showButton">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="权利人类型" prop="sqrlx">
            <el-select clearable v-model="ruleForm.sqrlx" 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="sqrmc">
            <el-input v-model="ruleForm.sqrmc" 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" 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="15" 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="份数" prop="fs">
            <el-input v-model="ruleForm.fs" :disabled="!showButton" maxlength="8" 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="frmc">
            <el-input v-model="ruleForm.frmc" :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" :disabled="!showButton"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="户籍所在省市" prop="hjszss">
            <el-input v-model="ruleForm.hjszss" :disabled="!showButton"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="地址" prop="txdz">
            <el-input v-model="ruleForm.txdz" :disabled="!showButton"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮编" prop="yb">
            <el-input v-model="ruleForm.yb" :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" :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"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="权利比例" prop="qlbl">
            <el-input v-model="ruleForm.qlbl" :disabled="!showButton"></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" :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" :disabled="!showButton"></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-col :span="8">
          <el-form-item label="代理人姓名" prop="dlrmc">
            <el-input v-model="ruleForm.dlrmc" :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-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="性别" prop="xb">
            <el-select clearable v-model="ruleForm.xb" 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="代理人证件号" prop="dlrzjh">
            <el-input v-model="ruleForm.dlrzjh" maxlength="20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </dialogBox>
</template>
<script>
  import { mapGetters } from "vuex";
  export default {
    props: {
      value: { type: Boolean, default: false },
      details: { type: Object, default: {} },
      showButton: { type: Boolean, default: false }
    },
    computed: {
      ...mapGetters(["dictData"]),
    },
    data () {
      return {
        myValue: this.value,
        ruleForm: {
          sqrlx: "",
          sqrmc: "",
          zjzl: "",
          zjh: "",
          dh: "",
          xb: "",
          fs: "",
          frmc: "",
          gj: "",
          hjszss: "",
          txdz: "",
          yb: "",
          fzjg: "",
          dzyj: "",
          qlbl: "",
          gzdw: "",
          dlrjg: "",
          dlrmc: "",
          dlrzjlx: "",
          dlrzjh: "",
          dlrdh: "",
        },
        rules: {
          sqrlx: [{ required: true, message: "权利人类型", trigger: "change" }],
          sqrmc: [{ required: true, message: "姓名/名称", trigger: "blur" }],
          zjzl: [{ required: true, message: "证件种类", trigger: "change" }],
          zjh: [{ required: true, message: "证件号", trigger: "blur" }],
        }
      }
    },
    watch: {
      value (val) {
        this.myValue = _.cloneDeep(val);
      },
      details: {
        handler: function (val, oldVal) {
          this.ruleForm = val;
        },
        deep: true,
      },
    },
    methods: {
      /**
       * @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));
            this.$refs['ruleForm'].resetFields();
          } 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;
  }
</style>