<script setup lang="ts">
import { createTemplatePromise } from '@vueuse/core'
import { DictCode, useDict } from '@/composables/useDict'

// 问题卷数据接口
interface ProblemSheetData {
  problemType: string
  problemRemark: string
}

// 创建模板Promise组件
const ProblemPromise = createTemplatePromise<ProblemSheetData>()

// 字典数据
const { getDictOptionsComputed } = useDict()
const { options: problemTypeOptions } = getDictOptionsComputed(DictCode.PROBLEM_TYPE)

// 控制弹窗显示
const showDialog = ref(false)

// 表单数据
const formData = reactive<ProblemSheetData>({
  problemType: '',
  problemRemark: '',
})

// 表单验证规则
const formRules = {
  problemType: [{ required: true, message: '请选择问题卷类型' }],
}

// 表单引用
const formRef = ref()

// 重置表单
function resetForm() {
  formData.problemType = ''
  formData.problemRemark = ''
  nextTick(() => {
    formRef.value?.clearValidate()
  })
}

// 处理确认
async function handleConfirm(resolve: (value: ProblemSheetData) => void) {
  if (!formRef.value)
    return

  try {
    await formRef.value.validate()
    resolve({
      problemType: formData.problemType,
      problemRemark: formData.problemRemark,
    })
    // 重置表单
    resetForm()
  }
  catch (error) {
    console.warn('表单验证失败:', error)
  }
}

// 处理取消
function handleCancel(reject: (reason?: any) => void) {
  resetForm()
  reject('cancel')
}

function syncFormData(data: ProblemSheetData) {
  formData.problemType = data.problemType
  formData.problemRemark = data.problemRemark
}

// 暴露启动方法
function start() {
  showDialog.value = true
  return ProblemPromise.start()
}

defineExpose({
  start,
  syncFormData,
})
</script>

<template>
  <ProblemPromise v-slot="{ resolve, reject }">
    <wd-popup
      v-model="showDialog"
      position="center"
      :close-on-click-modal="false"
    >
      <view class="max-h-500px w-400px overflow-hidden rounded-lg bg-white">
        <!-- 弹窗标题 -->
        <view class="flex items-center justify-between border-b p-20px">
          <text class="text-18px text-gray-800 font-semibold">标记问题卷</text>
          <view
            class="size-24px flex cursor-pointer items-center justify-center rounded transition-colors hover:bg-gray-100"
            @click="handleCancel(reject)"
          >
            <wd-icon name="close" class="size-16px text-gray-500" />
          </view>
        </view>

        <!-- 内容区域 -->
        <view class="max-h-300px overflow-y-auto p-20px">
          <wd-form
            ref="formRef"
            :model="formData"
            :rules="formRules"
            class="mb-0"
          >
            <wd-cell-group border>
              <wd-picker
                v-if="problemTypeOptions.length > 0"
                v-model="formData.problemType"
                label="问题卷类型"
                label-width="100px"
                placeholder="请选择问题卷类型"
                :columns="problemTypeOptions"
                root-portal
              />
              <wd-input
                v-model="formData.problemRemark"
                label="附加信息"
                label-width="100px"
                placeholder="请输入附加信息"
              />
            </wd-cell-group>
            <view class="mt-16px flex items-center rounded-6px bg-gray-50 p-12px text-14px text-gray-600">
              <wd-icon name="info" class="mr-8px text-blue-500" />
              温馨提示：问题卷将由考试管理员、学科负责人或联考管理员录入分数
            </view>
          </wd-form>
        </view>

        <!-- 底部按钮 -->
        <view class="bg-gray-25 flex justify-end gap-12px border-t p-16px">
          <wd-button variant="outline" @click="handleCancel(reject)">
            取消
          </wd-button>
          <wd-button type="primary" @click="handleConfirm(resolve)">
            确认
          </wd-button>
        </view>
      </view>
    </wd-popup>
  </ProblemPromise>
</template>
