<script setup lang="ts">
import { wordTestService } from '@/api/service/word-test'
import { nav_stage, stageMap } from '@/components/word-book-selector'
import router from '@/router'
import dict from '@/utils/dict'
import hud from '@/utils/hud'
import { time_options } from '..'

const props = defineProps<{
  modelValue: boolean
}>()
const emit = defineEmits(['update:modelValue'])
defineOptions({ name: 'NewTest' })
const value = computed({
  get: () => props.modelValue,
  set: val => emit('update:modelValue', val),
})

const time = ref('5')

const wordBookRef = ref()

// 昵称
const nickName = ref('')

watch(
  [() => time.value, () => wordBookRef.value?.stage, () => wordBookRef.value?.book.bookId],
  async () => {
    // 如果2个都是空，直接返回
    if (!wordBookRef.value?.stage && !wordBookRef.value?.book.bookId) return

    const res = await wordTestService.getConsumeCoin({
      stageId: wordBookRef.value?.stage,
      textbookId: wordBookRef.value?.book.bookId,
      standardTime: Number(time.value) * 60,
    })
    consume.value = Number(res) || 0
  },
)

function startNewTest() {
  if (isNewUser.value && !nickName.value) {
    hud.error('新用户请先输入姓名')
    return true
  }

  // 请求参数
  const timeVal = Number(time.value) * 60
  const query = {
    time: timeVal,
    nickName: nickName.value || undefined,
  } as any
  const extra = {} as any
  if (wordBookRef.value.nav === nav_stage) {
    query.stageId = wordBookRef.value.stage
    extra.stageId = query.stageId
    extra.stageName = stageMap[query.stageId]
  } else {
    query.textbookId = wordBookRef.value.book.bookId
    extra.book = toRaw(wordBookRef.value.book)
  }
  query.extra = JSON.stringify(extra)
  hud.load({
    task: async () => {
      let questions = await wordTestService.getWords(query)
      questions = [...questions.chooseTitle, ...questions.spellTitle]
      // questions = [...questions.spellTitle]
      const path = '/subject/learnWord/word-test'
      dict.set(path, {
        time: timeVal,
        questions,
        extra,
      })
      // 跳转
      router.push(path)
    },
    option: '开始',
    hideSuccess: true,
  })
}

// 新用户
const isNewUser = ref(false)

// 需要消耗的乐贝
const consume = ref(0)
</script>

<template>
  <div class="new-test">
    <mj-dialog
      v-model="value"
      title="开始新的测评"
      :width="1300"
      hide-cancel
      ok-text="开始测评"
      :ok="startNewTest"
    >
      <div class="mj-data-rows">
        <div class="mj-data-row">
          <div class="mj-data-item">
            <span class="mj-data-item-title">范围</span>
            <word-book-selector ref="wordBookRef" hide-all-stage />
          </div>
        </div>
        <div class="mj-data-row">
          <div class="mj-data-item">
            <span class="mj-data-item-title">时长</span>
            <Select v-model="time" :select-list="time_options" width="15vh" />
          </div>
        </div>
        <div class="mj-data-row">
          <div class="mj-data-item new-user-item">
            <mj-check v-model="isNewUser" label="新用户" />
            <el-input
              v-if="isNewUser"
              v-model="nickName"
              class="nickname mj-data-item-input"
              placeholder="请输入新用户的姓名"
            />
          </div>
        </div>
      </div>
      <div v-if="consume > 0" class="consume">
        <Icon name="coin" :size="36" /><span
          >需消耗<span class="coin">{{ consume }}</span
          >乐贝</span
        >
      </div>
    </mj-dialog>
  </div>
</template>

<style lang="scss" scoped>
.new-test {
  .new-user-item {
    padding-left: 2vh;
    height: 50px;
    display: flex;
    gap: 3vh;
    align-items: center;
  }

  .nickname {
    width: 500px;
  }

  .consume {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    gap: 1vh;

    .coin {
      color: $error-color;
    }
  }
}
</style>
