<script setup lang="ts">
import { isWebEvn, OSS_URL } from '@/utils'
import {
  task_category_word_review,
  task_id_word_test,
  task_status_available,
  task_status_ing,
  task_type_achievement,
  task_type_lead,
  task_type_newbie,
  task_type_parent,
} from '..'
import Achievement from './Achievement.vue'
import TaskItem from './task-item.vue'
import router from '@/router'
import {
  topic_free_learn,
  topic_sentence_training,
  topic_word_mastery,
  topic_word_quest,
  topic_word_review,
} from '@/page/student-mgr/set-task'
import { familiarity_know_well, familiarity_master } from '@/page/subject/learnWord/word-table'
import hud from '@/utils/hud'
import { taskService } from '@/api/service/task'
import taskApi from '@/api/task'

const props = defineProps<{
  type: any
  data: any
}>()
const emit = defineEmits(['claim-reward', 'click-reward'])
defineOptions({ name: 'TaskList' })
const bgImg = computed(() => {
  return `url(${OSS_URL}/urm/task_${props.type}.svg) 100%/cover no-repeat`
})

// 执行导学任务
function goToLeadTask(item: any) {
  const type = item.taskCategory
  if (type === topic_word_review || type === topic_word_mastery) {
    const familiarity = type === topic_word_review ? familiarity_master : familiarity_know_well
    const query = { familiarity } as any
    if (item.config?.stageId) {
      query.stageId = item.config?.stageId
    }
    if (item.config?.bookId) {
      query.versionId = item.config?.versionId
      query.bookId = item.config?.bookId
    }
    router.push({
      path: '/subject/learnWord/word-table',
      query,
    })
  } else if (item.taskCategory === topic_sentence_training) {
    router.push({
      path: '/subject/languageSense/sentenceSort',
      query: {
        grade: item.taskSentenceConfig.level,
      },
    })
  } else if (item.taskCategory === topic_word_quest) {
    router.push({
      path: `/subject/learnWord`,
      query: {
        level: item.taskWordQuestConfig.level,
      },
    })
  } else if (item.taskCategory === topic_free_learn) {
    const bookId = item.taskFreeLearnConfig.bookId
    const subjectId = item.config?.subjectId
    router.push({
      path: `/subject/freeStudy/textbookDetail/${subjectId}/${bookId}`,
      query: {
        textbookName: item.config.bookName,
      },
    })
  }
}

// 执行任务
function goToTask(item: any) {
  if (item.first === false) {
    hud.error('请先完成优先级高的任务')
    return
  }

  if (props.type === task_type_lead) {
    // 导学任务
    goToLeadTask(item)
    return
  }
  if (item.taskId === task_id_word_test) {
    // 跳转到单词测评
    router.push({ path: '/subject/learnWord/word-test-records' })
    return
  }

  if (item.taskType === task_type_newbie) {
    // 新手任务
    if (item.name.includes('单词闯关')) {
      // 单词闯关
      router.push({
        path: `/subject/learnWord`,
        query: {
          level: item.name.includes('入门') ? 1 : 2,
        },
      })
    } else if (item.name.includes('句子')) {
      // 句子训练
      router.push('/subject/languageSense')
    } else if (item.name.includes('单词测评')) {
      // 单词测评
      router.push('/subject/learnWord/word-test-records')
    } else if (item.name.includes('单词掌握')) {
      // 单词书
      router.push('/subject/learnWord/word-table')
    }
    return
  }

  switch (item.taskCategory) {
    case task_category_word_review:
      router.push('/subject/learnWord/word-review')
      break
    case 'OnRank':
      router.push('/ranking')
      break
    case 'RushThroughSentence':
    case 'SentenceLearn':
    case 'LanguageSentenceCount':
    case 'LanguageWordCount':
      router.push('/subject/languageSense')
      break
    case 'Medal':
      // setData('user', 'Medal');
      // router.push({ path: '/system/user' });
      // 勋章 区分是去闯关还是去语感
      if (item.name.includes('词') || item.name.includes('拼写')) {
        router.push('/subject/learnWord') // 闯关
      } else {
        router.push('/subject/languageSense') // 语感
      }
      break
    case 'WatchLearningVideos':
      router.push('/subject')
      break
    case 'FinishExercise':
      router.push('/subject')
      break
    case 'StrangeCollection':
      router.push('/subject/strangeBook')
      break
    case 'WordLevelThrough':
      // 单词通关 单词闯关
      router.push('/subject/learnWord')
      break
    case 'RushThrough':
      // 急速通关 单词闯关
      router.push('/subject/learnWord')
      break
    case 'StarPicker':
      // 摘星能手 单词闯关
      router.push('/subject/learnWord')
      break
    case 'ContinuousLogin':
      // console.log('登录')
      break

    default:
      break
  }
}

// 领取奖励
function claimReward(item: any) {
  let fq
  if (props.type === task_type_parent) {
    // 领取家长或者老师奖励
    fq = taskApi.openParentOrTeacherReward
  } else if (props.type === task_type_lead) {
    fq = taskService.claimReward
  } else {
    // 领取每周、每日、成就
    fq = taskApi.openReward
  }
  hud.load({
    task: async () => {
      const data = await fq({
        taskId: item.taskId,
        taskType: props.type,
      })
      emit('claim-reward', data.rewardList)
    },
    option: '领取',
    hideSuccess: true,
  })
}

function handleReward(item: any) {
  // 领取任务奖励
  if (item.status === task_status_ing) {
    goToTask(item)
  } else if (item.status === task_status_available) {
    claimReward(item)
  }
}

function clickReward(item: any) {
  emit('click-reward', item)
}
</script>

<template>
  <div
    class="task-list"
    :style="{
      background: bgImg,
    }"
  >
    <div
      v-if="type !== task_type_achievement"
      class="task-list-content"
      :class="{
        'hide-scroll-bar': !isWebEvn,
      }"
    >
      <task-item
        v-for="(item, index) in data"
        :key="index"
        :item="item"
        :type="type"
        @show-reward="clickReward"
        @process-task="handleReward"
      />
    </div>
    <div v-else class="achievement">
      <Achievement
        :data-list="data"
        @click="handleReward"
        @clickReward="clickReward($event)"
      ></Achievement>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.task-list {
  height: 86.42vh;
  width: 100%;
  padding-top: 24vh;
  padding-left: 10vh;
  &-content {
    width: 117.33vh;
    height: 54.33vh;
    overflow-x: scroll;
    display: flex;
    transition: all 0.2s;

    &.hide-scroll-bar::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
}
</style>
