<template>

  <Dialog v-model="isVisible"    :title="'修改试卷任务'" width="1460"     >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="80px"
     
    >
      <div>
        <!-- 步骤条 -->
        <el-steps :active="activeStep" finish-status="success" align-center>
          <template v-for="(title, index) in stepTitles" :key="index">
            <el-step>
              <template #title>
                <div @click="handleStepClick(index)" style="cursor: pointer;">
                  {{ title }}
                </div>
              </template>
            </el-step>
          </template>
        </el-steps>

        <div style="margin-top: 30px;">
          <component
            :is="currentComponent"
            :form-data="props.data"
            :task-specialty="props.data.taskSpecialty"
            :task-id="props.data.taskId"
          />
        </div>
      </div>
    </el-form>

  


    <template #footer>

      <el-button @click="handleCancel">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { useFormData } from '@/utils/use-form-data'
import StepOne from './steps/step1/index.vue'
import StepTwo from './steps/step2/index.vue'
import StepThree from './steps/step3/index.vue'
import StepFour from './steps/step4/index.vue'
import StepFive from './steps/step5/index.vue'
import * as SmsChannelApi from '@/api/system/session';
// 模拟接口（你需要改成实际请求）
async function validateBeforeStepFour(taskId) {
  // 示例：替换为你实际的 API 请求
  const res = await SmsChannelApi.fetch(taskId)
console.log(res+"resres")
  if (res==='200') {
    return true
  } else {
    ElMessage.error(res || '无法进入考场设置步骤')
    return false
  }
}

const props = defineProps({
  data: Object
})
const isVisible = defineModel({ type: Boolean })

const isUpdate = ref(false)
const activeStep = ref(0)

const stepTitles = ['试卷方案', '试卷管理', '参数设置', '考场设置', '人员设置']
const stepComponents = [StepOne, StepTwo, StepThree, StepFour, StepFive]
const currentComponent = computed(() => stepComponents[activeStep.value])

const formRef = ref(null)
const [form, resetFields, assignFields] = useFormData({
  taskId: '',
  taskSpecialty: ''
})

async function handleStepClick(index) {
  // 点击第四步（index=3）时先校验
  if (index === 3) {
    const pass = await validateBeforeStepFour(props.data.taskId)
    if (!pass) return
  }
  activeStep.value = index
}

/** 打开弹窗 */
const open = async (type, row) => {
  isVisible.value = true
  assignFields(row)
  isUpdate.value = true
  activeStep.value = 0

  nextTick(() => {
    formRef.value?.clearValidate?.()
  })
}
defineExpose({ open })

const handleCancel = () => {
  isVisible.value = false
}
</script>

<style scoped>
/* 可选：让步骤标题更像按钮 */
.el-step__title:hover {
  color: #409eff;
}
</style>
