<script setup lang="ts">
import type { selectType } from './interface'
import SelectTab from './components/SelectTab.vue'
import AsideList from './components/AsideList.vue'
import { useRouter } from 'vue-router'
import { px2vh, secondsToHours } from '@/utils'
import { userStore } from '@/stores'
import { storeToRefs } from 'pinia'
import hud from '@/utils/hud'
import globalApi from '@/api/global'
import rankingApi from '@/api/ranking'

defineOptions({
  name: 'Ranking',
})

// import { RecycleScroller } from 'vue-virtual-scroller';
// import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
const OSS_URL = `${import.meta.env.VITE_OSS_URL}`
const { userInfo } = storeToRefs(userStore())

const bg = `url(${OSS_URL}/icon/ranking_topThree.svg)`
const router = useRouter()
const activeClass = ref(0) // 激活的侧边栏
const classList = [
  {
    id: 0,
    name: '整体',
    list: [
      {
        value: 8,
        label: '经验值',
      },
      {
        value: 9,
        label: '学习<br/>时长',
      },
      {
        value: 10,
        label: '答题<br/>正确数',
      },
      {
        value: 11,
        label: '视频<br/>时长',
      },
      {
        value: 13,
        label: '钻石数',
      },
    ],
  },
  {
    id: 1,
    name: '语感',
    list: [
      {
        value: 6,
        label: '句子<br/>练习数',
      },
      {
        value: 7,
        label: '阅读<br/>词汇量',
      },
    ],
  },
  {
    id: 2,
    name: '单词',
    list: [
      {
        value: 1,
        label: '闯关数',
      },
      {
        value: 2,
        label: '星星数',
      },
      // {
      //   value: 3,
      //   label: '单词总数',
      // },
      {
        value: 12,
        label: '单词<br/>掌握数',
      },
    ],
  },
  {
    id: 3,
    name: '乐贝',
    list: [
      {
        value: 14,
        label: '富豪榜',
      },
    ],
  },
]
const loading = ref(false) // 加载loading
const nav_all = '1'
const nav_region = '2'
const nav_school = '3'
const dataList = ref([
  {
    value: nav_all,
    label: '全服',
  },
  {
    value: nav_region,
    label: '地区',
  },
  {
    value: nav_school,
    label: '本校',
  },
])

const personGroup = ref([
  {
    value: 0,
    label: '个人',
  },
  {
    value: 1,
    label: '小组',
  },
])
const groupOrSelf = ref(0) // 小组还是个人 默认个人

const asideList = computed(() => classList[activeClass.value].list)
const asideLabel: anyObj = {
  1: '闯关数',
  2: '星星数',
  3: '单词总数',
  12: '单词掌握数',
  6: '句子练习数',
  7: '阅读词汇量',
  8: '经验值',
  9: '学习时长',
  10: '答题数',
  11: '视频时长',
  13: '钻石数',
  14: '乐贝数',
}
const activeNav = ref(nav_all)
const asideActive = ref(8)
const areaName = ref('') // 地区名称
const rankingData = ref<anyObj>({
  onRank: false,
  rankList: [],
  selfData: {},
})

const regionList = ref([] as any)

// 学校、班级
const schoolClass = ref({} as any)

function getListData() {
  // 获取地区下拉列表数据
  globalApi.getRegionSelector().then(res => {
    regionList.value = res.data.data.map((item: string, index: number) => ({
      label: item,
      value: item,
    }))
    areaName.value = res.data.data[0]
  })
}

const showSelf = computed(() => onRank.value)

// 是否上榜了
const onRank = computed(() =>
  activeNav.value === nav_region
    ? !rankingData.value.onRank &&
      (!rankingData.value.selfData.region || rankingData.value.selfData.region === areaName.value)
    : !rankingData.value.onRank,
)

