<template>
  <div>
    <el-dialog :title="diglogType" :visible="true" width="800px" append-to-body :close-on-click-modal="false"
               @close="handleClose">
      <div class="dialog-content dialog-office-batch">
        <div class="p-16 pr-40" v-if="diglogType === '被申请人'">
          <el-form ref="ruleFormRespondent"
                   :model="respondentObj"
                   :rules="rulesRespondent"
                   label-width="120px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="姓名:" prop="name">
                  <el-input
                      v-model.trim="respondentObj.name"
                      placeholder="请输入" maxlength="20"
                      clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="与债务人关系:" prop="type">
                  <el-select v-model="respondentObj.type" placeholder="请选择" class="width100">
                    <el-option
                        v-for="(item,index) in relationOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电话:" prop="phone">
                  <el-input
                      v-model.trim="respondentObj.phone"
                      placeholder="请输入"
                      :maxlength="11"
                      clearable
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="p-16 pr-40" v-else>
          <el-form ref="ruleFormAgent"
                   :model="agentObj"
                   :rules="rulesRespondent"
                   label-width="110px">
            <el-row :gutter="20">
<!--              <el-col :span="12">-->
<!--                <el-form-item label="代理权限:" prop="authority">-->
<!--                  <el-select v-model="agentObj.authority" placeholder="请选择" class="width100">-->
<!--                    <el-option-->
<!--                        v-for="(item,index) in authorityOptions"-->
<!--                        :key="index"-->
<!--                        :label="item.label"-->
<!--                        :value="item.value">-->
<!--                    </el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
              <el-col :span="12">
                <el-form-item label="姓名:" prop="name">
                  <el-input
                      v-model.trim="agentObj.name"
                      placeholder="请输入" maxlength="20"
                      clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证号:" prop="cardNo">
                  <el-input
                      v-model.trim="agentObj.cardNo"
                      placeholder="请输入"
                      :maxlength="18"
                      clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电话:" prop="phone">
                  <el-input
                      v-model.trim="agentObj.phone"
                      placeholder="请输入"
                      :maxlength="11"
                      clearable
                  ></el-input>
                </el-form-item>
              </el-col>
<!--              <el-col :span="12">-->
<!--                <el-form-item label="单位电话:" prop="workPhone">-->
<!--                  <el-input-->
<!--                      v-model.trim="agentObj.workPhone"-->
<!--                      placeholder="请输入" maxlength="11"-->
<!--                      clearable-->
<!--                  ></el-input>-->
<!--                </el-form-item>-->
<!--              </el-col>-->
              <el-col :span="12">
                <el-form-item label="邮箱:" prop="mail">
                  <el-input
                      v-model.trim="agentObj.mail"
                      placeholder="请输入"
                      clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地址:" prop="addr">
                  <el-input
                      v-model.trim="agentObj.addr"
                      placeholder="请输入"
                      clearable
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="代理人类型:" prop="type">
                  <el-select v-model="agentObj.type" placeholder="请选择" class="width100">
                    <el-option
                        v-for="(item,index) in agentTypeOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose()">取消</el-button>
          <el-button type="primary" @click="handleSubmit()">完成</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import contactPerson from "@/services/contactPerson";
export default {
  props: {
    eventDialog: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      diglogType: '',
      relationOptions: [
        {label: '本人', value: '本人'},
        {label: '父母', value: '父母'},
        {label: '配偶', value: '配偶'},
        {label: '子女', value: '子女'},
        {label: '其他', value: '其他'},
        {label: '朋友', value: '朋友'},
        {label: '兄弟', value: '兄弟'},
        {label: '同事', value: '同事'},
        {label: '同学', value: '同学'}
      ],
      respondentObj: {
        caseId: '',
        name: '',
        type: '',
        phone: '',
      },

      // authorityOptions: [
      //   {label: '一般代理', value: 1}
      // ],
      agentTypeOptions: [
        {label: '执业律师', value: '执业律师'},
        {label: '基层法律服务工作者', value: '基层法律服务工作者'},
        {label: '当事人的近亲属或工作人员', value: '当事人的近亲属或工作人员'},
        {label: '当事人所在社区，单位以及有关社会团体推荐的公民', value: '当事人所在社区，单位以及有关社会团体推荐的公民'},
        {label: '经赔委员会许可的其他公民', value: '经赔委员会许可的其他公民'}
      ],
      agentObj: {
        caseId: '',
        // authority: '',
        name: '',
        cardNo: '',
        phone: '',
        // workPhone: '',
        mail: '',
        addr: '',
        type: '',
      },
      rulesRespondent: {
        name: [
          {required: true, message: '请输入', trigger: ['blur', 'change'],},
        ],
        type: [
          {required: true, message: '请选择', trigger: 'change',},
        ],
        phone: [
          { required: true, message: '请输入', trigger: 'change',},
          { pattern: /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})|(19[0-9]{9})$/, message: '请输入正确的手机号码', trigger: ['blur', 'change']}
        ],

        // authority: [
        //   {required: true, message: '请选择', trigger: 'change',},
        // ],
        cardNo: [
          { required: true, message: '请输入', trigger: 'change',},
          { pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/, message: '请输入正确的身份证号', trigger: ['blur', 'change']}
        ],
        mail: [
          { required: false, message: '请输入邮箱地址', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确邮箱地址', trigger: ['blur', 'change']}
        ],
      },
    };
  },
  mounted() {
    // console.log(1231)
    this.initDetails();
  },
  methods: {
    initDetails() {
      const { personnelType: diglogType, personId, rowData } = this.eventDialog || {};
      this.diglogType = diglogType;
      if (!personId) return;
      const targetObj = diglogType === '被申请人' ? this.respondentObj :
          diglogType === '申请人代理人' ? this.agentObj : null;
      if (targetObj && rowData) {
        Object.keys(targetObj).forEach(key => {
          if (rowData.hasOwnProperty(key)) {
            targetObj[key] = rowData[key];
          }
        });
      }
    },
    handleClose() {
      this.$emit('update:eventDialog', null)
    },
    handleSubmit() {
      if(!this.$clickThrottle()) { return }//防止重复点击
      const handleFormSubmit = (formRef, obj, addFunc, updateFunc) => {
        this.$refs[formRef].validate((valid) => {
          if (valid) {
            obj.caseId = this.eventDialog.caseId;
            const params = { ...obj, id: this.eventDialog.personId };
            const requestFunc = this.eventDialog.personId ? updateFunc : addFunc;

            requestFunc(params).then(() => {
              this.$parent.getList();
              this.handleClose();
              this.$message.success("操作成功");
            });
          }
        });
      };
      const dialogTypeToHandler = {
        '被申请人': () => handleFormSubmit('ruleFormRespondent', this.respondentObj, contactPerson.debtorAdd, contactPerson.contactPersonUpdate),
        '申请人代理人': () => handleFormSubmit('ruleFormAgent', this.agentObj, contactPerson.agentAdd, contactPerson.contactPersonUpdate)
      };
      // 根据 diglogType 调用对应的处理函数
      const handler = dialogTypeToHandler[this.diglogType];
      if (handler) {
        handler();
      }
    }
  }
};
</script>

<style scoped lang="scss">

</style>