<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="qlrlx">
            <el-select clearable v-model="ruleForm.qlrlx" class="width100" 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="xm">
            <el-input v-model="ruleForm.xm" maxlegth="15"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件种类" prop="zjzl">
            <el-select clearable v-model="ruleForm.zjzl" 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" maxlength="15"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="lxdh" :rules="$rules.common.phone">
            <el-input v-model="ruleForm.lxdh" maxlength="11"></el-input>
          </el-form-item>
        </el-col>
        <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-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="法人名称" prop="frmc">
            <el-input v-model="ruleForm.frmc"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="国家/地区" prop="gjdq">
            <el-input v-model="ruleForm.gjdq"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="户籍所在省市" prop="szss">
            <el-input v-model="ruleForm.szss"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="16">
          <el-form-item label="地址" prop="dz">
            <el-input v-model="ruleForm.dz"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮编" prop="yb">
            <el-input v-model="ruleForm.yb"></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"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="电子邮件" prop="dzyj">
            <el-input v-model="ruleForm.dzyj"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="权利比例" prop="qlbl">
            <el-input v-model="ruleForm.qlbl"></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"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="代理机构" prop="dljg">
            <el-input v-model="ruleForm.dljg"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="lxdh" :rules="$rules.common.phone">
            <el-input v-model="ruleForm.lxdh" maxlength="11"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="代理人姓名" prop="dlrxm">
            <el-input v-model="ruleForm.dlrxm"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="代理人证件类型" prop="dlrzjlx">
            <el-select clearable v-model="ruleForm.dlrzjlx" 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="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 },
  },
  computed: {
    ...mapGetters(["dictData"]),
  },
  data () {
    return {
      myValue: this.value,
      ruleForm: {
        qlrlx: '',
        xm: '',
        zjzl: '',
        zjh: '',
        lxdh: '',
        xb: '',
        frmc: '',
        gjdq: '',
        szss: '',
        dz: '',
        yb: '',
        fzjg: '',
        dzyj: '',
        qlbl: '',
        gzdw: '',
        dljg: '',
        dlrxm: '',
        dlrzjlx: '',
        dlrzjh: ''
      },
      rules: {
        qlrlx: [
          { required: true, message: '权利人类型', trigger: 'change' }
        ],
        xm: [
          { required: true, message: '姓名/名称', trigger: 'blur' }
        ],
        zjzl: [
          { required: true, message: '证件种类', trigger: 'chagyfsnge' }
        ],
        zjh: [
          { required: true, message: '证件号', trigger: 'blur' }
        ],
        xb: [
          { required: true, message: '性别', trigger: 'change' }
        ],
        frmc: [
          { required: true, message: '法人名称', trigger: 'blur' }
        ],
        gjdq: [
          { required: true, message: '国家/地区', trigger: 'blur' }
        ],
        szss: [
          { required: true, message: '户籍所在省市', trigger: 'blur' }
        ],
        dz: [
          { required: true, message: '地址', trigger: 'blur' }
        ],
        yb: [
          { required: true, message: '邮编', trigger: 'blur' }
        ],
        fzjg: [
          { required: true, message: '发证机关', trigger: 'blur' }
        ],
        dzyj: [
          { required: true, message: '电子邮件', trigger: 'blur' }
        ],
        qlbl: [
          { required: true, message: '权利比例', trigger: 'blur' }
        ],
        gzdw: [
          { required: true, message: '工作单位', trigger: 'blur' }
        ],
        dljg: [
          { required: true, message: '代理机构', trigger: 'blur' }
        ],
        dlrxm: [
          { required: true, message: '代理人姓名', trigger: 'blur' }
        ],
        dlrzjlx: [
          { required: true, message: '代理人证件类型', trigger: 'change' }
        ],
        dlrzjh: [
          { required: true, message: '代理人证件号', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    value (val) {
      this.myValue = val;
    },
  },
  methods: {
    closeDialog () {
      this.$emit("input", false);
      this.$refs['ruleForm'].resetFields();
    },
    submitForm () {
      this.$refs['ruleForm.'].validate((valid) => {
        if (valid) {
          this.$emit("input", false);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.submit-button {
  text-align: center;
  height: 52px;
  padding-top: 10px;
  background-color: #fff;
}
</style>