<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-05-17 10:39:47
-->
<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="qlrlx">
            <el-select
              clearable
              v-model="ruleForm.qlrlx"
              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="qlrmc">
              <el-input
              v-model="ruleForm.qlrmc"
              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="18"
              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="权利比例">
            <el-input
              v-model="ruleForm.qlbl"
              maxlength="32"
              :disabled="!showButton || this.ruleForm.gyfs == 1"
            ></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"
              maxlength="32"
              :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"
              maxlength="3"
              :disabled="!showButton"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="户籍所在省市">
            <el-input
              v-model="ruleForm.hjszss"
              maxlength="3"
              :disabled="!showButton"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="地址">
            <el-input
              v-model="ruleForm.dz"
              maxlength="100"
              :disabled="!showButton"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

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

      <el-row>
        <el-col :span="8">
          <el-form-item label="代理人电话">
            <el-input
              v-model="ruleForm.dlrdhhm"
              :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="代理人姓名">
            <el-input
              v-model="ruleForm.dlrxm"
              maxlength="15"
              :disabled="!showButton"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="代理人证件类型">
            <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="性别">
            <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-col :span="8">
          <el-form-item label="代理人证件号">
            <el-input
              v-model="ruleForm.dlrzjh"
              :disabled="!showButton"
              maxlength="18"
            ></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: {
        bsmBdcqz: "",
        bsmQlr: "",
        bsmQlxx: "",
        bz: "",
        cbfbm: "",
        dh: "",
        dlrdhhm: "",
        dlrjgmc: "",
        dlrxm: "",
        dlrzjh: "",
        dlrzjlx: "",
        dz: "",
        dzyj: "",
        fbfbm: "",
        frdh: "",
        frmc: "",
        fzjg: "",
        gj: "",
        gzdw: "",
        hjszss: "",
        qlrlx: "",
        qlrmc: "",
        qlrtz: "",
        sfczr: "",
        sshy: "",
        sxh: 0,
        xb: "",
        yb: "",
        zjh: "",
        zjzl: "",
      },
      rules: {
        qlrlx: [{ required: true, message: "权利人类型", trigger: "change" }],
        qlrmc: [{ 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));
        } 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>