<script setup lang="ts">
import { OSS_URL } from '@/utils'
import { task_status_available, task_type_achievement, task_type_week } from '..'
import hud from '@/utils/hud'
import taskApi from '@/api/task'

const props = defineProps<{
  type: any
  data: any
}>()
const emit = defineEmits(['claim-reward', 'click-reward'])
defineOptions({ name: 'DynamicList' })
const targetReward = computed(() => {
  //  当前成就阶段奖励
  const item =
    props.data.taskDynamicVoList.find((item: any) => item.status === task_status_available) ??
    props.data.taskDynamicVoList.find((item: any) => item.status === 0)
  return item ?? props.data.taskDynamicVoList[props.data.taskDynamicVoList.length - 1]
})

function handleGetDynamic(item: any) {
  if (item.status === task_status_available) {
    // 领取活跃度奖励
    hud.load({
      task: async () => {
        const data = await taskApi.openDynamicReward({
          extraId: item.extraId,
          taskType: props.type,
        })
        emit('claim-reward', data.rewardList)
      },
      option: '领取',
      hideSuccess: true,
    })
  } else {
    emit('click-reward', item)
  }
}
</script>

<template>
  <div v-if="type !== task_type_achievement" class="dynamic-list">
    <div
      class="day"
      :style="{
        background: `url('${OSS_URL}/icon/huoyuedu_01.svg') 100% / cover no-repeat`,
      }"
    >
      <div class="title">
        {{ type === task_type_week ? '本周活跃度' : '本日活跃度' }}
        <div class="text-bg">
          {{ type === task_type_week ? '本周活跃度' : '本日活跃度' }}
        </div>
      </div>
      <div class="myself">
        {{ data.dynamicCount }}
      </div>
    </div>
    <div
      v-for="(item, index) in data.taskDynamicVoList"
      :key="item.extraId"
      class="dynamic-list-item"
      :style="{
        background: `url('${OSS_URL}/icon/baoxiang${type === task_type_week ? '-week-' : ''}0${index + 1}_${item.status ? (item.status === task_status_available ? 'weidakai' : 'yidakai') : 'shangsuo'}.png') 100% / cover no-repeat`,
      }"
      @click="handleGetDynamic(item)"
    >
      <div :class="{ number: true, active: data.dynamicCount >= item.num }">
        {{ item.num }}
      </div>
    </div>
    <div class="bg-slider">
      <div
        class="bg-yellow-bar"
        :style="{
          width: `${(data.dynamicCount / data.taskDynamicVoList[data.taskDynamicVoList.length - 1].num) * 100}%`,
        }"
      />
    </div>
  </div>
  <div v-else class="dynamic-list achievement-reward">
    <div
      class="day"
      :style="{
        background: `url('${OSS_URL}/icon/huoyuedu_01_new.svg') 100% / cover no-repeat`,
      }"
    >
      <div class="title">
        当前成就点数
        <div class="text-bg">当前成就点数</div>
      </div>
      <div class="myself">
        {{ data.dynamicCount }}
      </div>
    </div>
    <div
      class="target"
      :style="{
        background: `url('${OSS_URL}/icon/huoyuedu_02.svg') 100% / cover no-repeat`,
      }"
      @click="handleGetDynamic(targetReward)"
    >
      <div class="title">
        阶段目标
        <div class="text-bg">阶段目标</div>
      </div>
      <div class="target-number">
        {{ targetReward.num }}
      </div>
    </div>
    <div class="bg-slider">
      <div
        class="bg-yellow-bar"
        :style="{
          width: `${(data.dynamicCount / targetReward.num) * 100 > 100 ? 100 : (data.dynamicCount / targetReward.num) * 100}%`,
        }"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dynamic-list {
  width: 127.33vh;
  // 1240 +168 +120
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 86vh;
  left: 4vh;
  height: 10.83vh;
  &-item,
  .day,
  .target {
    height: 10vh;
    width: 10vh;
    position: relative;
    .title,
    .text-bg {
      width: max-content;
      position: absolute;
      font-family: $font-special;
      font-size: 2.33vh;
      font-weight: 400;
      line-height: 3.5vh;
      text-align: center;
      -webkit-text-stroke: 4px #fff;
      top: -1.67vh;
      left: -1vh;
      transform: rotate(-4deg);

      .text-bg {
        transform: rotate(0deg);

        top: 0;
        left: 0;
        -webkit-text-stroke: 0px;
        color: #1e1e1e;
      }
    }
    .myself,
    .target-number {
      position: absolute;
      z-index: 3;
      width: 10vh;
      height: 3.33vh;
      transform: rotate(-4deg);
      background: linear-gradient(108deg, #fbff3c 0%, #39ffe7 100%);
      font-family: $font-special;
      font-size: 2.33vh;
      line-height: 3vh;
      text-align: center;
      color: #1e1e1e;
      border: 0.33vh solid #fff;
      border-radius: 0.67vh;
      top: 8vh;
      left: 0;
      text-shadow: 0 0.17vh 0.17vh rgba(0, 0, 0, 0.25);
    }
  }
  &-item {
    position: relative;
    cursor: pointer;
    .number {
      position: absolute;
      left: 0;
      z-index: 3;
      width: 10vh;
      height: 3.33vh;
      top: 8vh;
      gap: 0;
      border-radius: 1.67vh;
      background: #4c4f54;
      font-family: $font-special;
      font-size: 2vh;
      font-weight: 400;
      line-height: 3vh;
      text-align: center;
      color: #fff;
      border: 0.17vh solid #fff;
      &.active {
        background: linear-gradient(150.34deg, #ddff7e 8.74%, #04fabf 89.6%);

        text-shadow: 0 0.17vh 0.17vh rgba(0, 0, 0, 0.25);
      }
    }
  }
  .bg-slider {
    box-sizing: border-box;
    position: absolute;
    left: 9.33vh;
    z-index: 0;
    bottom: 0.33vh;
    border-radius: 1vh;
    width: 109vh;
    height: 2vh;
    background: rgba(0, 0, 0, 0.35);
    box-shadow: 0 0.33vh 0.17vh 0 rgba(0, 0, 0, 0.25);
    .bg-yellow-bar {
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #fff01f;
      height: 106%;
      border-radius: 1vh;
    }
  }
}
.achievement-reward {
  width: 97.17vh;
  margin-left: 15vh;
  .bg-slider {
    width: 78.33vh;
    left: 9.33vh;
  }
}
</style>
