<script setup lang="ts">
import { task_status_available, task_status_claimed } from '..'

withDefaults(
  defineProps<{
    dataList: any[]
  }>(),
  {
    dataList: () => [{ rewardList: [] }],
  },
)

const emits = defineEmits(['click', 'clickReward'])
const OSS_URL = import.meta.env.VITE_OSS_URL

function clearData() {}

function handleReward(item: any) {
  emits('click', item)
}
function clickReward(item: any) {
  emits('clickReward', item)
}

onUnmounted(() => {
  clearData()
})
</script>
<template>
  <div class="data-list">
    <div v-for="(item, index) in dataList" :key="index" class="data-item">
      <div class="name-box">
        <div class="title">
          {{ item.taskTitle }}
        </div>
        <div class="name">
          {{ item.name }}
        </div>
      </div>
      <div class="reward">
        <div
          v-for="reward in item.rewardList"
          :key="reward.rewardId"
          :class="{ 'reward-item': true, isUnique: reward.rewardType === 'dynamic' }"
          :style="{
            background:
              reward.rewardType === 'dynamic'
                ? 'linear-gradient(150.34deg, #FFF4BF 8.74%, #FFEE6C 89.6%)'
                : `url('${OSS_URL}/icon/task-${reward.rewardType}.svg') 100% / cover no-repeat`,
          }"
          @click="clickReward(item)"
        >
          <div
            v-if="reward.rewardType === 'dynamic'"
            class="img"
            :style="{
              background: `url('${OSS_URL}/icon/task-achievementPoints.svg') 100% / cover no-repeat`,
            }"
          ></div>
          <div class="text">
            {{ reward.rewardCount }}
          </div>
        </div>
      </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="grade">{{ item.completeProportionCount }}/{{ item.proportionSum }}</div> -->
        <div class="text-bg">{{ item.completeProportionCount }}/{{ item.proportionSum }}</div>
      </div>
      <div
        v-if="
          item.status === task_status_claimed && item.completeProportionCount >= item.proportionSum
        "
        class="right-bg"
        :style="{
          background: `url('${OSS_URL}/urm/task_done.png') 62px / 72px auto no-repeat`,
        }"
      ></div>
      <mj-button
        v-else
        tilt
        width="140"
        :type="item.status === task_status_available ? 'warn' : 'success'"
        class="button"
        successTwo
        :loading="item.loading"
        @click="handleReward(item)"
        >{{
          item.status === task_status_available
            ? '领取'
            : ['ContinuousLogin', 'LearnTotal', 'Upvote', 'LevelUpgrade'].includes(
                  item.taskCategory,
                )
              ? '未完成'
              : '前往'
        }}</mj-button
      >
    </div>
  </div>
</template>

<style lang="scss">
//

.data-list {
  width: 117.5vh;
  height: 54.33vh;
  overflow-y: scroll;
  box-sizing: border-box;
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .data-item {
    width: 117.33vh;
    height: 10.33vh;
    padding: 1.33vh 0 0 4.67vh;
    gap: 0;
    border-radius: 5.75vh;
    display: flex;
    position: relative;
    background: linear-gradient(138deg, #fdfdf9 14.4%, #e1f4ff 116.43%);
    box-shadow: 0 0.33vh 0.33vh 0 rgba(0, 0, 0, 0.25);
    margin-bottom: 1.33vh;
    .name-box {
      font-weight: 400;
      line-height: 4vh;
      text-align: left;
      color: $font-color;
      font-family: $font-text;
      .title {
        font-family: $font-special;
        font-size: 2.67vh;
      }
      .name {
        font-size: 2vh;
        color: #666666;
      }
    }
    .reward {
      display: flex;
      margin: 0 auto;
      // gap: 14px;
      flex-wrap: wrap;
      box-sizing: border-box;
      height: 8.33vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      .reward-item {
        margin-right: 1.17vh;
        height: 8.33vh;
        width: 8.33vh;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        padding-right: 0.42vh;
        color: #fff;
        box-shadow: 0 0.17vh 0.33vh rgba(0, 0, 0, 0.15);
        font-family: $font-special;
        font-size: 2vh;
        line-height: 3vh; /* 150% */
        border-radius: 1.33vh;
        &:last-child {
          margin-right: 0;
        }
        .text {
          position: relative;
          z-index: 3;
          text-shadow: 0 0.17vh 0.33vh #00000026;
        }
      }
      .isUnique {
        position: relative;
        border: 0.33vh solid #fff;
        .img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 2;
          height: 6.17vh;
          width: 6.17vh;
        }
      }
    }
    .silder {
      width: 24vh;
      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;
      position: absolute;
      left: 75vh;
      top: 4.17vh;
      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 {
        position: absolute;
        left: 50%;
        z-index: 2;
        transform: translate(-50%);
        // color: #fff;
        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
        font-family: $font-text;
        color: $font-color;
        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;
      }
    }
    .right-bg {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 18.67vh;
    }
    .button {
      position: absolute;
      right: 4.17vh;
      top: 1.67vh;
      cursor: pointer;
      border-radius: 1.67vh 2.08vh 1.67vh 2.08vh;
      transform: skew(-15deg);
      .x-button-text {
        transform: skew(15deg);
      }
    }
  }
}
</style>
