<script setup lang="ts">
withDefaults(
  defineProps<{
    data?: anyObj[] // status  0-未完成 1-可领取 2-已领取
  }>(),
  {
    data: () => [],
  },
)

const emits = defineEmits(['onReceive'])

const OSS_URL = import.meta.env.VITE_OSS_URL
const bg = `url(${OSS_URL}/urm/system_activity_task_english_bg.svg) left top/contain no-repeat`
const slogan = `url(${OSS_URL}/urm/system_activity_task_english_slogan.svg) left top/contain no-repeat`
const taskBg = `url(${OSS_URL}/urm/system_activity_task_english_item_bg.svg) left top/contain no-repeat`
const btnBg = `url(${OSS_URL}/urm/system_activity_task_english_item_btn_bg.svg) left top/contain no-repeat`
</script>

<template>
  <div class="box">
    <div
      class="inner-box"
      :style="{
        background: bg,
      }"
    >
      <div class="content">
        <el-scrollbar>
          <div class="task-list">
            <div
              v-for="(item, idx) in data"
              :key="item.taskId"
              :class="{
                'task-item': true,
                line: item.status !== 1,
              }"
            >
              <div class="task-info">
                <div class="task-info-head">
                  <div class="task-index">
                    {{ idx === 0 ? '05' : (idx + 1) * 5 }}
                  </div>
                  <div class="task-desc">等级</div>
                </div>
                <div class="task-info-content">
                  <ItemPopover
                    placement="right-start"
                    :data="{
                      iconName: 'reward_diamond',
                      personalCount: item.rewardList[0].userHaveCount,
                    }"
                  >
                    <Icon name="diamond" size="140" />
                  </ItemPopover>
                  <!-- <img src="" /> -->
                  <div>钻石</div>
                  <div>x{{ item.rewardList[0]?.rewardCount || 0 }}</div>
                </div>
              </div>
              <div
                v-if="item.status === 1"
                class="task-btn pointer"
                @click="emits('onReceive', item)"
              >
                <span>领取</span>
              </div>
              <div class="task-bottom">
                <Icon v-if="item.status === 2" name="activity_correct" size="72" />
                <span v-if="item.status === 0">未达成</span>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
  padding-top: 8.33vh;
  .inner-box {
    height: 100%;
    position: relative;
    width: 1478px;
    height: 74vh;
    &::after {
      content: '';
      display: inline-block;
      width: 1024px;
      height: 25.33vh;
      background: v-bind(slogan);
      position: absolute;
      top: -15.83vh;
      left: -70px;
    }

    .content {
      width: 100%;
      height: auto;
      padding: 9.17vh $space-4 0;
      display: flex;
      overflow: hidden;
      .task-list {
        display: flex;
        .task-item {
          flex-shrink: 0;
          width: 278px;
          height: 55.5vh;
          margin-right: $space-3;
          background: v-bind(taskBg);
          position: relative;

          .task-info {
            height: 42.17vh;
            &-head {
              .task-index {
                width: 100%;
                height: 14.17vh;
                text-align: center;
                display: flex;
                justify-content: center;
                color: #fff;
                text-shadow: 0 0.33vh 0.33vh #37ccb2;
                font-family: 'Arial Black';
                font-size: 10vh;
                line-height: 10vh;
                font-weight: 900;
                padding-top: 4.17vh;
              }

              .task-desc {
                text-align: center;
                height: 6.67vh;
                width: 100%;
                color: #fff;
                text-shadow: 0 0.33vh 0.33vh #37ccb2;
                font-family: 'Arial Black';
                font-size: 4vh;
                font-weight: 900;
              }
            }
            &-content {
              height: 20vh;
              text-align: center;
              text-shadow: 0 0.17vh 0.17vh rgba(0, 0, 0, 0.25);
              font-family: $font-special;
              font-size: 2.67vh;
              line-height: 4vh;
              img {
                width: 160px;
                height: 13.33vh;
              }
            }
          }

          .task-btn {
            width: 248px;
            height: 9.67vh;
            background: v-bind(btnBg);
            position: absolute;
            left: 14px;
            bottom: 1.67vh;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .task-bottom {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 2.5vh;
            span {
              color: $font-aux-color;
              display: inline-block;
              padding-bottom: 1.67vh;
            }
          }

          span {
            font-size: 3.33vh;
            font-family: $font-special;
          }

          &.line {
            &::after {
              content: '';
              display: block;
              width: 248px;
              height: 0.33vh;
              border-top: 0.33vh dashed #39d3a6;
              transform: rotate(-5deg);
              position: absolute;
              bottom: 9.67vh;
              left: 16px;
            }
          }
        }
      }
    }
  }
}
</style>
