<template>
   <div class="content">
      <div class="pcBg">
         <img class="pcTitle" src="../../../assets/lingyungeImages/pc/title.webp" alt="" />
         <div class="alignCenter">
            <div class="pcContent height380">
               <div class="rank01">
                  <img class="rankBg" src="../../../assets/lingyungeImages/pc/rank001.webp" alt="" />
                  <img class="rankAva" :src="top01.avatar" alt="" />
                  <div class="rankNum">{{ top01.score }}</div>
                  <div class="rankName">
                     {{ top01.position_name }}-{{ top01.name }}
                  </div>
               </div>
               <div class="rank02">
                  <img class="rankBg" src="../../../assets/lingyungeImages/pc/rank002.webp" alt="" />
                  <img class="rankAva" :src="top02.avatar" alt="" />
                  <div class="rankNum">{{ top02.score }}</div>
                  <div class="rankName">
                     {{ top02.position_name }}-{{ top02.name }}
                  </div>
               </div>
               <div class="rank03">
                  <img class="rankBg" src="../../../assets/lingyungeImages/pc/rank003.webp" alt="" />
                  <img class="rankAva" :src="top03.avatar" alt="" />
                  <div class="rankNum">{{ top03.score }}</div>
                  <div class="rankName">
                     {{ top03.position_name }}-{{ top03.name }}
                  </div>
               </div>
               <div class="rank04">
                  <img class="rankBg" src="../../../assets/lingyungeImages/pc/rank004.webp" alt="" />
                  <img class="rankAva" :src="top04.avatar" alt="" />
                  <div class="rankNum">{{ top04.score }}</div>
                  <div class="rankName">
                     {{ top04.position_name }}-{{ top04.name }}
                  </div>
               </div>
               <div class="rank05">
                  <img class="rankBg" src="../../../assets/lingyungeImages/pc/rank005.webp" alt="" />
                  <img class="rankAva" :src="top05.avatar" alt="" />
                  <div class="rankNum">{{ top05.score }}</div>
                  <div class="rankName">
                     {{ top05.position_name }}-{{ top05.name }}
                  </div>
               </div>
            </div>
         </div>
         <div class="alignBottom">
            <div class="pcContent pt70">
               <swiper style="width: 100%; height: 230px" :mousewheel="{ mousewheel: true }" :modules="modules"
                  :slides-per-view="1" :direction="'vertical'" :autoplay="{ delay: 3000, disableOnInteraction: false }"
                  :loop="true">
                  <swiper-slide v-for="(item, index) in topList" :key="index">
                     <div class="swiperItem" v-for="(item2, index2) in item" :key="index2">
                        <div class="swiperTips">{{ item2.index }}</div>
                        <img class="swiperBg" src="../../../assets/lingyungeImages/pc/itemBg.webp" alt="" />
                        <img class="swiperAva" :src="item2.avatar" alt="" />
                        <div class="swiperText">{{ item2.score }}</div>
                        <div class="swiperText02">
                           {{ item2.position_name }}-{{ item2.name }}
                        </div>
                     </div>
                  </swiper-slide>
               </swiper>
            </div>
            <div class="pcContent" style="padding-top: 10px">
               <div class="pcTips">
                  <!-- 积分获取规则:
                  1.参与活动(凌云成长计划内所有活动项目)每次1积分；2.【观影会】由凌云阁评委会，评选出最佳个人奖，可额外获得2积分；3.【头脑风暴】
                  准备参会资料者额外获得5积分,PK赛中,优胜团队内队员每人额外获得1积分,评委在两队内选择2名最佳表现个人奖,可额外获得10积分；4.在一个成长计划周期(6个月)结束后,每个坚持到最后的参与者都将获得积分奖励。 -->
                  积分说明：此积分为各成员参与凌云阁活动累计积分。
               </div>
            </div>
         </div>
      </div>
   </div>
