<template>
  <div v-show="isShow" >
    <div class=" relative  w-11/12  mx-auto ">
      <div class="rank-title absolute left-1/2 -top-4 transform -translate-x-1/2">
        <p class="text-center text-lg leading-10">排行榜</p>
      </div>
      <div class="lines  border border-app-blue-3 border-solid rounded-lg" style="background: rgb(25, 2, 92)" ref="lines">
        <div class="overflow-y-scroll h-full" @scroll="scrollEvent">
          <div class="rank-lines h-full px-3 flex flex-col items-center">
            <template v-if="ranklist.length > 0" class="">
              <router-link class="block text-white" v-for="item in ranklist" :key="item.id" :to="{ path: '/Home/CommunityVote', query: { id: item.id }}">
                <Cardtwo class="mb-2.5" />
              </router-link>
            </template>
            <div v-else class="w-full h-full flex flex-col items-center justify-center">
              <img class="w-28 h-28" src="@/assets/home/empty.png" alt="empty">
              <p class="text-sm text-center mt-3">暂无报名!</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Cardtwo from '@/components/Card_two.vue'
import Vue from 'vue'
import {TimelineLite, Power3} from 'gsap'
export default Vue.extend({
  components: { Cardtwo },
  name: 'RankList',
  data() {
    return {
      anima: null as any,
      scrollArr: [] as any[],
      directionUp:false
    }
  },
  props: {
    ranklist: {
      type: Array
    },
    isShow: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    scrollEvent(e: any) {

      let poisition = e.target.scrollTop
      this.scrollArr.push(poisition)
      let l = this.scrollArr.slice(-2)
      if(poisition > 90 && l[0]<l[1]){    
        this.directionUp = false    
        this.anima.play()
      }else if(poisition <= 120 && l[0]>l[1]){
        this.directionUp = true
        this.anima.reverse()
      } 
    },
     initialGASP() {
      const {lines} = this.$refs
      const top = this.$parent.$refs.banner as any
      const topBox = top.$el
      const img = topBox.querySelector('.logo') as any
      const header = topBox.querySelector('.header-box') as any
      this.anima = new TimelineLite({duration:0.1,ease:Power3.easeInOut})
      this.anima.to(lines,{css:{height:"calc(100vh - 220px)"}})
      this.anima.to(topBox,{css:{height:"205px"}})
      this.anima.to(header,{css:{transform: 'scale(0)', transformOrigin: '50% 0'}})
      this.anima.to(img,{css:{transform: 'scale(0.7)', transformOrigin: '50% 50%'}})
    
      this.anima.pause()
    }
  },
  mounted() {
    this.initialGASP()
  },
  beforeDestroy() {
    console.log(111111111111111111)
    this.anima = null
    this.scrollArr = []
  },
  watch: {
    isShow(n) {
      if (!n) {
        this.anima = null
        this.scrollArr = []
      } else {
        this.$nextTick(() => {
          console.log('run')
          this.initialGASP()
        })
      }
    }
  }
})
</script>

<style scoped>
  .rank-title {
    width: 220px;
    height: 40px;
    /* line-height: 40px; */
    background-image: url(../../assets/home/rank-title.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .lines {
    height: calc(100vh - 400px);
    padding-top: 30px;
    overflow: hidden;
    /* transition: 0.3s ease-in-out; */
  }
</style>