<template>
  <div class="flex flex-col">
   
      <div class="top bg-homeBanner bg-cover bg-center" ref='topBox'>
          <Banner :showPart='attendShow'></Banner>
      </div>
      <div class="bot w-11.5/12 mt-3  mx-auto" ref="botbox" v-if='!attendShow'>
          <app-search class=' w-11/12 mx-auto'></app-search>
          <div class='list-contianer border-2 border-app-blue-3 h-auto mx-auto mt-5 relative rounded-xl' ref='borderBox'>
              <div class='img-holder w-full absolute -top-4 '>
                  <div class=' absolute w-full top-2 text-center text-sm '>排行榜</div>
                 <img src="@/assets/home/rank-title.png" alt="" class="w-48 mx-auto ">
              </div>
              <div class='list w-11.5/12 mx-auto my-8 pb-12' @scroll="scrollStart" ref='scrollBox'>
                 <app-card2 class="mb-2" v-for="i in [1,2,3,4,5,6,7,8,9,10,11]" :key="i" />
              </div>
          </div>
      </div>
          <attend-form :attendShow="attendShow" @submitForm="submitForm" class='bot attend-form-contianer mt-5 overflow-y-scroll'/>

  </div>
</template>

<script lang="ts">
import Vue from "vue"
import {TimelineLite, Power2} from 'gsap'
import Banner from '@/components/home/Banner.vue'
export default Vue.extend({
  name: "Home",
  data() {
    return{
      anima:null as any,
      scrollArr:[] as any[],
      attendShow: true,
    }
  },
  mounted(){
    const {topBox,botBox,borderBox,scrollBox} = this.$refs
    this.anima = new TimelineLite()
    console.log(this.anima);
    this.anima.to(botBox,0,{css:{height:"calc(100vh - 190px)"},ease:Power2.easeInOut})
    this.anima.to(borderBox,0,{css:{height:"calc(100vh - 140px)"},ease:Power2.easeInOut})
    this.anima.to(scrollBox,0,{css:{height:"calc(100vh - 160px)"},ease:Power2.easeInOut})
    this.anima.to(topBox,0.6,{css:{height:"0px", visibility:'hidden'},ease:Power2.easeInOut,delay:0.1},'>-0.1')
    this.anima.pause()
  }, 
  methods:{
    scrollStart(e:any){
      let poisition = e.target.scrollTop
      this.scrollArr.push(poisition)
      console.log(poisition);
      
      let l = this.scrollArr.slice(-2)
      if(e.target.scrollTop > 90 && l[0]<l[1]){        
        this.anima.play()
      }else if(e.target.scrollTop <= 320 && l[0]>l[1]){
        this.anima.reverse()
      } 
    },
    submitForm(){
      console.log(1);
    }
  },
  components:{
    Banner,
    'app-search':()=>import('@/components/common/Search.vue'),
    "app-card2":()=>import('@/components/Card_two.vue'),
    'attend-form':()=>import('@/components/home/AttendForm.vue')
  }
});
</script>

<style scoped>
.list-contianer{
  height: calc(100vh - 370px)
}
.attend-form{
  height: calc(100vh - 240px)
}
</style>