</template>
<script setup lang="js">
import { ref } from 'vue'
//引入swiper
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/scrollbar';
import { Navigation, Pagination, Scrollbar, A11y, Autoplay, Mousewheel } from 'swiper/modules';
import { getList } from '../../../api/lingyuge'
const defaultImg = require('../../../assets/lingyungeImages/tx.png')
const modules = [Navigation, Pagination, Scrollbar, A11y, Autoplay, Mousewheel]
const top01 = ref({});
const top02 = ref({});
const top03 = ref({});
const top04 = ref({});
const top05 = ref({});
const topList = ref([]);
const getListArray = () => {
   getList().then((res) => {
      let data = res.data;
      for (let i in data) {
         data[i].index = Number(i) + 1;
         if (data[i].avatar.indexOf('storage') < 0) {
            data[i].avatar = defaultImg;
         }
      }
      data.forEach((item, index) => {
         if (index == 0) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top01.value = item };
         if (index == 1) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top02.value = item };
         if (index == 2) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top03.value = item };
         if (index == 3) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top04.value = item };
         if (index == 4) { if (item.avatar.indexOf('storage') < 0) { item.avatar = defaultImg } top05.value = item };
      });
      for (var i = 5; i < data.length; i += 5) {

         topList.value.push(data.slice(i, i + 5));
      }
   })
}
getListArray();
</script>
<!-- 样式 -->
<style lang="scss" scoped>
.content {
   width: 100%;
   height: 100%;

   .pcBg {
      min-width: 1360px;
      width: 100%;
      min-height: 100%;
      background-image: url("../../../assets/lingyungeImages/pc/bg.webp");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
   }

   .pcTitle {
      width: 1360px;
      height: 200px;
      margin: 0 auto;
      display: block;
      padding-top: 2vh;
   }

   .height380 {
      height: 380px;
   }

   .pcContent {
      width: 1360px;
      padding-top: 20px;
      margin: 0 auto;
      display: flex;
      position: relative;

      .rank01 {
         width: 354px;
         height: 380px;
         background-image: url("../../../assets/lingyungeImages/pc/rank01.webp");
         background-position: center;
         background-size: 354px 380px;
         background-repeat: no-repeat;
         position: relative;
         left: 502px;
         z-index: 5;

         .rankBg {
            width: 168px;
            height: 180px;
            position: absolute;
            top: 36px;
            left: 50%;
            margin-left: -84px;
         }

         .rankAva {
            width: 99px;
            height: 99px;
            border-radius: 50%;
            position: absolute;
            margin: 0 auto;
            top: 72px;
            left: 50%;
            margin-left: -49px;
         }

         .rankNum {
            font-size: 32px;
            font-weight: bold;
            text-align: center;
            color: #fff;
            position: absolute;
            top: 226px;
            width: 100%;
         }

         .rankName {
            font-size: 18px;
            text-align: center;
            color: #fff;
            position: absolute;
            top: 270px;
            width: 100%;
         }
      }

      .rank02 {
         width: 276px;
         height: 310px;
         background-image: url("../../../assets/lingyungeImages/pc/rank02.webp");
         background-position: center;
         background-size: 276px 310px;
         background-repeat: no-repeat;
         position: absolute;
         top: 90px;
         left: 300px;
         z-index: 4;

         .rankBg {
            width: 148px;
            height: 156px;
            position: absolute;
            top: 28px;
            left: 50%;
            margin-left: -74px;
         }

         .rankAva {
            width: 84px;
            height: 84px;
            border-radius: 50%;
            position: absolute;
            top: 56px;
            left: 50%;
            margin-left: -42px;
         }

         .rankNum {
            font-size: 28px;
            text-align: center;
            width: 100%;
            font-weight: bold;
            position: absolute;
            top: 192px;
            color: #fff;
         }

         .rankName {
            font-size: 16px;
            text-align: center;
            width: 100%;
            position: absolute;
            top: 230px;
            color: #fff;
         }
      }

      .rank03 {
         width: 276px;
         height: 310px;
         background-image: url("../../../assets/lingyungeImages/pc/rank02.webp");
         background-position: center;
         background-size: 276px 310px;
         background-repeat: no-repeat;
         position: absolute;
         top: 90px;
         left: 781px;
         z-index: 4;

         .rankBg {
            width: 148px;
            height: 156px;
            position: absolute;
            top: 28px;
            left: 50%;
            margin-left: -74px;
         }

         .rankAva {
            width: 84px;
            height: 84px;
            border-radius: 50%;
            position: absolute;
            top: 56px;
            left: 50%;
            margin-left: -42px;
         }

         .rankNum {
            font-size: 28px;
            text-align: center;
            width: 100%;
            font-weight: bold;
            position: absolute;
            top: 192px;
            color: #fff;
         }

         .rankName {
            font-size: 16px;
            text-align: center;
            width: 100%;
            position: absolute;
            top: 230px;
            color: #fff;
         }
      }

      .rank04 {
         width: 250px;
         height: 280px;
         background-image: url("../../../assets/lingyungeImages/pc/rank02.webp");
         background-position: center;
         background-size: 250px 280px;
         background-repeat: no-repeat;
         position: absolute;
         top: 120px;
         left: 98px;
         z-index: 3;

         .rankBg {
            width: 134px;
            height: 143px;
            position: absolute;
            top: 23px;
            left: 50%;
            margin-left: -67px;
         }

         .rankAva {
            width: 78px;
            height: 78px;
            border-radius: 50%;
            position: absolute;
            top: 49px;
            left: 50%;
            margin-left: -39px;
         }

         .rankNum {
            font-size: 24px;
            text-align: center;
            width: 100%;
            font-weight: bold;
            position: absolute;
            top: 170px;
            color: #fff;
         }

         .rankName {
            font-size: 16px;
            text-align: center;
            width: 100%;
            position: absolute;
            top: 200px;
            color: #fff;
         }
      }

      .rank05 {
         width: 250px;
         height: 280px;
         background-image: url("../../../assets/lingyungeImages/pc/rank02.webp");
         background-position: center;
         background-size: 250px 280px;
         background-repeat: no-repeat;
         position: absolute;
         top: 120px;
         left: 1009px;
         z-index: 3;

         .rankBg {
            width: 134px;
            height: 143px;
            position: absolute;
            top: 23px;
            left: 50%;
            margin-left: -67px;
         }

         .rankAva {
            width: 78px;
            height: 78px;
            border-radius: 50%;
            position: absolute;
            top: 49px;
            left: 50%;
            margin-left: -39px;
         }

         .rankNum {
            font-size: 24px;
            text-align: center;
            width: 100%;
            font-weight: bold;
            position: absolute;
            top: 170px;
            color: #fff;
         }

         .rankName {
            font-size: 16px;
            text-align: center;
            width: 100%;
            position: absolute;
            top: 200px;
            color: #fff;
         }
      }

      .swiperItem {
         width: 240px;
         height: 225px;
         border-radius: 4px;
         border: 1px solid;
         border-image: linear-gradient(rgba(250, 221, 176, 1),
               rgba(238, 182, 95, 1)) 50 50;
         background-color: rgba(0, 0, 0, 0.5);
         position: relative;
         display: inline-block;
         margin: 0 15px;
      }

      .swiperTips {
         width: 36px;
         height: 40px;
         background-image: url("../../../assets/lingyungeImages/pc/tips.webp");
         background-size: 36px 40px;
         position: absolute;
         top: 0;
         left: 20px;
         text-align: center;
         color: #fff;
         font-size: 20px;
         line-height: 30px;
         font-weight: bold;
      }

      .swiperBg {
         width: 112px;
         height: 112px;
         display: block;
         margin: 0 auto;
         margin-top: 20px;
      }

      .swiperAva {
         width: 92px;
         height: 92px;
         border-radius: 50%;
         position: absolute;
         left: 50%;
         margin-left: -46px;
         top: 30px;
      }

      .swiperText {
         font-weight: bold;
         text-align: center;
         font-size: 26px;
         color: #fff;
         margin: 15px 0 0 0;
      }

      .swiperText02 {
         font-size: 16px;
         color: #fff;
         text-align: center;
      }

      .pcTips {
         color: #fff;
         line-height: 24px;
         font-size: 16px;
      }
   }

   .alignCenter {
      transform: translate(-50%, -50%);
      position: absolute;
      top: 43%;
      left: 50%;
   }

   .alignBottom {
      position: absolute;
      bottom: 2%;
      left: 50%;
      margin-left: -680px;
   }

   .pt80 {
      padding-top: 80px;
   }

   .pt70 {
      padding-top: 70px;
   }

   .pt60 {
      padding-top: 60px;
   }
}
</style>
