<script setup>
import { ElMessage } from 'element-plus'
import { getSteps, updateStep } from '../api'
import { useMarketStore } from '../stores/market'
import { useExperiment } from '../composables/useData'
const { experiment } = useExperiment()

const { setData } = useMarketStore()

const Step1 = defineAsyncComponent(() => import('../components/Step1.vue'))
const Step2 = defineAsyncComponent(() => import('../components/Step2.vue'))
const Step3 = defineAsyncComponent(() => import('../components/Step3.vue'))
const Step4 = defineAsyncComponent(() => import('../components/Step4.vue'))
const Step5 = defineAsyncComponent(() => import('../components/Step5.vue'))
const Step6 = defineAsyncComponent(() => import('../components/Step6.vue'))
const Step7 = defineAsyncComponent(() => import('../components/Step7.vue'))
const Step8 = defineAsyncComponent(() => import('../components/Step8.vue'))

const route = useRoute()

const step = route.query.step ? parseInt(route.query.step) : 1
const activeTab = ref(step)

const detail = reactive({ step1: {}, step2: {}, step3: {}, step4: {}, step5: {}, step6: {}, step7: {}, step8: {} })

async function fetchInfo() {
  const res = await getSteps()
  try {
    const details = res.data.detail.details
    Object.assign(detail, JSON.parse(details))
    setData(detail)
  } catch (error) {
    console.log(error)
  }
}
onMounted(() => {
  fetchInfo()
})

// 提交
async function handleSubmit(data) {
  Object.assign(detail, data.detail)
  await updateStep({ type: data.type, detail: JSON.stringify(detail) })
  ElMessage.success('保存成功')
}
// 下一步
async function handleNext(data, isCheck = false) {
  if (!isCheck) await handleSubmit(data)
  activeTab.value++
}
</script>

<template>
  <AppCard full class="market">
    <el-form label-suffix=":" inline class="info">
      <el-form-item label="实验名称">{{ experiment.name }}</el-form-item>
      <el-form-item label="课程名称">{{ experiment.course_name }}</el-form-item>
      <el-form-item label="指导教师">{{ experiment.teacher_name }}</el-form-item>
      <el-form-item label="实验学时">{{ experiment.length }}学时</el-form-item>
    </el-form>
    <el-divider />
    <el-tabs v-model="activeTab" stretch class="market-tabs">
      <el-tab-pane lazy label="第1步" :name="1">
        <Step1 @submit="handleSubmit" @next="handleNext"></Step1>
      </el-tab-pane>
      <el-tab-pane lazy label="第2步" :name="2">
        <Step2 @submit="handleSubmit" @next="handleNext"></Step2>
      </el-tab-pane>
      <el-tab-pane lazy label="第3步" :name="3">
        <Step3 @submit="handleSubmit" @next="handleNext"></Step3>
      </el-tab-pane>
      <el-tab-pane lazy label="第4步" :name="4">
        <Step4 @submit="handleSubmit" @next="handleNext"></Step4>
      </el-tab-pane>
      <el-tab-pane lazy label="第5步" :name="5">
        <Step5 @submit="handleSubmit" @next="handleNext"></Step5>
      </el-tab-pane>
      <el-tab-pane lazy label="第6步" :name="6"> </el-tab-pane>
      <el-tab-pane lazy label="第7步" :name="7">
        <Step7 @submit="handleSubmit" @next="handleNext"></Step7>
      </el-tab-pane>
      <el-tab-pane lazy label="第8步" :name="8"> </el-tab-pane>
    </el-tabs>
    <Step6 @submit="handleSubmit" @next="handleNext" v-if="activeTab == 6"></Step6>
    <Step8 @submit="handleSubmit" @next="handleNext" v-if="activeTab == 8"></Step8>
  </AppCard>
</template>

<style lang="scss">
.market {
  .info {
    display: flex;
    justify-content: space-between;
  }
}
.market-tabs {
  .el-tabs__header {
    margin: 0 auto;
    max-width: 1000px;
  }
  .el-tabs__nav-wrap::after {
    display: none;
  }
}
.market-step-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 0;
  gap: 100px;
  .el-button {
    width: 100px;
    margin: 0;
  }
}
</style>
