<template>
  <div class="level__list">
    <div
      v-for="(group, groupIndex) in listAfterGrouping"
      :key="groupIndex + new Date().getTime()"
      :class="[getGroupOrder(groupIndex), 'level__item__group']"
    >
      <level-item
        v-for="item in group"
        :key="item.levelId + item.index"
        :friends="item.friends"
        :is-first="item.index === 0 ? 1 : 0"
        :level-idx="item.index"
        :is-open="isOpen(item)"
        :isLastUnlock="isUnlock(item)"
        :level-num="item.levelNum"
        :type="item.type"
        :star="item.star"
        :road="item.road"
        :levelId="item.levelId"
        :stageName="item.stageName"
        :class="{
          level__item: true,
          level__item__unlock: isUnlock(item),
        }"
      ></level-item>
    </div>
  </div>
</template>

<script setup lang="ts">
import LevelItem from './LevelItem.vue'
import type { LevelDataItem } from '../interface'
import { useLearnWordStore } from '@/stores/learnWord/useLearnWordStore'

const props = defineProps<{
  lastOpenLevel: LevelDataItem
  list: Array<any>
}>()

const learnWordStore = useLearnWordStore()
const listAfterGrouping = ref<Array<Array<LevelDataItem>>>([])
const unlockLatest = ref(0) // 最新的已解锁关卡

function isOpen(item: LevelDataItem) {
  // 如果当前关卡的index 大于角色所在关卡，则上锁
  if (item.index > props.lastOpenLevel.index) return false
  /* 如果是混合，接口返回 isOpen：true 则解锁， 否则判断是否为第一关
		如果是入门或进阶模式，星星数量大于0的解锁，否则判断是否角色所在关卡
	*/
  return learnWordStore.listType === 3
    ? item.isOpen || item.index === 0
    : item.star > 0 || props.lastOpenLevel.levelId === item.levelId
}

function isUnlock(item: LevelDataItem) {
  return props.lastOpenLevel.levelId === item.levelId && props.lastOpenLevel.type === item.type
}

/* 将关卡列表按ABCB...(即 3/3/4/3)的顺序循环分组 */
function groupedLevelList() {
  const list = props.list.concat([])
  const groupedList: Array<Array<LevelDataItem>> = []

  // 一个循环中的分组
  const loop = [
    {
      name: 'groupA',
      limit: 3,
    },
    {
      name: 'groupB',
      limit: 3,
    },
    {
      name: 'groupC',
      limit: 4,
    },
    {
      name: 'groupD',
      limit: 3,
    },
  ]
  let count = 0
  let loopIndex = 0
  let unlockIndex = 0

  list.forEach((item: LevelDataItem, index) => {
    // 每一组的第一关
    if (count === 0) {
      const newGroup = []

      // 设置竖向的道路
      switch (loop[loopIndex].name) {
        case 'groupA':
          if (index !== 0) {
            item.road = 'ver-left'
          } else {
            item.road = ''
          }
          break
        case 'groupB':
          item.road = 'ver-right'
          break
        case 'groupC':
          item.road = 'ver-left'
          break
        case 'groupD':
          item.road = 'ver-right'
          break
        default:
          break
      }

      newGroup.push(item)
      groupedList.push(newGroup)
    } else {
      const currentGroup = groupedList[groupedList.length - 1]
      // 设置横向的道路
      setHorRoad(loop[loopIndex].name, item)
      currentGroup.push(item)
    }

    count++
    // 如果达到了当前组的最大值则归零进入下一组
    if (count === loop[loopIndex].limit) {
      count = 0
      loopIndex++
      if (loopIndex >= loop.length) {
        loopIndex = 0
      }
    }

    if (item.levelId === props.lastOpenLevel.levelId) {
      unlockIndex = index + 1
    }
    item.index = index
  })

  unlockLatest.value = unlockIndex
  listAfterGrouping.value = groupedList
}

function setHorRoad(groupName: string, item: LevelDataItem) {
  switch (groupName) {
    case 'groupA':
      item.road = 'hor-left'
      break
    case 'groupB':
      item.road = 'hor-right'
      break
    case 'groupC':
      item.road = 'hor-left'
      break
    case 'groupD':
      item.road = 'hor-right'
      break
    default:
      break
  }
}

/* 根据分组添加不同的类名，调整位置 */
function getGroupOrder(index: number) {
  let className = ''
  switch (index % 4) {
    case 0:
      className = 'A__group'
      break
    case 1:
      className = 'B__group'
      break
    case 2:
      className = 'C__group'
      break
    case 3:
      className = 'D__group'
      break
    default:
      break
  }
  return className
}

watch(
  () => props.list,
  () => {
    groupedLevelList()
  },
  {
    deep: true,
  },
)
</script>

<style lang="scss" scoped>
.level__list {
  box-sizing: border-box;
  width: 1500px;
  min-height: 100%;
  margin: 11.92vh auto;
  display: flex;
  flex-direction: column-reverse;

  .level__item__group {
    box-sizing: border-box;
    width: 100%;
    flex-shrink: 0;
    position: relative;
    margin-bottom: 1.33vh;

    display: flex;

    &.A__group {
      padding-left: 193px;
    }

    &.B__group {
      flex-direction: row-reverse;
      padding-right: 310px;
    }

    &.D__group {
      flex-direction: row-reverse;
      padding-right: 120px;
    }

    .level__item {
      margin: 0 10px;
    }
  }
}
</style>
