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

    <view
      class="flex items-center w-full overflow-auto gap-[16rpx] hot-rank-outer"
      hover-class="none"
      :hover-stop-propagation="false"
    >
      <view
        class="hot-rank-item flex-none pt-[32rpx] pb-[38rpx] px-[32rpx]"
        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">
          {{ typeWrap.name }}
        </text>

        <view
          class="flex items-center justify-left mt-[30rpx]"
          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([])

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

<style lang="scss" scoped>
.hot-rank-item {
  width: 292rpx;
  border: 2rpx solid;
}

.hot-rank-outer .hot-rank-item:nth-child(1) {
  background: linear-gradient(
    180deg,
    #dee7f8 0%,
    rgba(239, 244, 251, 0) 46%,
    rgba(239, 244, 251, 0) 100%
  );

  border-image: linear-gradient(
      180deg,
      rgba(201.8750050663948, 221.00000202655792, 255, 1),
      rgba(233.7500050663948, 241.39999777078629, 255, 1)
    )
    2 2;
}

.hot-rank-outer .hot-rank-item:nth-child(2) {
  background: linear-gradient(
    180deg,
    #ddf7ea 0%,
    rgba(234, 250, 241, 0) 46%,
    rgba(234, 250, 241, 0) 100%
  );

  border-image: linear-gradient(
      180deg,
      rgba(205.5883178114891, 245.07227271795273, 225.3302800655365, 1),
      rgba(221.00000202655792, 247.00000047683716, 234.00000125169754, 1)
    )
    2 2;
}

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

  border-image: linear-gradient(180deg, rgba(245, 237, 255, 1), rgba(245, 237, 255, 1)) 2 2;
}

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

  border-image: linear-gradient(180deg, rgba(255, 228, 196, 1), rgba(255, 228, 196, 1)) 2 2;
}

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

  border-image: linear-gradient(180deg, rgba(213, 255, 196, 0), rgba(213, 255, 196, 0)) 2 2;
}
</style>
