<!--
 * @Description: 添加家庭成员
 * @Autor: renchao
 * @LastEditTime: 2023-05-17 10:40:28
-->
<template>
  <dialogBox title="家庭成员信息" width="60%" isMain v-model="myValue" :isFullscreen="false" @submitForm="submitForm"
    @closeDialog="closeDialog">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="姓名/名称" prop="cyxm">
            <el-input v-model="ruleForm.cyxm" maxlegth="15"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="家庭关系" prop="jtgxdm">
            <el-select clearable v-model="ruleForm.jtgxdm" class="width100" placeholder="请选择">
              <el-option v-for="item in jtgx" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="承包方代码" prop="cbfdm">
            <el-input v-model="ruleForm.cbfdm" maxlegth="15"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="身份证号码" prop="zjh">
            <el-input v-model="ruleForm.sfzhm" 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" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别">
            <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-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="发证机关">
            <el-input v-model="ruleForm.fzjg"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属行业">
            <el-input v-model="ruleForm.sshy"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="国家/地区">
            <el-input v-model="ruleForm.gj"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="户籍所在省市">
            <el-input v-model="ruleForm.hjszss"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="地址">
            <el-input v-model="ruleForm.dz"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="邮编">
            <el-input v-model="ruleForm.yb"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="工作单位">
            <el-input v-model="ruleForm.gzdw"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="电子邮件">
            <el-input v-model="ruleForm.dzyj"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否共有人">
            <el-input v-model="ruleForm.gzdw"></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: {} }
    },
    computed: {
      ...mapGetters(["dictData"]),
    },
    data () {
      return {
        myValue: this.value,
        jtgx: [
          { value: '0', label: '本人或户主' },
          { value: '1', label: '配偶' },
          { value: '2', label: '子' },
          { value: '3', label: '女' },
          { value: '4', label: '子孙、孙女、外孙子、外孙女' },
          { value: '5', label: '父母' },
          { value: '6', label: '祖父母、外祖父母' },
          { value: '7', label: '兄、弟、姐、妹' },
          { value: '8', label: '其他' },
        ],
        ruleForm: {
          qlrlx: '',
          sqrmc: '',
          zjzl: '',
          zjh: '',
          dh: '',
          xb: '',
          frmc: '',
          gjdq: '',
          szss: '',
          dz: '',
          yb: '',
          fzjg: '',
          dzyj: '',
          qlbl: '',
          gzdw: '',
          dljg: '',
          dlrxm: '',
          dlrzjlx: '',
          dlrzjh: ''
        },
        rules: {
          qlrlx: [
            { 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: {
      closeDialog () {
        this.$emit("input", false);
        this.$refs['ruleForm'].resetFields();
      },
      submitForm () {
        this.$emit("input", false);
        this.$emit("updateDetail", _.cloneDeep(this.ruleForm));
        // this.$refs['ruleForm'].validate((valid) => {
        //   if (valid) {
        //     this.$message({
        //       message: '修改成功!',
        //       type: 'success'
        //     })

        //   } else {
        //     this.$message.error('请完善必填项');
        //   }
        // })
      }
    }
  }
</script>
<style scoped lang="scss">
  .submit-button {
    text-align: center;
    height: 52px;
    padding-top: 10px;
    background-color: #fff;
  }
</style>