<template>
  <el-dialog v-model="dialogVisible" title="实名认证" width="600px" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="110px" class="pa-20px">
      <el-form-item label="真实姓名" prop="trueName">
        <el-input v-model="form.trueName" placeholder="请输入真实姓名" />
      </el-form-item>

      <el-form-item label="身份证号" prop="idNo">
        <el-input v-model="form.idNo" placeholder="请输入身份证号" />
      </el-form-item>

      <el-form-item label="身份证照片" prop="files">
        <KlUploader
          v-model:file-list="form.files"
          list-type="picture-card"
          :limit="2"
          :size="1"
          tips="上传图片支持jpg/gif/png格式、正反两面、每张图片大小不得超过1M"
        >
          <div class="h-77px w-161px flex items-center justify-center border border-[#cdd0d6] rounded-1px border-dashed bg-[#fafafa]">
            <el-icon class="text-[#999999]"><Plus /></el-icon>
            <div class="ml-4px mt-2px text-14px text-[#999999] font-normal">上传照片</div>
          </div>
        </KlUploader>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { Plus } from '@element-plus/icons-vue'
  import type { FormInstance, FormRules } from 'element-plus'
  import { getUserAuthInfo, createUserAuthInfo, updateUserAuthInfo } from '@/api/personal-center/index.ts'
  import { UserAuthInfoRespVO } from '@/api/personal-center/types'

  const dialogVisible = ref(false)
  const formRef = ref<FormInstance>()

  const form = reactive<UserAuthInfoRespVO>({
    id: undefined,
    trueName: '',
    idNo: '',
    files: [],
  })

  const rules = reactive<FormRules>({
    trueName: [
      { required: true, message: '请输入真实姓名', trigger: 'blur' },
      { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
    ],
    idNo: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
    files: [{ required: true, message: '请上传身份证正面反面照片', trigger: 'change' }],
  })

  const handleSubmit = async () => {
    if (!formRef.value) return

    try {
      await formRef.value.validate()
      // TODO: 这里添加提交逻辑
      const res = form.id ? await updateUserAuthInfo(form) : await createUserAuthInfo(form)
      if (res.code === 0) {
        ElMessage.success('认证信息提交成功')
        dialogVisible.value = false
      }
    } catch (error) {
      console.error('表单验证失败：', error)
    }
  }

  const handleCancel = () => {
    dialogVisible.value = false
    formRef.value?.resetFields()
  }

  // 对外暴露方法
  const open = () => {
    dialogVisible.value = true
    getUserAuthInfo().then((res) => {
      form.id = res.data.id
      form.files = res.data.files.map((item: any) => {
        return {
          ...item,
          url: item.url,
          name: item.title,
          uid: item.id,
          status: 'success',
        }
      })
      form.trueName = res.data.trueName
      form.idNo = res.data.idNo
    })
  }

  defineExpose({
    open,
  })
</script>

<style scoped>
  .id-card-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .id-card-uploader:hover {
    border-color: #409eff;
  }

  .id-card-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
    line-height: 178px;
  }

  .id-card-image {
    width: 178px;
    height: 178px;
    display: block;
    object-fit: cover;
  }

  .upload-tip {
    font-size: 12px;
    color: #909399;
    margin-top: 8px;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
</style>
