<script setup lang="ts">
import { updateQuestions, getQuestions } from '../api'
import { ElMessage } from 'element-plus'

const PreviewDialog = defineAsyncComponent(() => import('../components/Questions/PreviewDialog.vue'))
const QuestionsOrder = defineAsyncComponent(() => import('../components/Questions/QuestionsOrder.vue'))
const UserQuestion = defineAsyncComponent(() => import('../components/Questions/UserQuestion.vue'))
const TagQuestion = defineAsyncComponent(() => import('../components/Questions/TagQuestion.vue'))
const GroupQuestion = defineAsyncComponent(() => import('../components/Questions/GroupQuestion.vue'))
const MaterialQuestion = defineAsyncComponent(() => import('../components/Questions/MaterialQuestion.vue'))
const JourneyQuestion = defineAsyncComponent(() => import('../components/Questions/JourneyQuestion.vue'))

const route: any = useRoute()
const router = useRouter()

const getQuestionTypeInitValue = function () {
  const type: any = { 10: 101, 6: 201, 7: 301, 9: 401, 8: 501 }
  return type[parseInt(route.query?.type || '10')]
}

let data = $ref([
  {
    type: getQuestionTypeInitValue(),
    score: 1,
    title: '',
    content: '',
    answer_analysis: '',
    answer: '',
    files: []
  }
])

const addQuestion = () => {
  data.push({
    type: getQuestionTypeInitValue(),
    score: 1,
    title: '',
    content: '',
    answer_analysis: '',
    answer: '',
    files: []
  })
}

const previewDialogVisible = $ref(false)

const handleSubmit = function () {
  const type: any = { 10: '1', 6: '2', 7: '3', 9: '4', 8: '5' }
  console.log(data, 'data')
  const params = {
    experiment_id: route.query.id,
    module: type[route.query.type],
    questions: data
  }

  //判断必填不能为空
  function findItem(value: string) {
    return data.findIndex((item: any) => item[value] === '')
  }
  if (findItem('title') !== -1) {
    ElMessage.error(`第${findItem('title') + 1}题，题目不能为空`)
    return false
  }
  updateQuestions(params).then(res => {
    if (res.data.status) {
      ElMessage({ message: '保存成功', type: 'success' })
      router.go(0)
    }
  })
}

onMounted(() => {
  getCurrentQuestions()
})

// 获取题
const getCurrentQuestions = function () {
  const typesJson: any = {
    10: [101, 102],
    6: [201, 202],
    7: [301, 302],
    9: [401, 402, 403, 404, 405, 406, 407, 408],
    8: [501]
  }
  getQuestions({ experiment_id: route.query.id, types: typesJson[route.query.type] }).then(res => {
    if (res.data?.items) {
      if (res.data.items?.length) {
        data = res.data.items.reduce((a: any, b: any) => {
          b.type = parseInt(b.type)
          b.files.map((item: any) => {
            item.is_download === 'true' ? (item.is_download = true) : (item.is_download = false)
            return item
          })
          a.push(b)
          return a
        }, [])
      }
    }
  })
}
</script>

<template>
  <AppCard>
    <div class="content-top">
      <div class="info" style="display: flex">
        <p>实验名称： {{ route.query.name }}</p>
        <p>实验类型： {{ route.query.type_name }}</p>
        <p>实验总成绩：{{ route.query.score }}</p>
      </div>
      <el-button @click="previewDialogVisible = true">预览</el-button>
    </div>
  </AppCard>
  <div class="content-bottom">
    <AppCard class="l-card">
      <UserQuestion v-model="data" v-if="route.query.type === '10'"></UserQuestion>
      <TagQuestion v-model="data" v-if="route.query.type === '6'"></TagQuestion>
      <GroupQuestion v-model="data" v-if="route.query.type === '7'"></GroupQuestion>
      <MaterialQuestion v-model="data" v-if="route.query.type === '9'"></MaterialQuestion>
      <JourneyQuestion v-model="data" v-if="route.query.type === '8'"></JourneyQuestion>
      <div class="btn-box">
        <div class="btn-l">
          <el-button type="primary" @click="addQuestion"> 添加试题 </el-button>
          <!-- <el-button> 取消 </el-button> -->
        </div>
        <div class="btn-r">
          <el-button type="primary" @click="handleSubmit"> 保存 </el-button>
        </div>
      </div>
    </AppCard>
    <AppCard class="r-card">
      <QuestionsOrder :data="data"></QuestionsOrder>
    </AppCard>
  </div>
  <PreviewDialog v-model="previewDialogVisible"></PreviewDialog>
</template>
<style lang="scss" scoped>
.btn-box {
  display: flex;
  margin-bottom: 20px;
  .btn-r {
    margin-left: auto;
  }
}

.content-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .info {
    display: flex;
    p {
      margin-right: 100px;
    }
  }
}
.content-bottom {
  margin-top: 20px;
  display: flex;
  .r-card {
    position: sticky;
    top: 80px;
    margin-left: 20px;
    width: 30%;
    margin-top: 0;
    height: fit-content;
    :deep(.app-card-bd.has-background) {
      box-sizing: border-box;
    }
  }
  .l-card {
    margin-top: 0;
    flex: 1;
  }
}
</style>
