<script setup>
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 EventQuestion = defineAsyncComponent(() => import('../components/Questions/EventQuestion.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 = useRoute()

/*
101实验用户数据题 102实验事件数据题
201实验标签类型题 202实验标签题
301实验静态群组题 302动态群组题
401实验营销文本资料题 402验营销图片资料题 403验营销语音资料题 404验营销视频资料题 405验营销H5资料题 406验营销二维码资料题 407验营销小程序资料题 408验营销卡券资料题
501用户旅程题
601实验报告题
 */
const types = computed(() => {
  const typesJson = {
    6: [201, 202],
    7: [301, 302],
    8: [501],
    9: [401, 402, 403, 404, 405, 406, 407, 408],
    10: [101, 102],
    11: [101],
    12: [102],
  }
  return typesJson[route.query.type] || route.query.type
})

const type = computed(() => {
  const type = { 6: 202, 7: 301, 8: 501, 9: 401, 10: 101, 11: 101, 12: 102 }
  return type[route.query.type] || 101
})

const hasAdd = computed(() => {
  return route.query.type != 11
})

const createDefaultQuestion = () => {
  return {
    type: type.value,
    score: 0,
    title: '',
    content: '',
    answer_analysis: '',
    answer: {
      choose: '',
      data: { type: '1', file: {} },
      rule: { type: '1' },
      ai: '1',
    },
  }
}

const questionRef = ref()

const questions = ref([{ ...createDefaultQuestion() }])

const previewDialogVisible = ref(false)

async function getQuestion() {
  const resp = await getQuestions({ experiment_id: route.query.id, types: types.value })
  if (resp.data.items.length) {
    questions.value = resp.data.items.map((item) => {
      return { ...item, answer: JSON.parse(item.answer), score: parseInt(item.score) || 0, type: parseInt(item.type) }
    })
  }
}
onMounted(() => {
  getQuestion()
})

// 添加试题

const addQuestion = () => {
  questions.value.push({ ...createDefaultQuestion() })
}

const removeQuestion = (index) => {
  questions.value.splice(index, 1)
}
// 保存

const handleSubmit = async () => {
  await unref(questionRef.value?.formRef).validate()
  await updateQuestions({
    experiment_id: route.query.id,
    module: route.query.type,
    questions: questions.value.map((item) => {
      return { ...item, answer: JSON.stringify(item.answer) }
    }),
  })
  ElMessage({ message: '保存成功', type: 'success' })
}
</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" v-if="false">预览</el-button>
    </div>
  </AppCard>
  <div class="content-bottom">
    <AppCard class="l-card">
      <TagQuestion v-model="questions" ref="questionRef" @remove="removeQuestion" v-if="route.query.type === '6'" />
      <GroupQuestion v-model="questions" ref="questionRef" @remove="removeQuestion" v-if="route.query.type === '7'" />
      <JourneyQuestion v-model="questions" ref="questionRef" @remove="removeQuestion" v-if="route.query.type === '8'" />
      <MaterialQuestion
        v-model="questions"
        ref="questionRef"
        @remove="removeQuestion"
        v-if="route.query.type === '9'" />
      <UserQuestion v-model="questions" ref="questionRef" @remove="removeQuestion" v-if="route.query.type === '11'" />
      <EventQuestion v-model="questions" ref="questionRef" @remove="removeQuestion" v-if="route.query.type === '12'" />
      <div class="btn-box">
        <div class="btn-l">
          <el-button type="primary" @click="addQuestion" v-if="hasAdd">添加试题</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="questions"></QuestionsOrder>
    </AppCard>
  </div>
  <PreviewDialog v-model="previewDialogVisible" v-if="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>
