<script setup lang="ts">
import hud from '@/utils/hud'
import num from '@/utils/num'
import languageSenseApi from '@/api/subject/languageSense'
import type { TaskSentenceConfig } from '@/api/service/task'

defineOptions({ name: 'TaskSentence' })
const amountText = '句子数量'

const data = reactive({} as TaskSentenceConfig)
const config = {} as {
  levelName: string
}

// 阶数
const sentenceLevelOptions = ref([] as any)
const sentenceLevelMap = {} as any

defineExpose({
  submit() {
    if (!data.level) {
      hud.error('请选择阶段')
      return
    }
    if (!num.isPositiveInt(data.amount)) {
      hud.error('请输入正确的【' + amountText + '】（正整数）')
      return
    }
    config.levelName = sentenceLevelMap[data.level]
    return { taskSentenceConfig: toRaw(data), config: JSON.stringify(config) }
  },
})

onMounted(async () => {
  const stages = await languageSenseApi.getSenseStagesApi()
  sentenceLevelOptions.value = stages.map(stage => {
    sentenceLevelMap[stage.code] = stage.value
    return {
      value: stage.code,
      label: stage.value,
    }
  })
})
</script>

<template>
  <div class="task-sentence mj-data-row">
    <div class="mj-data-item required">
      <span class="mj-data-item-title">阶数</span>
      <Select v-model="data.level" :select-list="sentenceLevelOptions" />
    </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-sentence {
  :deep(.content),
  :deep(.selectList) {
    width: 450px;
  }

  :deep(.selectList-box) {
    width: 435px;
  }
}
</style>
