<script setup lang="ts">
import ShowRewards from './components/show-rewards.vue'
import RewardDia from './components/RewardDia.vue'
import TaskList from './components/task-list.vue'
import DynamicList from './components/dynamic-list.vue'
import { useSound } from '@/hooks'
import taskApi from '@/api/task'
import router from '@/router'
import { storeToRefs } from 'pinia'
import { taskStore, userStore } from '@/stores'
import hud from '@/utils/hud'
import {
  task_type_day,
  task_type_week,
  task_type_achievement,
  task_type_parent,
  task_status_available,
  task_status_claimed,
  task_type_lead,
  task_status_ing,
  task_id_word_test,
  task_category_word_review,
  task_type_newbie,
} from '.'
import { taskService } from '@/api/service/task'
import { useLeadTaskStore } from '@/stores/lead-task'
import obj from '@/utils/obj'
import { only_last_id } from '@/api/only-last'

const OSS_URL = import.meta.env.VITE_OSS_URL

const useTaskStore = taskStore()
const { status } = storeToRefs(useTaskStore)
const { setStatus } = useTaskStore

const loading = ref(false) // 加载loading
const showBigDia = ref(false) // 查看奖励弹框
const showItem = ref<anyObj[]>([]) // 查看奖品数据
const showRewardDia = ref(false) // 领取奖励弹框
const rewardList = ref<anyObj[]>([]) // 领取奖励数据
const isWordListReward = ref(false) // dia弹框是打开的任务奖励  还是活跃度奖励

const { userInfo } = storeToRefs(userStore())
const activeType = ref('')

const { taskList } = storeToRefs(useLeadTaskStore())

const classList = computed(() => {
  let list = [] as any
  if (status.value.newbieStatus) {
    list.push({
      id: task_type_newbie,
      name: '新手',
      warning: status.value.newbieStatus,
    })
  }
  // 如果是校内学员
  if (userInfo.value.isTaskStudent) {
    list.push({
      id: task_type_lead,
      name: '导学',
      warning: status.value.leadStatus,
    })
  }
  list = list.concat([
    {
      id: task_type_day,
      name: '日常',
      warning: status.value.dailyStatus,
    },
    // {
    //   id: task_type_week,
    //   name: '周常',
    //   warning: status.value.weekStatus,
    // },
    {
      id: task_type_achievement,
      name: '成就',
      warning: status.value.archiveStatus,
    },
    {
      id: task_type_parent,
      name: '家长',
      warning: status.value.parentStatus,
    },
  ])
  return list
})

const oneKeyBg = `url(${OSS_URL}/urm/task_one_key.svg) 100%/cover no-repeat`

const taskData = ref<{
  dynamicCount: number
  taskDynamicVoList: any[]
  taskList: anyObj[]
}>({
  dynamicCount: 0, // 活跃度/成就点数
  taskDynamicVoList: [], // 任务奖励列表
  taskList: [], // 任务列表
})

const showAllReward = computed(() => {
  let flag = false
  flag = taskData.value.taskDynamicVoList?.some(item => item.status === task_status_available)
  if (!flag) {
    flag = taskData.value.taskList.some(item => item.status === task_status_available)
  }
  return flag
})

// 是否显示导学的【任务记录】按钮
const showLeadRecords = computed(() => {
  return activeType.value === task_type_lead
})

