<template>
  <div v-if="show">
    <el-dialog
      v-model="show" title="完善信息" :close-on-click-modal="true" width="600"
      align-center style="padding-right: 60px" @close="close"
    >
      <el-form ref="infoRef" label-width="120px" :model="form" :rules="rules">
        <el-form-item v-if="type=='newName'" style="width: 100%;" label="姓名" prop="newName">
          <el-input v-model="form.newName" placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="type=='newSex'" label="性别" prop="newSex">
          <el-select v-model="form.newSex" placeholder="请选择" style="width: 100%;">
            <el-option label="男" value="0" />
            <el-option label="女" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="type=='newIdcType'" label="证件类型" prop="newIdcType">
          <el-select v-model="form.newIdcType" placeholder="请选择" style="width: 100%;">
            <el-option v-for="item in idcTypeList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="type=='idcCode'" label="证件号码" prop="idcCode">
          <el-input v-model="form.idcCode" placeholder="请输入合并人员证件号" style="width: 100%;" />
        </el-form-item>
        <el-form-item v-if="type=='newBirth'" label="出生日期" prop="newBirth">
          <el-date-picker
            v-model="form.newBirth"
            clearable
            type="date"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择出生日期"
            style="width: 100%;"
          />
        </el-form-item>
        <el-form-item v-if="type=='newBeginTime'" label="开始日期" prop="newBeginTime">
          <el-date-picker
            v-model="form.newBeginTime"
            clearable
            type="date"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择开始日期"
            style="width: 100%;"
          />
        </el-form-item>
        <el-form-item v-if="type=='newValiDate'" label="有效日期" prop="newValiDate">
          <el-date-picker
            v-model="form.newValiDate"
            clearable
            type="date"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择有效日期"
            style="width: 100%;"
          />
        </el-form-item>
        <el-form-item v-if="type=='fileUrl'" label="附件" prop="fileUrl">
          <!--          <ImageUpload2 v-model="form.fileUrl" :limit="1" />-->
          <FileUpload
            v-model="form.fileUrl" :file-type="['pdf','png','jpg','jpeg','gif']" :limit="1" :file-size="10"
          />
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button type="primary" :loading="buttonLoading" @click="submitForm">保存</el-button>
        <el-button @click="close">取消</el-button>
      </div>

    </el-dialog>
  </div>
  
</template>

<script setup>
import { ref, toRefs, reactive, watch } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'
import { editMod } from '@/api/member/dataAlteration/memberInfo.js'
import { editMergeByFile, editMergeByOldIdc } from '@/api/member/mergeInfo'
const buttonLoading = ref(false)
const { proxy } = getCurrentInstance()
const type = ref()
const show = ref(false)
const emit = defineEmits('lastStep')

const pattern = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/

const data = reactive({
  rules: {
    newName: { required: true, message: '请输入姓名', trigger: 'blur' },
    newSex: { required: true, message: '请选择性别', trigger: 'blur' },
    newIdcType: [
      { required: true, message: '请选择证件类型', trigger: 'blur' },
      { required: true, validator: validateCode, trigger: 'blur' }
    ],
    idcCode: [
      { required: true, validator: validateCode, trigger: 'blur' },
      { required: true, message: '请输入证件号', trigger: 'blur' }
    ],
    newBirth: { required: true, message: '请选择出生日期', trigger: 'blur' },
    newBeginTime: { required: true, message: '请选择开始日期', trigger: 'blur' },
    fileUrl: { required: true, message: '请上传附件', trigger: 'blur' },
    newValiDate: { required: true, message: '请选择开始日期', trigger: 'blur' }
  },
  form: {}
})
const { rules, form } = toRefs(data)

function open(row, val) {
  form.value = JSON.parse(JSON.stringify(row))
  type.value = val
  show.value = true
}

function close() {
  show.value = false
  form.value = {}
  emit('lastStep')
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs['infoRef'].validate(async valid => {
    if (valid) {
      buttonLoading.value = false
      let res = null
      if (type.value == 'idcCode') {
        res = await editMergeByOldIdc({
          mergeId: form.value.id,
          idcCode: form.value.idcCode
        })
      }
      if (type.value == 'fileUrl') {
        res = await editMergeByFile({
          mergeId: form.value.id,
          fileUrl: form.value.fileUrl ? JSON.stringify(form.value.fileUrl) : null
        })
      }
      if (res.code == 200) {
        proxy.$modal.msgSuccess('操作成功！')
        close()
      }
      buttonLoading.value = false
    } else {
      proxy.$modal.msgError('请完善信息')
    }
  })
}

function validateCode(rule, value, callback) {
  if (form.value.newIdcType == 0) {
    if (pattern.test(form.value.newIdcCode)) {
      return callback()
    } else {
      callback(new Error('请输入正确证件号'))
    }
  } else {
    return callback()
  }
}

watch(() => form.value.newIdcCode, (newValue, oldValue) => {
  if (newValue) {
    form.value.newIdcCode = form.value.newIdcCode?.replaceAll('x', 'X')
  }
})

defineExpose({
  open
})
</script>

<style scoped lang="scss">
.box{
  padding: 50px;
}
.tdFlex {
  display: flex;
}

  
</style>