<script setup lang="ts">
import { taskService, type Task } from '@/api/service/task'
import {
  getTaskStatusClass,
  task_priority_map,
  task_status_map,
  topic_free_learn,
  topic_sentence_training,
  topic_word_mastery,
  topic_word_quest,
  topic_word_review,
  topicTypeCodeMap,
} from '..'
import { useRoute } from 'vue-router'

const route = useRoute()
const { id } = route.query

defineOptions({ name: 'TaskBasicInfo' })

// 基本信息
const basicInfo = ref({} as Task)

const wordBookTitle = computed(() => (basicInfo.value.config?.bookName ? '教材' : '阶段'))

const bookName = computed(() => taskService.getBookName(basicInfo.value) || '全部')

onMounted(async () => {
  if (basicInfo.value.id) return

  const data = await taskService.getDetail(id)
  // 额外奖励
  taskService.getExtraRewardList(data)
  // 配置
  if (data.config) {
    data.config = JSON.parse(data.config)
  }
  basicInfo.value = data
})
</script>

<template>
  <div class="task-basic-info">
    <div class="mj-data-row">
      <div class="mj-data-item status-item">
        <span class="mj-data-item-title">状态</span>
        <span :class="getTaskStatusClass(basicInfo.status)">{{
          task_status_map[basicInfo.status]
        }}</span>
      </div>
      <div class="mj-data-item">
        <span class="mj-data-item-title">开始时间</span>
        <span>{{ basicInfo.startTime }}</span>
      </div>
      <div class="mj-data-item">
        <span class="mj-data-item-title">结束时间</span>
        <span>{{ basicInfo.endTime }}</span>
      </div>
    </div>
    <div class="mj-data-row">
      <div class="mj-data-item">
        <span class="mj-data-item-title">优先级</span>
        <span>{{ task_priority_map[basicInfo.priority] }}</span>
      </div>
      <div class="mj-data-item">
        <span class="mj-data-item-title">目标</span>
        <span>{{ basicInfo.target || '无' }}</span>
      </div>
      <div class="mj-data-item">
        <span class="mj-data-item-title">备注</span>
        <span>{{ basicInfo.remark || '无' }}</span>
      </div>
    </div>
    <div class="mj-data-row">
      <div class="mj-data-item">
        <span class="mj-data-item-title">创建人</span>
        <span>{{ basicInfo.createUserName }}</span>
      </div>
      <div class="mj-data-item">
        <span class="mj-data-item-title">进度</span>
        <span>{{ `${basicInfo.completedPersonCount || 0}/${basicInfo.personCount || 0}` }}</span>
      </div>
      <div class="mj-data-item"></div>
    </div>
    <div class="mj-data-divider"></div>
    <div class="mj-data-row">
      <div class="mj-data-item">
        <span class="mj-data-item-title">奖励</span>
        <span
          ><span class="reward-amount">{{ basicInfo.reward }}</span
          >乐贝</span
        >
      </div>
      <div class="mj-data-item">
        <span class="mj-data-item-title">惩罚</span>
        <span v-if="basicInfo.punish"
          ><span class="punish-amount">{{ basicInfo.punish }}</span
          >乐贝</span
        >
        <span v-else>无</span>
      </div>
      <div class="mj-data-item"></div>
    </div>
    <div v-if="basicInfo.taskExtraRewardList?.length" class="mj-data-row">
      <div class="mj-data-item">
        <span class="mj-data-item-title">额外奖励</span>
        <span class="extra-reward-text">
          <span
            v-for="item in basicInfo.taskExtraRewardList"
            :key="item.id"
            class="extra-reward-item"
          >
            <span
              >【第<span class="rank">{{ item.startRank }}</span
              ><span v-if="item.startRank !== item.endRank"
                >至<span class="rank">{{ item.endRank }}</span></span
              >名】</span
            >
            <span
              >额外奖励<span class="amount">{{ item.amount }}</span
              >乐贝。</span
            >
          </span>
        </span>
      </div>
    </div>
    <div class="mj-data-divider"></div>
    <div class="mj-data-row">
      <div class="mj-data-item">
        <span class="mj-data-item-title">主题</span>
        <span>{{ topicTypeCodeMap[basicInfo.topicTypeCode] }}</span>
      </div>
      <template v-if="basicInfo.topicTypeCode === topic_word_review">
        <div class="mj-data-item">
          <span class="mj-data-item-title">单词数量</span>
          <span>{{ basicInfo.taskWordReviewConfig.amount }}</span>
        </div>
        <div class="mj-data-item">
          <span class="mj-data-item-title">{{ wordBookTitle }}</span>
          <span>{{ bookName }}</span>
        </div>
      </template>
      <template v-if="basicInfo.topicTypeCode === topic_word_mastery">
        <div class="mj-data-item">
          <span class="mj-data-item-title">单词数量</span>
          <span>{{ basicInfo.taskWordMasteryConfig.amount }}</span>
        </div>
        <div class="mj-data-item">
          <span class="mj-data-item-title">{{ wordBookTitle }}</span>
          <span>{{ bookName }}</span>
        </div>
      </template>
      <template v-if="basicInfo.topicTypeCode === topic_sentence_training">
        <div class="mj-data-item">
          <span class="mj-data-item-title">阶数</span>
          <span>{{ basicInfo.config.levelName }}</span>
        </div>
        <div class="mj-data-item">
          <span class="mj-data-item-title">句子数量</span>
          <span>{{ basicInfo.taskSentenceConfig.amount }}</span>
        </div>
      </template>
      <template v-if="basicInfo.topicTypeCode === topic_word_quest">
        <div class="mj-data-item">
          <span class="mj-data-item-title">类型</span>
          <span>{{ basicInfo.config.levelName }}</span>
        </div>
        <div class="mj-data-item">
          <span class="mj-data-item-title">满星关卡</span>
          <span>{{ basicInfo.taskWordQuestConfig.amount }}</span>
        </div>
      </template>
      <template v-if="basicInfo.topicTypeCode === topic_free_learn">
        <div class="mj-data-item">
          <span class="mj-data-item-title">通关次数</span>
          <span>{{ `每章节${basicInfo.taskFreeLearnConfig.amount}次` }}</span>
        </div>
        <div class="mj-data-item">
          <span class="mj-data-item-title">教材</span>
          <span>{{ bookName }}</span>
        </div>
      </template>
    </div>
    <div v-if="basicInfo.topicTypeCode === topic_free_learn" class="mj-data-row">
      <div class="mj-data-item">
        <span class="mj-data-item-title">章节</span>
        <el-tree
          class="chapter-tree"
          :data="basicInfo.config.chapters"
          :props="{
            children: 'children',
            label: 'name',
          }"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$fz: 2.33vh;
.task-basic-info {
  position: relative;
  margin-top: 1.5rem;
  background-color: rgb(249, 253, 255);
  border-radius: 3.33vh;
  display: flex;
  flex-direction: column;
  row-gap: 3vh;
  align-items: center;
  box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.25);
  padding: 2rem;
  max-height: 100%;
  overflow: scroll;
  @include hidden_scroll;
  .chapter-tree {
    display: flex;
    flex-direction: column;
    gap: 2vh;
    max-height: 25vh;
    padding: 1vh;
    flex: 1;
    border-radius: 1vh;
    overflow: auto;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.5);
    :deep(.el-tree-node__children) {
      margin-top: 2vh;
      display: flex;
      flex-direction: column;
      gap: 2vh;
    }

    :deep(.el-tree-node__label) {
      font-size: $fz;
      color: #4b4b68;
    }
  }

  .reward-amount {
    color: $success-color;
  }

  .punish-amount {
    color: $error-color;
  }

  .extra-reward-text {
    display: flex;
    column-gap: 20px;
    .extra-reward-item {
      .rank {
        color: $error-color;
      }
      .amount {
        color: $success-color;
      }
    }
  }
}
</style>
