<template>
  <div class="home flex flex-col relative">
    <banner ref="banner" :show-btn="showBtn" @showAttendForm="showAttendForm" :scrollHide="scrollHide" />
    <attend-form :attendShow="attendShow" @submitForm="submitForm"/>
    <rank-list ref="ranks" :isShow="isShow" :ranklist="rankList"/>
  </div>
</template>

<script lang="ts">
import Vue from "vue"
import Banner from '@/components/home/Banner.vue'
import AttendForm from '@/components/home/AttendForm.vue'
import RankList from '@/components/home/RankList.vue'
// import {TimelineLite, Power2} from 'gsap'
export default Vue.extend({
  components: {
    Banner,
    AttendForm,
    RankList
  },
  name: "Home",
  data() {
    return {
      showBtn: true,
      attendShow: false,
      isShow: true,
      scrollHide: false,
      rankList: [
        {
          id: 1
        },
        {
          id: 2
        },
        {
          id: 3
        },
        {
          id: 4
        },
        {
          id: 5
        },
        {
          id: 6
        }
      ]
    };
  },
  methods: {
    showAttendForm(v : boolean) {
      this.attendShow = v
      this.showBtn = !v
      this.isShow = !v
      const ref = this.$refs.banner as any
      const dom = ref.$el as any
      const img = dom.querySelector('.logo')
      img.style.transform = 'scale(1)'
      dom.style.height = 'auto'
    },
    submitForm(v : boolean) {
      this.attendShow = v
      this.showBtn = !v
      this.isShow = !v
      const ref = this.$refs.banner as any
      const ranks = this.$refs.ranks as any
      const dom = ref.$el as any
      const _dom = ranks.$refs.lines as any
      dom.style.maxHeight = '360px'
      this.$nextTick(() => {
        _dom.children[0].scrollTop = 0
      })
     
      // request
      // ...
    },
  },
  mounted() {
  }
});
</script>

<style scoped>
  .home {
    background-image: url(../../assets/home/banner.png);
    background-position-x: 50%;
    background-position-y: 0%;
    background-size: 100%;
    background-repeat: no-repeat;
  }
</style>
