<template>

  <Dialog v-model="isVisible"    :title="'修改试卷任务'" width="1460"     >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="80px"
     
    >
      <div>
        <div  style="margin-bottom: 16px; color: #666;">
        <el-text>当前任务 ID：<strong>{{ props.data.taskId }}</strong></el-text>
      </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 { useFormData } from '@/utils/use-form-data'
import { ref, computed, nextTick } from 'vue'
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'

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: ''
})

function handleStepClick(index) {
  activeStep.value = index
}

// function onOpen() {
//   console.log(props.data+"=======================")
//   activeStep.value = 0
//   if (props.data) {
//     assignFields(props.data)
//     isUpdate.value = true
//   } else {
//     resetFields()
//     isUpdate.value = false
//   }

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






/** 打开弹窗 */
const open = async (type, row) => {
  isVisible.value = true
  console.log(props.data+"=======================")
  assignFields(row)
  isUpdate.value = true

  activeStep.value = 0

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



const handleCancel = () => {
  console.log(isVisible.value+"isVisible.value")
  isVisible.value = false
}

</script>

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