<script setup lang="ts">
import {
  topic_free_learn,
  topic_sentence_training,
  topic_word_mastery,
  topic_word_quest,
  topic_word_review,
  topicTypeCodeOptions2,
} from '../..'

import TaskWordTable from './task-word-table/index.vue'
import TaskWordQuest from './task-word-quest/index.vue'
import TaskSentence from './task-sentence/index.vue'
import TaskFreeLearn from './task-free-learn/index.vue'

defineOptions({ name: 'TaskCfgItem' })

// 主题
const topicTypeCode = ref('')

// 配置组件
const configRef = ref()

// 备注
const remark = ref('')

defineExpose({
  submit() {
    const cfg = configRef.value.submit()
    if (!cfg) return
    return {
      ...cfg,
      topicTypeCode: topicTypeCode.value,
      remark: remark.value,
    }
  },
})
</script>

<template>
  <!-- 主题 -->
  <div class="mj-data-row">
    <div class="mj-data-item required">
      <span class="mj-data-item-title">主题</span>
      <Select v-model="topicTypeCode" width="18vh" :select-list="topicTypeCodeOptions2" />
    </div>
    <div class="mj-data-item">
      <span class="mj-data-item-title">备注</span>
      <el-input v-model="remark" class="mj-data-item-input" placeholder="备注" />
    </div>
  </div>
  <!-- 单词掌握 -->
  <task-word-table
    v-if="topicTypeCode === topic_word_mastery"
    ref="configRef"
    :type="topic_word_mastery"
  />
  <!-- 单词复习 -->
  <task-word-table
    v-if="topicTypeCode === topic_word_review"
    ref="configRef"
    :type="topic_word_review"
  />
  <!-- 单词闯关 -->
  <task-word-quest v-if="topicTypeCode === topic_word_quest" ref="configRef" />
  <!-- 句子训练 -->
  <task-sentence v-if="topicTypeCode === topic_sentence_training" ref="configRef" />
  <!-- 自由学 -->
  <task-free-learn v-if="topicTypeCode === topic_free_learn" ref="configRef" />
</template>

<style lang="scss" scoped>
@use '../index.scss' as *;

.free-learn {
  .book {
    margin: 0 16px;
  }
}
</style>
