<template>
  <div class="flex flex-col">
      <div class="top bg-homeBanner bg-cover bg-center" ref='topBox'>
          <Banner :showPart='attendShow' @showAttendForm="showAttendForm" :timeStamp="timeStamp" :voteType="voteType" :status="status"></Banner>
      </div>
      <div class="bot w-11.5/12 mt-3  mx-auto" ref="botbox" v-if='!attendShow'>
          <!-- <app-search v-if='showSearch' class=' w-11/12 mx-auto' @search="search"></app-search> -->
          <app-search class=' w-11/12 mx-auto' @search="search"></app-search>
          <div class='border-2 border-app-blue-3 h-auto mx-auto mt-5 relative rounded-xl' ref='borderBox' :class="[ status < 3 ? 'list-contianer' : 'list-contianer1']">
          <!-- <div class='border-2 border-app-blue-3 h-auto mx-auto mt-5 relative rounded-xl' ref='borderBox' :class="[lists.length > 0 ? status < 3 ? 'list-contianer' : 'list-contianer1' : 'list-none']"> -->
              <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='w-11.5/12 mx-auto my-8 pb-2' @scroll="scrollStart" ref='scrollBox' :class="[ status < 3 ? 'list1' : 'list11' ]">
              <!-- <div class='w-11.5/12 mx-auto my-8 pb-2' @scroll="scrollStart" ref='scrollBox' :class="[lists.length > 0 ? status < 3 ? 'list1' : 'list11' : 'list1-none']"> -->
                <template v-if="lists.length > 0">
                  <div v-for="(i, index) in lists" :key="index" @click="goVote(i.id)">
                    <app-card2 class="mb-2" :cardContent="i" :status="status" />
                  </div>
                  <div class='h-1'></div>
                </template>
                <template v-else>
                  <div 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>
                </template>
              </div>
          </div>
      </div>
      <attend-form :attendShow="attendShow" @submitForm="submitForm" :voteId="voteId" class='bot attend-form-contianer mt-5 overflow-y-scroll'/>
  </div>
</template>

<script lang="ts">
import Vue from "vue"
import {TimelineLite, Power2, CSSPlugin,gsap } from 'gsap'
import Banner from '@/components/home/Banner.vue'
import { service } from '@/service/index'
import { Toast } from "vant"
gsap.registerPlugin(CSSPlugin)
export default Vue.extend({
  name: "Home",
  data() {
    return{
      anima:null as any,
      scrollArr:[] as any[],
      attendShow: false,
      showSearch:false,
      lists: [],
      copy: [],
      voteId: '',
      timeStamp: '',
      status: 0,
      voteType: 1,
      timer: 0,
      res: {} as any,
      cancelAjax: null as any
    }
  },
  mounted(){
    this.getList()
    this.initAnima()
    this.createInterval(7000)
  },
  watch: {
    $route(o) {
      if (o.path === '/Home') {
        this.getList()
      }
    }
  },
  methods:{
    createInterval(waiter: number) {
      if (this.timer) clearInterval
      this.timer = setInterval(() => {
        if (+this.timeStamp <= Date.now()) {
          this.getList()
        }
      }, waiter)
    },
    initAnima() {
      if (this.anima) this.anima = null
      const {topBox,botBox,borderBox,scrollBox} = this.$refs
      this.anima = new TimelineLite()
      this.anima.to(botBox,0.1,{css:{height:"calc(100vh - 190px)"},ease:Power2.easeInOut})
      this.anima.to(borderBox,0.1,{css:{height:"calc(100vh - 140px)"},ease:Power2.easeInOut})
      this.anima.to(scrollBox,0.1,{css:{height:"calc(100vh - 180px)"},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()
    },
    scrollStart(e:any){
      let poisition = e.target.scrollTop
      this.scrollArr.push(poisition)
      let l = this.scrollArr.slice(-2)
      if(e.target.scrollTop > 90 && l[0]<l[1]){
        if (e.target.scrollHeight - 90 < window.innerHeight - 140) return
        this.anima.play()
        this.showSearch = true
      }else if(e.target.scrollTop <= 90 && l[0]>l[1] && l[1]){
        this.anima.reverse()
        this.showSearch = false
      }
      // console.log(this.anima)
    },
    search(v: any) {
      this.lists = []
      let list = JSON.parse(JSON.stringify(this.copy))
      list = list.filter((item: { name: any; id: any }) => (item.name).indexOf(v) > -1 || item.id === v)
      this.$nextTick(() => {
        this.lists = list
      })
    },
    goVote(id: string) {
      this.$router.push({ path: '/Home/CommunityVote', query: {optionId: id, voteID: this.voteId}})
    },
    submitForm(v: boolean){
      this.attendShow = false
      if (v) {
        this.getList()
      }
      this.$nextTick(() => {
        this.initAnima()
      })
    },
    showAttendForm(v: boolean) {
      if (!this.res) {
        Toast('当前时间暂无活动')
        return
      }
      ((this.$refs.topBox as any).style as any).height = 'auto'
      this.attendShow = v
      // this.$router.push({ path: '/Initiate', query: { isFounder: '3', voteId: this.voteId }})
    },
    getList(v?: string, vid?: string) {
      // if (typeof this.cancelAjax === 'function') {
      //   console.log(this.cancelAjax)
      //   this.cancelAjax()
      // }
      service.voteDetails({
        execer: "user.p.szhtest.rankvote",
        funcName: "GetRankVoteInfo",
        payload: {
          optionId: v,
          voteID: vid
        }
      }).then(res => {
        if (res.data.error != null) {
          if (this.timer) clearInterval(this.timer)
          return
        }
        this.res = res.data.result
        this.status = res.data.result?.status || 0
        this.lists = res.data.result?.voteOptions || []
        this.copy = res.data.result?.voteOptions || []
        this.lists.forEach((item: any) => {
          item.description = item.desc
        })
        this.voteId = res.data.result.ID
        const end = res.data.result?.endHeight
        const start = res.data.result?.startHeight
        // 
        if (this.status && this.status === 3) {
          if (this.timer) clearInterval(this.timer)
        }
        service.getHeight().then(res => {
          const v = res.data.result.mainHeight
          if (+start > v) {
            this.voteType = 1
            this.timeStamp = res.data.result.mainBlockTime * 1000 + (+start - v) * 5000 + ''
          } else if (+end > v) {
            this.voteType = 2
            this.timeStamp = res.data.result.mainBlockTime * 1000 + (+end - v) * 5000 + ''
          } else {
            this.voteType = 3
            this.timeStamp = res.data.result.mainBlockTime * 1000 + (+end - v) * 5000 + ''
          }
          // this.timeStamp = Date.now() + 10000 + ''
          // this.createInterval(7000)
        })
      }).catch(() => {
        if (this.timer) clearInterval(this.timer)
      })
    }
  },
  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 - 400px)
}
.list-contianer1{
  height: calc(100vh - 340px)
}
.list-none {
  height: calc(100vh - 400px) !important
}
.attend-form{
  height: calc(100vh - 160px)
}

.list1 {
  height: calc(100vh - 445px);
  overflow-y: scroll;
}
.list11 {
  height: calc(100vh - 375px);
  overflow-y: scroll;
}
.list1-none {
  height: calc(100vh - 400px) !important;
}
</style>