<script setup lang="ts">
import activityApi from '@/api/system/activity'
import EnglishEnhance from './englishEnhance.vue'
import CheckIn from './checkIn.vue'
import { useReward } from '@/hooks'

const isLoading = ref(true)
const isEmpty = computed(() => !isLoading.value && classList.value.length === 0)

const activeClass = ref('')
const classList = ref<anyObj[]>([])
const taskList = ref([])
async function handleSelectClass(item: any) {
  taskList.value = item.taskActivityVoList
}

async function getData() {
  isLoading.value = true
  try {
    const { data: res } = await activityApi.getUserActivityList()
    res.data.forEach((item: anyObj) => {
      item.name = item.taskTitle
      item.id = item.taskCategory
    })
    activeClass.value = res.data[0]?.id
    classList.value = res.data
    if (res.data?.length) {
      taskList.value = res.data[0].taskActivityVoList
    }
  } finally {
    isLoading.value = false
  }
}
// 领奖
async function onReceive(d: anyObj) {
  await activityApi.openActivityReward({
    taskId: d.taskId,
  })
  d.status = 2
  useReward({
    rewardList: d.rewardList.map((i: anyObj) => ({
      iconName: 'reward_diamond',
      rewardCode: 'diamond',
      count: i.rewardCount,
      personalCount: i.userHaveCount,
    })),
  })
}

onMounted(() => {
  getData()
})
</script>

<template>
  <div class="page">
    <BackBar
      :class="{
        isFloat: isEmpty,
      }"
      leftText="活动"
    ></BackBar>
    <div v-if="!isEmpty" class="content">
      <div class="left">
        <Sidebar
          v-model="activeClass"
          :config="classList"
          class="left-vbar"
          @handle-change="handleSelectClass"
        ></Sidebar>
      </div>
      <div class="right">
        <CheckIn v-if="activeClass === 'AccumulateLogin'" :data="taskList" @onReceive="onReceive" />
        <EnglishEnhance
          v-if="activeClass === 'EnglishLevel'"
          :data="taskList"
          @onReceive="onReceive"
        />
      </div>
    </div>
    <Empty v-else content="还没有活动哦" />
  </div>
</template>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  padding: $space-4_h $space-6;
  @include main_bg;

  :deep(.sidebar-item.active) {
    width: 24vh;
  }

  .isFloat {
    position: absolute;
  }

  .content {
    width: 100%;
    height: calc(100% - 80px - 52px);
    margin-top: 4.33vh;
    display: flex;

    .left {
      width: auto;
      width: 320px;
      height: 100%;
      margin-right: $space-2;
      flex-shrink: 0;
      &-vbar {
        height: 100%;
        position: static;
      }
    }

    .right {
      width: calc(100% - 340px);
      height: 100%;
      .box {
        height: 100%;
      }
    }
  }
}
</style>