function init(showLoading = false) {
  loading.value = showLoading
  let fn = taskApi.getUserDailyTask
  switch (activeType.value) {
    case task_type_lead:
      // 获取日常任务
      fn = taskService.getProcessingTasks
      break
    case task_type_week:
      // 获取周长任务
      fn = taskApi.getUserWeekTask
      break
    case task_type_achievement:
      // 获取成就任务
      fn = taskApi.getUserAchievementTask
      break
    case task_type_parent:
      // 获取家长任务
      fn = taskApi.getParentOrTeacherTask
      break
    case task_type_newbie:
      // 获取新手任务
      fn = taskApi.getNewbieTask
      break
  }

  fn({ [only_last_id]: 'task-list' })
    .then(data => {
      clearData()

      // 日常任务、周常任务进行筛选同类任务，只展示第一个
      if (activeType.value === task_type_day || activeType.value === task_type_week) {
        data.taskList = data.taskList || []
        if (activeType.value === task_type_day) {
          // 每日任务，增加一个单词测评
          data.taskList.push({
            taskId: task_id_word_test,
            taskType: task_type_day,
            status: task_status_ing,
            name: '单词测评',
            display: true,
            rewardList: [
              {
                rewardId: null,
                rewardType: 'currency',
                rewardCode: null,
                rewardCount: '',
                propertyVo: null,
                clothingVo: null,
                personalityVo: null,
                userRewardMappingVo: null,
                showUser: null,
                userHaveCount: null,
              },
            ],
          })
          // 如果是单词复习，显示明显一点的背景
          for (const item of data.taskList) {
            if (item.taskCategory === task_category_word_review) {
              item.bg = 'kelingqu'
              break
            }
          }
        }
        data.taskList = filterFn(
          data.taskList.sort((a: anyObj, b: anyObj) => a.taskId - b.taskId),
        ).sort(sortData)
      }

      if (activeType.value === task_type_parent) {
        // 家长悬赏
        taskData.value.taskList = data
      }

      for (const key in taskData.value) {
        if (activeType.value !== task_type_parent) {
          // 其他任务
          ;(taskData.value as any)[key] = data[key]
        }
      }
      if (activeType.value === task_type_achievement) {
        // 成就任务
        taskData.value.taskList = filterFn(taskData.value.taskList)
        taskData.value.taskList.sort(sortData)
      } else if (activeType.value === task_type_lead) {
        // taskData.value.taskList.sort(sortData)
        // 导学任务
        taskList.value = taskData.value.taskList as any
        for (const task of taskData.value.taskList) {
          try {
            task.config = JSON.parse(task.config)
          } catch {
            task.config = {}
          }
        }

        if (taskList.value.length) {
          // 设置任务的完成优先级
          let maxPriority = -1
          // 优先完成的任务，索引
          let firstTaskIdx = -1
          // 优先完成的任务，插入的位置
          let firstInsertIdx = -1
          for (let i = 0; i < taskList.value.length; i++) {
            const task = taskList.value[i]
            if (task.status !== task_status_ing) {
              firstInsertIdx = i + 1
              continue
            }
            task.first = false
            if (task.priority > maxPriority) {
              maxPriority = task.priority
              firstTaskIdx = i
            }
          }
          if (firstTaskIdx !== -1) {
            // 如果找到是第一个任务
            const firstItem = taskList.value[firstTaskIdx]
            // 跟firstItem同一级别的，都设置为first = true
            for (const task of taskList.value) {
              if (task.status !== task_status_ing) {
                continue
              }
              if (task.priority === firstItem.priority) {
                task.first = true
              }
            }
            // const element = taskList.value.splice(firstTaskIdx, 1)[0]
            // taskList.value.unshift(element)
            obj.moveElement(taskList.value, firstTaskIdx, firstInsertIdx)
          }
        }
      }
    })
    .finally(() => {
      loading.value = false
    })
}

function sortData(a: anyObj, b: anyObj) {
  if (a.status === task_status_available) {
    // 可以领取的放前面
    return -1
  } else if (b.status === task_status_available) {
    return 1
  } else if (a.status === task_status_claimed && a.completeProportionCount >= a.proportionSum) {
    // 已领取的放最后
    return 1
  } else if (b.status === task_status_claimed && b.completeProportionCount >= b.proportionSum) {
    return -1
  } else {
    // 不能领取且没有完成比例的放最后面
    if (a.needProportion && !b.needProportion) {
      return -1
    } else if (!a.needProportion && b.needProportion) {
      return 1
    } else {
      // 其他不能领取按照完成比例排序
      return (
        b.completeProportionCount / b.proportionSum - a.completeProportionCount / a.proportionSum
      )
    }
  }
}

function filterFn(list: anyObj[]): anyObj[] {
  // 筛选任务 每个任务类型只展示第一个未完成的
  const filterStrObj: anyObj = {}
  const listData: anyObj[] = []

  list.forEach(item => {
    if (
      !filterStrObj[item.taskCategory] ||
      item.taskCategory === 'Medal' ||
      (item.taskCategory === 'WordLevelThrough' && activeType.value === task_type_achievement)
    ) {
      if (item.name.includes('单词闯关入门获得')) {
        if (!filterStrObj.StarPickerNormal) {
          if (!item.status) {
            filterStrObj.StarPickerNormal = 'StarPickerNormal'
          }
          listData.push(item)
        }
        return
      } else if (item.name.includes('单词闯关进阶获得')) {
        if (!filterStrObj.StarPickerHard) {
          if (!item.status) {
            filterStrObj.StarPickerHard = 'StarPickerHard'
          }
          listData.push(item)
        }
        return
      }
      if (item.status !== 2) {
        filterStrObj[item.taskCategory] = item.taskCategory || ''
      }
      listData.push(item)
    }
  })
  return listData
}

function clearData() {
  taskData.value = {
    dynamicCount: 0,
    taskDynamicVoList: [],
    taskList: [],
  }
}

function typeChange(item: any) {
  activeType.value = item.id
  init(true)
}

