<template>
  <div class="flex flex-col">
    <div class=" h-260px bg-squareBanner bg-center bg-cover bg-transparent  bg-opacity-10 relative" ref="topBox">
      <div class="flex flex-col justify-center items-center py-12" ref="textBox">
        <img src="@/assets/squareBanner-text.png" alt="">
      </div>
      <div class='w-full  absolute bottom-3 '>
          <div class=' w-11/12 mx-auto h-10 py-3  text-white'>
                <app-search></app-search>
          </div>
      </div>
    </div>
    <div class="list-contianer w-11/12 mx-auto"  >
        <div class="sub-title flex items-center justify-between py-5">
          <div>投票列表</div>
          <div @click="doFilter"><app-icon type="icon-shaixuan" customize color=' text-white' ></app-icon></div>
        </div>
        <div class="list w-full" @scroll="scrollStart" ref="botBox">
          <router-link class="text-white" to="/Square/SquareVote">
            <app-card class=" mb-2"></app-card>
          </router-link>
          <router-link class="text-white" to="/Square/SquareDetails">
            <app-card class=" mb-2"></app-card>
          </router-link>
          <app-card class=" mb-2"></app-card>
          <app-card class=" mb-2"></app-card>
          <app-card class=" mb-2"></app-card>
          <app-card class=" mb-2"></app-card>
          <app-card2></app-card2>
          <div class="list-mergeup p-18"></div>
        </div>
    </div>
  </div>
</template>

<script lang="ts">

import Vue from "vue";
import {TimelineLite, Power2} from 'gsap'
/// <reference path="tween.d.ts"/>

export default Vue.extend({
  name: "Square",
  data() {
    return {
      anima:null as any,
      scrollArr:[] as any[]
    };
  },
  mounted(){
    const {topBox,botBox,textBox} = this.$refs
    this.anima = new TimelineLite()
    this.anima.to(botBox,0,{css:{height:"calc(100vh - 190px)"},ease:Power2.easeInOut})
    this.anima.to(textBox,0.1,{opacity:0,ease:Power2.easeInOut})
    this.anima.to(topBox,0.6,{css:{height:"50px"},ease:Power2.easeInOut,delay:0.1},'>-0.3')
    this.anima.pause()
 
  }, 
  components:{
    'app-icon':()=>import('@/components/common/Icon.vue'),
    'app-card':()=>import('@/components/Card.vue'),
    'app-card2':()=>import('@/components/Card_two.vue'),
    'app-search':()=>import('@/components/common/Search.vue')
  },
  methods:{
    doFilter(){
      console.log(123);
      
    },
     search() {
      console.log('run')
    },
    scrollStart(e:any){
      let poisition = e.target.scrollTop
      this.scrollArr.push(poisition)
      let l = this.scrollArr.slice(-2)
      if(e.target.scrollTop > 320 && l[0]<l[1]){        
        this.anima.play()
      }else if(e.target.scrollTop <= 320 && l[0]>l[1]){
        this.anima.reverse()
      } 
    }
  }

});
</script>

