<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=='newIdcType'" label="证件类型" prop="newIdcType">-->
        <!--          <el-select v-model="form.newIdcType" placeholder="请选择" style="width: 100%;">-->
        <!--            <el-option v-for="item in cardType" :key="item.value" :hidden="item.value==2" :label="item.label" :value="item.value" />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item v-if="type=='newIdcCode'" label="证件号码" prop="newIdcCode">-->
        <!--          <el-input v-model="form.newIdcCode" 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 } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'
// import { editMod } from '@/api/member/dataAlteration/memberInfo.js'
import { editMod } from '@/api/groupMember/addAlteration'
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' },
    newIdcCode: [
      { 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
      const res = await editMod({
        id: form.value.id,
        newName: form.value.newName,
        fileUrl: JSON.stringify(form.value.fileUrl)
      })
      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(value)) {
      return callback()
    } else {
      callback(new Error('请输入正确证件号'))
    }
  } else {
    return callback()
  }
}

defineExpose({
  open
})
</script>

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

  
</style>