// 显示学员的导学任务记录
function getLeadRecords() {
  router.push('/task/user-task-records')
}

const allReceiveLoading = ref(false)
function allReceive() {
  hud.load({
    task: async () => {
      try {
        // 一键领取
        allReceiveLoading.value = true
        let data
        if (activeType.value === task_type_lead) {
          data = await taskService.batchClaimReward()
        } else {
          data = await taskApi.openAllReward({
            taskType: activeType.value,
          })
        }
        claimReward(data)
      } finally {
        allReceiveLoading.value = false
      }
    },
    option: '领取',
    hideSuccess: true,
  })
}

// 领取完奖励
function claimReward(list: any) {
  if (!list.length) return
  setStatus()
  init()
  rewardList.value = list
  showRewardDia.value = true // 领取奖励弹框出现
}

// 点击任务奖励
function clickTaskReward(item: any) {
  isWordListReward.value = true
  showItem.value = item
  showBigDia.value = true
}

// 点击活跃度奖励
function clickDynamicReward(item: any) {
  isWordListReward.value = false
  showItem.value = item
  showBigDia.value = true
}

// 奖励弹窗音效
watch(showRewardDia, nv => {
  if (nv) {
    useSound(`${OSS_URL}/sound/receive_reward.mp3`)
  }
})

onActivated(() => {
  // activeType.value = userInfo.value.isTaskStudent ? task_type_lead : task_type_day
  activeType.value = classList.value[0].id
  init(true)
  setStatus()
})
onUnmounted(() => {
  clearData()
})
</script>
<template>
  <div class="task-content">
    <div class="left">
      <BackBar leftText="任务" class="back-bar" />
      <Sidebar
        :model-value="activeType"
        :config="classList as any"
        class="left-vbar"
        @handle-change="typeChange"
      ></Sidebar>
    </div>
    <div v-if="taskData.taskList?.length > 0 && !loading" class="right">
      <task-list
        :data="taskData.taskList"
        :type="activeType"
        @click-reward="clickTaskReward"
        @claim-reward="claimReward"
      />
      <div v-if="showAllReward" class="button-allReward">
        <mj-button
          :width="230"
          :size="32"
          type="success"
          :loading="allReceiveLoading"
          @click="allReceive"
        >
          一键领取
        </mj-button>
      </div>
      <dynamic-list
        v-if="taskData.taskDynamicVoList?.length"
        :data="taskData"
        :type="activeType"
        @click-reward="clickDynamicReward"
        @claim-reward="claimReward"
      />
    </div>
    <div v-else class="empty-box">
      <Icon v-if="loading" name="global_loading" loading :size="80"></Icon>
      <Empty v-else content="暂无任务" type="goods"></Empty>
    </div>

    <mj-button
      v-if="showLeadRecords"
      tilt
      type="warn"
      :class="{
        'button-lead-records': true,
        'not-empty': taskData.taskList?.length,
        'no-all-reward': !showAllReward,
      }"
      :width="230"
      :size="32"
      @click="getLeadRecords"
    >
      任务记录
    </mj-button>

    <show-rewards
      v-model="showBigDia"
      :isAchievement="activeType === task_type_achievement"
      :dynamic="taskData.dynamicCount"
      :item="showItem"
      :isWordListReward="isWordListReward"
    />
    <RewardDia v-if="showRewardDia" v-model="showRewardDia" :rewardList="rewardList"></RewardDia>
  </div>
</template>

<style lang="scss" scoped>
.task-content {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  width: 100%;
  height: 100%;
  position: relative;
  @include main_bg;
  display: flex;
  gap: 10px;
  padding-left: $space-6;
  .left {
    width: 20vh;
    .back-bar {
      margin: 2.67vh 0 3.33vh 0;
    }
    .left-vbar {
      top: 11.67vh;
      overflow: visible;
    }
  }
  $right_w: 131.92vh;
  .right {
    width: $right_w;
    position: relative;
  }
  .button-allReward {
    width: 19.33vh;
    height: 6.67vh;
    flex-shrink: 0;
    position: absolute;
    right: 0.5vh;
    top: 11.67vh;
    border-radius: 3.33vh 0 0 3.33vh;
    // box-shadow: 0px 6px 4px 0px rgba(0, 0, 0, 0.35);
    cursor: pointer;

    .mj-button {
      background: v-bind(oneKeyBg);
      border-radius: 0;
      box-shadow: none;
      :deep(img) {
        display: none;
      }
    }
  }

  .button-lead-records {
    position: absolute;
    right: $space-6;
    top: 3.2vh;

    &.not-empty {
      left: 116vh;
      top: 11.5vh;

      &.no-all-reward {
        left: 137vh;
      }
    }
  }

  .empty-box {
    width: 70%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
