<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_checkin_bg.svg) left top/contain no-repeat`
const slogan = `url(${OSS_URL}/urm/system_activity_task_checkin_slogan.png) left top/contain no-repeat`
const taskBg = `url(${OSS_URL}/urm/system_activity_task_checkin_item_bg.svg) left top/contain no-repeat`
const taskBgHight = `url(${OSS_URL}/urm/system_activity_task_checkin_item_bg_hight.svg) left top/contain no-repeat`
const btnBg = `url(${OSS_URL}/urm/system_activity_task_checkin_item_btn_bg.svg) left top/contain no-repeat`
</script>

<template>
  <div class="box">
    <div
      class="inner-box"
      :style="{
        background: bg,
      }"
    >
      <div class="content">
        <div class="task-list">
          <div
            v-for="(item, idx) in data"
            :key="item.taskId"
            :class="{
              'task-item': true,
            }"
          >
            <div class="task-info">
              <div class="task-info-head">
                <div class="task-index">
                  {{ '0' + (idx + 1) }}
                </div>
              </div>
              <div class="task-info-content">
                <div class="reward">
                  <ItemPopover
                    placement="right-start"
                    :data="{
                      iconName: 'reward_diamond',
                      personalCount: item.rewardList[0].userHaveCount,
                    }"
                  >
                    <Icon name="reward_diamond" size="120" />
                  </ItemPopover>
                  <div class="reward-num">
                    <LineFont
                      :text="item.rewardList[0]?.rewardCount || 0"
                      :size="24"
                      offset="2"
                      border="6"
                      reverse
                    ></LineFont>
                  </div>
                </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>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
  padding-top: 5vh;
  .inner-box {
    height: 100%;
    position: relative;
    width: 108.67vh;
    height: 71vh;
    &::after {
      content: '';
      display: inline-block;
      width: 103.33vh;
      height: 27vh;
      background: v-bind(slogan);
      position: absolute;
      top: -11.67vh;
      left: -4.17vh;
    }

    .content {
      width: 100%;
      height: auto;
      padding: 10.83vh 7.33vh 0;
      display: flex;
      overflow: hidden;
      .task-list {
        display: grid;
        grid-template-columns: repeat(3, 20vh) 20vh; /* 3 列 */
        grid-template-rows: repeat(2, 25.83vh); /* 2 行 */
        gap: 1.67vh 4.67vh; /* 列和行间距 */

        .task-item {
          width: 20vh;
          height: 25.83vh;
          background: v-bind(taskBg);
          position: relative;
          z-index: 1;

          &:nth-child(4) {
            grid-column: 1;
            grid-row: 2;
          }
          &:nth-child(5) {
            grid-column: 2;
            grid-row: 2;
          }
          &:nth-child(6) {
            grid-column: 3;
            grid-row: 2;
          }
          &:nth-child(7) {
            grid-row: span 2; /* 第七个框跨越两行 */
            grid-column: 4; /* 第七个框在第三列 */
            height: 100%;
            background: v-bind(taskBgHight);

            .task-info-content {
              height: 100%;
              align-items: center;
              .reward {
                width: 16.67vh;
                height: 16.67vh;
                .x-icon {
                  width: 16.67vh !important;
                  height: 16.67vh !important;
                }

                .reward-num {
                  right: 1.33vh;
                  bottom: 1.33vh;
                  .x-line-font {
                    font-size: 2.5vh;
                  }
                }
              }
            }
          }

          .task-info {
            height: calc(100% - 160px);
            &-head {
              position: relative;
              .task-index {
                font-family: 'Arial Black';
                font-size: 10vh;
                line-height: 10vh;
                font-weight: 900;
                background: linear-gradient(180deg, #3761e9 12.75%, #e5f5ff 76.5%);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
                position: absolute;
                left: -0.33vh;
                top: -1.5vh;
              }
            }
            &-content {
              height: 15vh;
              // font-family: $font-special;
              text-shadow: 0 0.17vh 0.33vh rgba(0, 0, 0, 0.15);
              // font-size: 24px;
              padding-top: 5vh;
              display: flex;
              justify-content: center;
              .reward {
                position: relative;
                width: 10vh;
                height: 10vh;
                border-radius: $space-3;
                background: #fff;
                padding: 0.67vh;
                box-sizing: content-box;

                .reward-num {
                  position: absolute;
                  right: 1.17vh;
                  bottom: 1vh;
                }
              }
              img {
                width: 13.33vh;
                height: 13.33vh;
              }
            }
          }

          .task-btn {
            width: 20vh;
            height: 7vh;
            background: v-bind(btnBg);
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
          }

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

          .task-btn span,
          .task-bottom span {
            font-size: 3.33vh;
            font-family: $font-special;
          }
        }
      }
    }
  }
}
</style>
