<script setup lang="ts">
import type { TaskWordQuestConfig } from '@/api/service/task'
import wordTableApi from '@/api/subject/wordTable'
import hud from '@/utils/hud'
import num from '@/utils/num'
import obj from '@/utils/obj'

defineOptions({ name: 'TaskWordQuest' })
const amountText = '满星关卡'

// 入门
const word_quest_lv_beginner = '1'
// 进阶
const word_quest_lv_advanced = '2'

const word_quest_lv_map = {
  [word_quest_lv_beginner]: '入门',
  [word_quest_lv_advanced]: '进阶',
} as any
const word_quest_lv_options = obj.map2options(word_quest_lv_map)

const data = reactive({ level: word_quest_lv_beginner } as TaskWordQuestConfig)
const config = {} as {
  levelName: string
}

defineExpose({
  submit() {
    if (!data.level) {
      hud.error('请选择类型')
      return
    }
    if (!num.isPositiveInt(data.amount)) {
      hud.error('请输入正确的【' + amountText + '】（正整数）')
      return
    }
    config.levelName = word_quest_lv_map[data.level]
    return {
      taskWordQuestConfig: toRaw(data),
      config: JSON.stringify(config),
    }
  },
})
</script>

<template>
  <div class="task-word-quest mj-data-row">
    <div class="mj-data-item required">
      <span class="mj-data-item-title">类型</span>
      <select-tab v-model="data.level" :dataList="word_quest_lv_options" type="small" />
    </div>

    <div class="mj-data-item required">
      <span class="mj-data-item-title">{{ amountText }}</span>
      <el-input v-model="data.amount" class="amount mj-data-item-input" type="number" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use '../../index.scss' as *;
.task-word-quest {
}
</style>