function init(type?: number | string) {
  const postData: anyObj = { rankType: asideActive.value }
  if (activeNav.value === nav_region) {
    postData.region = areaName.value
  } else if (activeNav.value === nav_school) {
    postData.groupFlag = type === undefined ? groupOrSelf.value : type
    postData.schoolId = schoolClass.value.schoolId
    if (schoolClass.value.classId) {
      postData.classId = schoolClass.value.classId
    }
  }
  loading.value = true
  return rankingApi
    .getRankList(postData)
    .then((res: any) => {
      if (asideActive.value === 11 || asideActive.value === 9) {
        res.rankList.forEach((i: anyObj) => {
          i.typeCount = secondsToHours(i.typeCount)
        })
        res.selfData.typeCount = secondsToHours(res.selfData.typeCount)
      }

      for (const key in rankingData.value) {
        rankingData.value[key] = res[key]
      }
    })
    .catch(err => {
      if (err.name === 'CanceledError') return
      hud.error('网络异常，获取排行榜失败')
      rankingData.value.onRank = false
      rankingData.value.rankList = []
      rankingData.value.selfData = {}
    })
    .finally(() => (loading.value = false))
}
// 切换分类
function activeClassChange(e: anyObj) {
  asideActive.value = e.list[0].value
  init()
}

function selectChange() {
  init()
}

function changeTab(e: selectType) {
  // 切换顶部地区、全服
  activeNav.value = e.value as string

  groupOrSelf.value = 0

  init()
}

function changeAsideList(e: selectType) {
  // 切换侧边句子、阅读
  asideActive.value = e.value as number
  init()
}
function changeGroupOrSelf(e: selectType) {
  // 切换小组、个人
  init(e.value as number).then(() => {
    groupOrSelf.value = e.value as number
  })
}

function handleThumbs(item: any) {
  // 点赞
  rankingApi
    .operateLikeOrUnLike({
      operateFlag: item.likeStatus ? 0 : 1,
      targetUserId: item.id,
    })
    .then(() => {
      init()
    })
}

function goOtherDetail(item: anyObj) {
  if (activeNav.value === nav_school && groupOrSelf.value) return
  router.push(`/ranking/otherDetail/${item.id}`)
}

function checkSchool() {
  // 如果用户没有学校，去掉学校选项
  if (!userInfo.value.schoolName) {
    dataList.value = [
      {
        value: nav_all,
        label: '全服',
      },
      {
        value: nav_region,
        label: '地区',
      },
    ]
  }
}

watch(
  () => schoolClass.value.classId,
  () => {
    if (schoolClass.value.schoolId) {
      init()
    }
  },
)

