<template>
  <view class="mt-[44rpx]" hover-class="none" :hover-stop-propagation="false">
    <view
      class="flex items-center justify-between mb-[30rpx] mx-[36rpx]"
      hover-class="none"
      :hover-stop-propagation="false"
    >
      <text class="text-[32rpx] text-[#333333] font-semibold">热门排行榜</text>
      <image
        class="w-[40rpx] h-[40rpx]"
        src="https://api.static.ycymedu.com/src/images/home/right.svg"
        @click="toSchool('0')"
      ></image>
    </view>

    <view
      class="flex items-center overflow-x-auto hot-rank-outer gap-[16rpx] h-[462rpx] px-[32rpx]"
      hover-class="none"
      :hover-stop-propagation="false"
    >
      <!-- 骨架屏 -->
      <view
        v-if="isLoading"
        v-for="(_skeleton, index) in skeletonItems"
        :key="'skeleton-' + index"
        :class="`hot-rank-item flex-none skeleton-item`"
        hover-class="none"
        :hover-stop-propagation="false"
      >
        <view class="skeleton-text mx-[32rpx] mt-[32rpx] h-[40rpx] w-[120rpx] rounded"></view>

        <view class="flex items-center justify-left mt-[30rpx] mx-[32rpx]" v-for="i in 3" :key="i">
          <view class="skeleton-text w-[20rpx] h-[28rpx] mr-[10rpx] rounded"></view>
          <view class="skeleton-image w-[80rpx] h-[80rpx] rounded-full flex-none mr-[16rpx]"></view>
          <view class="flex flex-col w-full">
            <view class="skeleton-text h-[28rpx] w-[120rpx] rounded"></view>
            <view class="skeleton-text h-[22rpx] w-[100rpx] mt-[10rpx] rounded"></view>
          </view>
        </view>
      </view>

      <!-- 真实数据 -->
      <view
        v-else
        :class="`hot-rank-item flex-none`"
        hover-class="none"
        :hover-stop-propagation="false"
        v-for="typeWrap in universityTypeRankList"
        :key="typeWrap.type"
        @click="toSchool(typeWrap.type)"
        v-show="typeWrap.rows.length > 0"
      >
        <text class="font-semibold text-[#303030] text-[32rpx] inline-block mx-[32rpx] mt-[32rpx]">
          {{ typeWrap.name }}
        </text>

        <view
          class="flex items-center justify-left mt-[30rpx] mx-[32rpx]"
          v-for="(item, index) in typeWrap.rows"
          :key="index"
        >
          <text class="font-[28rpx] text-[#999999] font-normal mr-[10rpx]">
            {{ item.rank }}
          </text>
          <image
            class="w-[80rpx] h-[80rpx] rounded-full flex-none mr-[16rpx]"
            :src="item.logo"
          ></image>
          <view class="truncate flex flex-col" hover-class="none">
            <text class="font-normal text-[#333333] text-[28rpx] truncate">
              {{ item.universityName }}
            </text>
            <text class="text-[22rpx] text-[#999999] font-normal mt-[10rpx]">
              {{ item.cityName }}.{{ item.uType }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useUnSortType } from '@/hooks/useUnSortType'
import { getUniversityRank } from '@/service/index/api'

const toSchool = (id: string) => {
  uni.navigateTo({
    url: `/pages-sub/home/schoolRank/index?type=${id}`,
  })
}

const { unSortTypeList } = useUnSortType()
let universityTypeRankList = ref<any[]>([])
const isLoading = ref(true)

// 创建默认的骨架屏数据
const skeletonItems = ref([
  { type: 'skeleton-1', name: '综合排名', rows: [] },
  { type: 'skeleton-2', name: '理工排名', rows: [] },
  { type: 'skeleton-3', name: '文科排名', rows: [] },
  { type: 'skeleton-4', name: '医科排名', rows: [] },
])

watch(
  () => unSortTypeList.value,
  (newVal) => {
    if (newVal && newVal.length > 0) {
      Promise.all(
        newVal.map((item) =>
          getUniversityRank({
            Year: 2023,
            Type: item.type,
            PageIndex: 1,
            PageSize: 3,
          }),
        ),
      )
        .then((res) => {
          universityTypeRankList.value = []
          res.forEach((item, index) => {
            universityTypeRankList.value.push({
              ...newVal[index],
              rows: (item.result as { rows: any[] }).rows,
              loaded: true,
            })
          })
          isLoading.value = false
        })
        .catch(() => {
          isLoading.value = false
        })
    }
  },
  { immediate: true },
)
</script>

<style lang="scss" scoped>
.hot-rank-item {
  width: 356rpx;
  height: 452rpx;
  position: relative;
  background: #fff;
  border-radius: 8px;
}

.hot-rank-item::before {
  content: '';
  width: 360rpx;
  height: 456rpx;
  position: absolute;
  border-radius: 8px;
  top: -2rpx;
  left: -2rpx;
  z-index: -1;
}

.hot-rank-outer .hot-rank-item:nth-child(1) {
  background: linear-gradient(180deg, #caddff 0%, #eaf1ff 23%, #fff 100%);
}
.hot-rank-outer .hot-rank-item:nth-child(1)::before {
  background: linear-gradient(
    180deg,
    rgba(201.8750050663948, 221.00000202655792, 255, 1),
    rgba(233.7500050663948, 241.39999777078629, 255, 1)
  );
}

.hot-rank-outer .hot-rank-item:nth-child(2) {
  background: linear-gradient(180deg, #cef5e1 0%, #ddf7ea 23%, #fff 100%);
}
.hot-rank-outer .hot-rank-item:nth-child(2)::before {
  background: linear-gradient(
    180deg,
    rgba(205.5883178114891, 245.07227271795273, 225.3302800655365, 1),
    rgba(221.00000202655792, 247.00000047683716, 234.00000125169754, 1)
  );
}

.hot-rank-outer .hot-rank-item:nth-child(3)::before {
  background: linear-gradient(180deg, rgba(245, 237, 255, 1), rgba(245, 237, 255, 1));
}
.hot-rank-outer .hot-rank-item:nth-child(3) {
  background: linear-gradient(180deg, #f7e7ff 0%, rgba(245, 237, 255, 0) 23%, #fff 100%);
}

.hot-rank-outer .hot-rank-item:nth-child(4)::before {
  background: linear-gradient(180deg, rgba(255, 228, 196, 1), rgba(255, 228, 196, 1));
}
.hot-rank-outer .hot-rank-item:nth-child(4) {
  background: linear-gradient(180deg, #ffe4c4 0%, rgba(255, 228, 196, 0) 23%, #fff 100%);
}

.hot-rank-outer .hot-rank-item:nth-child(5)::before {
  background: linear-gradient(180deg, rgba(213, 255, 196, 0), rgba(213, 255, 196, 0));
}
.hot-rank-outer .hot-rank-item:nth-child(5) {
  background: linear-gradient(180deg, #e5ffc4 0%, rgba(213, 255, 196, 0) 23%, #fff 100%);
}

/* 骨架屏样式 */
.skeleton-text,
.skeleton-image {
  background-color: #e0e0e0;
  animation: pulse 1.5s infinite;
}

.skeleton-item {
  background: linear-gradient(180deg, #eaeaea 0%, #f5f5f5 23%, #fff 100%);
}
@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
</style>
