<script setup lang="ts">
import { OSS_URL } from '@/utils'
import {
  task_status_available,
  task_status_claimed,
  task_type_lead,
  task_type_parent,
  task_type_week,
} from '..'
import { topicTypeCodeMap } from '@/page/student-mgr/set-task'

const props = defineProps<{
  type: any
  item: any
}>()

const emits = defineEmits(['show-reward', 'process-task'])

defineOptions({ name: 'TaskItem' })

const buttonText = computed(() => {
  if (props.item.first === false) {
    return '排队中'
  }
  // 按钮文字
  if (props.item.status === task_status_available) {
    return '领取'
  } else if (props.item.status === task_status_claimed) {
    // 已领取
    return ''
  } else {
    return (props.type === task_type_parent ||
      (props.type === task_type_week &&
        props.item.taskCategory !== 'SentenceLearn' &&
        props.item.taskCategory !== 'WordLevelThrough')) &&
      !props.item.status
      ? '未完成'
      : '前往'
  }
})

const background = computed(() => {
  let bg = 'normal'
  if (props.item.status === task_status_claimed) {
    bg = 'yilingqu'
  } else if (props.item.bg) {
    bg = props.item.bg
  } else if (props.item.status === task_status_available) {
    bg = 'kelingqu'
  }
  return `url('${OSS_URL}/urm/task-${bg}.png')
                                100% / cover no-repeat `
})

const titles = ['单词闯关', '单词复习', '登录']
const title = computed(() => {
  if (props.item.taskType === task_type_lead) {
    return topicTypeCodeMap[props.item.taskCategory]
  } else {
    for (const t of titles) {
      if (props.item.name.includes(t)) {
        return t
      }
    }
  }
  return props.item.name
})
</script>

<template>
  <div
    class="task-item"
    :style="{
      background,
    }"
  >
    <div class="title">
      <line-font :text="title" :size="36" /><span v-if="item.endTime" class="time"
        >{{ item.endTime }}截止</span
      >
    </div>
    <div class="reward-box" @click="emits('show-reward', item)">
      <div class="reward">
        <div
          v-for="reward in item.rewardList"
          :key="reward.rewardId"
          class="reward-item"
          :style="{
            background:
              type === task_type_parent
                ? `url('${reward.userRewardMappingVo.iconUrl}') 100% / cover no-repeat`
                : `url('${OSS_URL}/icon/task-${reward.rewardType}.svg') 100% / cover no-repeat`,
          }"
        >
          {{ reward.rewardCount }}
        </div>
      </div>
      <div class="more">奖励详情>></div>
    </div>
    <div class="name">
      {{ item.name }}
    </div>
    <div v-show="item.needProportion === 1" class="silder">
      <div
        :class="{
          'slider-bar': true,
          done: item.status === task_status_claimed,
        }"
        :style="{
          width: `${(item.completeProportionCount / item.proportionSum) * 100 > 100 ? 100 : (item.completeProportionCount / item.proportionSum) * 100}%`,
        }"
      />
      <div class="text-bg">{{ item.completeProportionCount }}/{{ item.proportionSum }}</div>
    </div>
    <div
      class="button"
      :class="{
        'not-first': item.first === false,
      }"
      @click="emits('process-task', item)"
    >
      {{ buttonText }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
.task-item {
  flex-shrink: 0;
  margin-right: 2.17vh;
  width: 26.67vh;
  height: 53.58vh;
  padding-top: 18.83vh;
  box-sizing: border-box;
  position: relative;
  &:last-child {
    margin-right: 0;
  }

  .title {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 15vh;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 2vh;

    .x-line-font {
      // letter-spacing: 0.33vh;
      font-style: italic;
      color: #fff01f;
    }

    .time {
      color: #684b4b;
      font-size: 1.8vh;
      font-family: $font-text;
    }
  }

  .reward-box {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 21.17vh;
    margin: 0 auto;
    gap: 1.33vh;

    .more {
      font-size: 2vh;
      color: #42b873;
    }

    .reward {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      .reward-item {
        height: 10vh;
        width: 10vh;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        padding-right: 0.42vh;
        color: #fff;
        text-shadow: 0 0.17vh 0.33vh rgba(0, 0, 0, 0.15);
        font-family: $font-special;
        font-size: 2vh;
        line-height: 3vh; /* 150% */
        margin-right: 1.17vh;
        &:last-child {
          margin: 0;
        }
      }
    }
  }
  .name {
    margin-top: 3.5vh;
    color: var(--, $font-color);
    text-align: center;
    font-family: $font-text;
    font-size: 2.33vh;
    font-style: normal;
    font-weight: 400;
    line-height: 3.5vh; /* 150% */
  }
  .silder {
    position: absolute;
    width: 23.67vh;
    bottom: 10vh;
    margin: 0 1.33vh;
    border-radius: 1.92vh;
    background: #d9d9d9;
    box-shadow: 0 0.17vh 0 0 rgba(0, 0, 0, 0.65);
    color: #fff;
    text-align: center;
    height: 1.67vh;
    z-index: 1;

    .slider-bar {
      position: absolute;
      background-color: #fff01f;
      height: 100%;
      left: 0;
      top: 0;
      width: 100%;
      border-radius: 1.92vh;
      z-index: 0;

      &.done {
        background-color: #a2fb6e;
      }
    }
    .grade,
    .text-bg {
      // color: #fff;
      color: $font-color;
      text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
      position: absolute;
      left: 50%;
      z-index: 2;
      transform: translate(-50%);
      font-family: $font-special;
      font-size: 1.5vh;
      font-style: normal;
      font-weight: 400;
      line-height: 1.67vh; /* 144.444% */
    }
    .text-bg {
      // -webkit-text-stroke: 2px $font-color;
      top: 0;
      z-index: 0;
    }
  }
  .button {
    position: absolute;
    bottom: 0.33vh;
    z-index: 9;
    cursor: pointer;
    margin-top: 2.17vh;
    width: 100%;
    height: 7vh;
    text-align: center;
    font-family: $font-special;
    font-size: 3.33vh;
    line-height: 6.33vh;
    color: $font-color;

    &.not-first {
      cursor: not-allowed;
      color: #899;
    }
  }
}
</style>