onMounted(() => {
  getListData()
  checkSchool()
  init()
})
</script>
<template>
  <div class="ranking-content">
    <div class="top">
      <BackBar leftText="排行榜"></BackBar>
      <SelectTab
        v-model="activeNav"
        config="value"
        :dataList="dataList"
        class="SelectTab"
        @change="changeTab"
      ></SelectTab>

      <Select
        v-if="activeNav === nav_region"
        v-model="areaName"
        :selectList="regionList"
        :height="px2vh(60)"
        width="180"
        class="Select"
        @selectChange="selectChange"
      ></Select>

      <school-class-select
        v-if="activeNav === nav_school"
        v-model="schoolClass"
        show-all-classes
        :height="px2vh(60)"
        class="Select"
      />
    </div>
    <div class="content">
      <div class="content-siderbar">
        <Sidebar
          v-model="activeClass"
          :config="classList as any"
          class="left-vbar"
          @handleChange="activeClassChange"
        ></Sidebar>
      </div>
      <div class="select-type">
        <AsideList :dataList="asideList" @change="changeAsideList"></AsideList>
      </div>
      <div v-loading="loading" class="banner">
        <div class="content-top">
          <div class="number-w">排名</div>
          <div class="nickname nickname-w">昵称</div>
          <div class="content-w" :class="{ value: true, hasSchool: activeNav === nav_school }">
            {{ asideLabel[asideActive] }}
          </div>
          <div v-if="activeNav === nav_school" class="class class-w">班级</div>
          <div class="right-w"></div>

          <div v-if="activeNav === nav_school" class="groupOrSelf">
            <SelectTab
              v-model="groupOrSelf"
              :dataList="personGroup"
              type="mini"
              class="SmallSelectTab"
              @change="changeGroupOrSelf"
            ></SelectTab>
          </div>
        </div>
        <div
          :class="{
            rankingList: true,
            onRank,
          }"
        >
          <div
            v-for="item in rankingData.rankList"
            :key="item.id"
            :class="{
              'ranking-item': true,
              number1: item.rankNum === 1,
              number2: item.rankNum === 2,
              number3: item.rankNum === 3,
              'self-static': item.id === rankingData.selfData.id,
            }"
            @click="goOtherDetail(item)"
          >
            <div class="number-box number-w">
              <div class="number">
                <LineFont v-if="item.rankNum <= 3" :text="item.rankNum" />
                <template v-else>
                  {{ item.rankNum }}
                </template>
              </div>
            </div>
            <user-figure
              class="nickname-w"
              :personal-list="item.personInUsePersonalities"
              :sex="item.sex"
              :nickname="activeNav === nav_school && groupOrSelf ? item.name : item.nickName"
            />
            <div class="count content-w">
              {{ item.typeCount }}
            </div>
            <div v-if="activeNav === nav_school" class="class class-w">
              {{ item.className }}
            </div>
            <div
              class="thumbs right-w"
              :style="{
                'background-image': `url('${OSS_URL}/urm/ranking_bg_thumbs.svg')`,
              }"
            >
              <div
                v-show="!(activeNav === nav_school && groupOrSelf)"
                v-if="item.id !== rankingData.selfData.id"
                class="thumbsIcon"
                :style="{
                  'background-image': `url('${OSS_URL}/icon/thumbs${item.likeStatus ? '_active' : ''}.svg')`,
                }"
                @click.stop="handleThumbs(item)"
              ></div>
            </div>
          </div>
        </div>

        <div
          v-if="showSelf"
          :class="{
            myself: true,
            onRanking: rankingData.onRank,
          }"
        >
          <div
            v-if="groupOrSelf !== 1 || rankingData.selfData.id"
            class="ranking-item"
            :class="{
              number1: rankingData.selfData.rankNum === 1,
              number2: rankingData.selfData.rankNum === 2,
              number3: rankingData.selfData.rankNum === 3,
            }"
          >
            <div class="number-box number-w">
              <div class="number">{{ rankingData.selfData.rankNum || '未上榜' }}</div>
            </div>
            <user-figure
              class="nickname-w"
              :personal-list="rankingData.selfData.personInUsePersonalities"
              :sex="rankingData.selfData.sex"
              :nickname="rankingData.selfData.nickName"
            />
            <div class="count content-w">
              {{ rankingData.selfData.typeCount }}
            </div>
            <div v-if="activeNav === nav_school" class="class class-w">
              <!-- {{ userInfo.className }} -->
              {{ rankingData.selfData.className }}
            </div>
            <div class="right-w"></div>
          </div>
          <div v-else class="noGroup">您目前没有加入任何学习小组哦~</div>
        </div>
      </div>
      <div v-if="!rankingData.rankList?.length" class="empty-box">
        <Icon v-if="loading" name="global_loading" loading :size="80"></Icon>
        <Empty v-else content="无人上榜" type="goods"></Empty>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
