<!--单列-->
<template>
  <el-dialog v-model='dialogVisible' :title='title' v-bind='dialogSmall'>
    <el-scrollbar>
      <el-form
          :model='form'
          :inline='false'
          label-width='auto'
          ref='formRuleRef'
          :rules='rules'
      >
        <el-form-item label='姓名' prop='username'>
          <el-input
              v-model='form.username'
              placeholder='请输入姓名'
          ></el-input>
        </el-form-item>

        <el-form-item label='性别' prop='gender'>
          <el-radio-group v-model='form.gender'>
            <el-radio-button :label='0'>男</el-radio-button>
            <el-radio-button :label='1'>女</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item label='年龄' prop='age'>
          <el-input
              v-model='form.age'
              placeholder='年龄'
          ></el-input>
        </el-form-item>

        <el-form-item label='身份证号' prop='idCard'>
          <el-input
              v-model='form.idCard'
              placeholder='身份证号'
          ></el-input>
        </el-form-item>

        <el-form-item label='邮箱' prop='email'>
          <el-input
              v-model='form.email'
              placeholder='邮箱'
          ></el-input>
        </el-form-item>

        <el-form-item label='居住地址' prop='address'>
          <el-input
              v-model='form.address'
              placeholder='居住地址'
          ></el-input>
        </el-form-item>

      </el-form>
    </el-scrollbar>

    <template #footer>
      <div class='dialog-footer'>
        <el-button @click='close()'>取消</el-button>
        <el-button type='primary' @click='confirmForm()'>确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang='ts'>
import { dialogSmall } from '@/utils/elementBind'
import { FormInstance, FormItemRule } from 'element-plus'

interface userForm {
  id?: string;       //用户ID，作为唯一标识
  username: string; //用户名
  gender: number; // 性别
  age: number; // 年龄
  idCard: string; // 身份证
  email: string; // 邮箱
  address?: string; // 地址
}

const form: Ref<userForm> = ref({
  username: '',
  gender: 0,
  age: 1,
  idCard: '',
  email: '',
})

const formRuleRef = ref<FormInstance>()
//定义校验规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
  username: [{ required: true, message: '用户名必填！', trigger: 'blur' }],
  age: [
    { required: true, message: '年龄必填！', trigger: 'blur' },
    // 指定正则，此处是数字正则
    { pattern: /^[1-9][0-9]?$|^100$/, message: '年龄必须在1到100之间', trigger: 'blur' },
  ],
  idCard: [
    { required: true, message: '身份证必填！', trigger: 'blur' },
    // 指定正则，此处是身份证正则
    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号码', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '邮箱必填！', trigger: 'blur' },
    // 指定校验类型
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
  ],
})

/**
 * 重置表单
 */
const resetForm = () => {
  form.value = {
    username: '',
    gender: 0,
    age: 1,
    idCard: '',
    email: '',
    address: '',
  }
}

const dialogVisible = ref(false)
const title = ref('单列弹出框')
const open = (textTitle: string) => {
  dialogVisible.value = true
  title.value = textTitle
}

// 关闭弹出框
const close = () => {
  //重置表单内容
  //取消表单校验状态
  formRuleRef.value && formRuleRef.value.resetFields()
  dialogVisible.value = false
  resetForm()
}

/**
 * 校验表单数据
 * 数据没问题，提交数据，并根据业务情况请求新增接口还是修改接口
 */
const confirmForm = () => {
  ElMessage.info('业务数据提交')
  try {
    formRuleRef.value?.validate((valid: boolean) => {
      if (valid) {
        // 将表单数据转为json,发送到后端
        let confirmFormData = JSON.parse(JSON.stringify(form.value))

        if ('是否新增') {
          // 执行新增接口
        } else {
          // 执行修改接口
        }
      } else {
        ElMessage.error('表单验证失败！')
      }
    })
  } catch (error) {
    console.error('验证过程中发生错误', error)
  }
}

defineExpose({ open })

</script>
<style>

</style>