//
.ranking-content {
  width: 100%;
  height: 100%;
  position: relative;
  @include main_bg;
  padding-left: $space-6;

  .top {
    display: flex;
    height: 11.67vh;
    .SelectTab {
      margin: 0 24px 0 208px;

      :deep(.data-item) {
        width: 150px !important;
      }
    }
    .SmallSelectTab {
      :deep(.data-item) {
        width: 100px !important;
      }
    }
    .SelectTab,
    .Select {
      align-self: flex-end;
    }
    .Select {
      margin-right: 24px;
    }
    .check-box {
      height: 5vh;
      position: absolute;

      right: 220px;
      top: 6.67vh;
      font-family: $font-text;
      font-size: 2.67vh;
      font-weight: 400;
      line-height: 5vh;
      .box {
        display: flex;
        align-items: center;
        justify-content: center;
        color: $font-color;
        cursor: pointer;

        .icon {
          margin-right: 10px;
        }
      }
    }
  }
  .content {
    display: flex;
    margin-top: 1.75vh;
    position: relative;
    // gap: 34px;

    .content-siderbar {
      :deep(.sidebar-item.active) {
        background-size: cover;
        // line-height: 76px;
      }
    }
    .select-type {
      width: 152px;
      box-sizing: border-box;
      margin: 0 48px 0 16px;
    }
    .groupOrSelf {
      position: absolute;
      z-index: 9;
      right: 0;
      top: 0.67vh;
    }
    .banner {
      width: 1305px;
      height: 81.33vh;
      box-sizing: border-box;
      border-radius: 2.5vh;
      background: rgba(0, 0, 0, 0.1);
      padding: 0 1.33vh 1.33vh;
      position: relative;

      .number-w {
        width: 110px;
        text-align: center;
      }

      .nickname-w {
        width: 480px;
      }

      .content-w {
        width: 160px;
      }
      .class-w {
        width: 200px;
      }

      .right-w {
        width: 224px;
      }

      .content-top {
        display: flex;
        justify-content: space-between;
        color: #fff;
        text-shadow: 0 0.17vh 0.17vh rgba(0, 0, 0, 0.45);
        font-family: $font-special;
        font-size: 2.33vh;
        font-style: normal;
        font-weight: 400;
        line-height: 5.5vh; /* 150% */
        align-items: center;
        position: relative;
        // padding-left: 24px;
        // padding-right: 240px;

        .nickname {
          text-align: center;
          // margin: 0 40px 0 298px;
          @include font-stroke(rgba(75, 75, 104, 1), 3px);
          &::after {
            width: 100%;
          }
        }
        .value {
          // flex: 1;
          text-align: center;
          // &.hasSchool {
          //   margin-left: 34px;
          // }
        }
        .class {
          flex: 0.7;
          text-align: center;
        }
      }
      .rankingList,
      .myself {
        height: 73.33vh;
        overflow-y: scroll;

        &::-webkit-scrollbar {
          width: 0px;
          height: 0;
          display: none;
        }
        .ranking-item {
          overflow: hidden;
          border-radius: 1.33vh;
          background: #fff;
          box-shadow: 0 0.17vh 0.33vh 0 rgba(0, 0, 0, 0.25);
          width: 100%;
          height: 8.33vh;
          flex-shrink: 0;
          margin-bottom: 0.67vh;
          display: flex;
          align-items: center;
          justify-content: space-between;
          &:last-child {
            margin-bottom: 0;
          }
          .x-user-head {
            margin: 0 12px 0 30px;
          }
          .number-box {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--, $font-color);
            text-align: center;
            font-family: $font-text;
            font-size: 3.33vh;
            font-style: normal;
            font-weight: 400;
            line-height: 8.33vh; /* 150% */
            border-radius: 1.33vh 0 0 1.33vh;
            background: linear-gradient(179deg, #d9e8f5 0.76%, #dae8f5 108.79%);
          }
          .number {
            height: 100%;
            width: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .bg-number {
            width: 53px;
            height: 7vh;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }

          //
          &.number1,
          &.number2,
          &.number3 {
            .number {
              background-image: v-bind(bg);
              background-size: 80%;
              background-repeat: no-repeat;
              background-position: center;
            }
          }
          &.number1 {
            .number-box {
              background: linear-gradient(179.28deg, #fdfd65 0.76%, #f7ce63 108.79%);
            }
          }
          &.number2 {
            .number-box {
              background: linear-gradient(179.28deg, #c5f4fa 0.76%, #b0aafb 108.79%);
            }
          }
          &.number3 {
            .number-box {
              background: linear-gradient(179.28deg, #ffdfcf 0.76%, #dea487 108.79%);
            }
          }
          .gender {
            height: 2.67vh;
            width: 32px;
            margin: 0 14px 0 18px;
          }
          .nickName {
            // width: calc(356px * 0.7);
            // height: calc(119px * 0.7);
            flex-shrink: 0;
            color: #fff;
            text-align: center;
            font-family: $font-special;
            font-size: 1.83vh;
            font-style: normal;
            font-weight: 400;
            line-height: 9.17vh;
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            padding: 0 24px;
            justify-content: center;
            background-position: 0% -2px !important;

            // .x-line-font {
            //     display: flex;
            // }
            .title-outline {
              @include single_ellipsis;
              position: absolute;
              bottom: 1.08vh;
              left: 50%;
              transform: translateX(-50%);

              // @include single_ellipsis;
              // padding: 0 2px;
              // box-sizing: border-box;
              // position: absolute;
              // bottom: 24px;
              // left: 50%;
              // transform: translateX(-50%);
              // &::after {
              //     // @include single_ellipsis;
              //     width: 100%;
              //     box-sizing: border-box;
              //     padding: 0 2px;
              //     white-space: nowrap !important;
              //     text-overflow: ellipsis !important;
              //     overflow: hidden !important;
              // }
            }

            .title-content {
              position: absolute;
              width: 100%;
              left: 0;
              top: 0;
              -webkit-text-stroke-width: 2px;
              -webkit-text-stroke-color: $font-color;
              z-index: -1;
            }
          }
          .count,
          .class {
            // flex: 1;
            text-align: center;
            color: $font-color;
            font-family: $font-text;
            font-size: 2.67vh;
            font-style: normal;
            font-weight: 400;
          }
          .class {
          }
          .thumbs {
            height: 100%;
            border-radius: 0 1.25vh 1.25vh 0;
            display: flex;
            align-items: center;
            background-size: cover;
            // justify-content: center;
            padding-left: 128px;
            .thumbsIcon {
              height: 4vh;
              width: 4vh;
              background-size: cover;
              background-repeat: no-repeat;
            }
          }
        }
      }
      :deep(.rankingList) {
        .self-static {
          position: sticky;
          bottom: 0;
          z-index: 3;
          // .self-static {
          // background: linear-gradient(179.28deg, #ffffff 0.76%, #ebffe0 108.79%);
          background: linear-gradient(1.39deg, #4de798 -23.7%, #a2fb6e 88.85%);

          &.number1 {
            background: linear-gradient(179.28deg, #ffffff 0.76%, #fdfd65 108.79%);
          }
          &.number2 {
            background: linear-gradient(179.28deg, #ffffff 0.76%, #c5f4fa 108.79%);
          }
          &.number3 {
            background: linear-gradient(179.28deg, #ffffff 0.76%, #ffdfcf 108.79%);
          }
          .number-box {
            // background: linear-gradient(248.87deg, #4de798 26.9%, #a2fb6e 79.86%);
            background: none;
          }
          // }
        }
      }
      .myself {
        width: calc(100% - 2.66vh);
        height: 9.17vh;
        position: absolute;
        z-index: 9;
        bottom: 0.83vh;
        border-radius: 0 0 1.33vh 1.33vh;
        overflow: hidden;
        .ranking-item {
          // margin: 0;
          // justify-content: flex-start;
          // padding-right: 224px;
          .number-box {
            background: linear-gradient(248.87deg, #4de798 26.9%, #a2fb6e 79.86%);

            .number {
              font-size: 2.67vh;
              font-weight: 400;
              line-height: 9.17vh;
              text-align: center;
            }
          }
        }
        .noGroup {
          height: 8.33vh;
          width: 100%;
          // width: 1170px;
          background: #f7f6fd;
          border-radius: 1.33vh;
          font-family: $font-special;
          font-size: 2.67vh;
          font-weight: 400;
          line-height: 8.33vh;
          text-align: center;
          color: $font-color;
        }
      }
      .rankingList.onRank {
        height: 63.83vh;
      }
    }
    .empty-box {
      position: absolute;
      left: 400px;
      width: 1305px;
      height: 66.67vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
