<template>
  <div class="flex flex-col">
    <banner :show-btn="showBtn" @showAttendForm="showAttendForm" />
    <attend-form :attendShow="attendShow" @submitForm="submitForm"/>
    <rank-list :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'

export default Vue.extend({
  components: {
    Banner,
    AttendForm,
    RankList
  },
  name: "Home",
  data() {
    return {
      showBtn: true,
      attendShow: false,
      isShow: true,
      rankList: [
        {
          id: 1
        },
        {
          id: 2
        },
        {
          id: 3
        },
        {
          id: 4
        },
        {
          id: 5
        },
      ]
    };
  },
  methods: {
    showAttendForm(v : boolean) {
      this.attendShow = v
      this.showBtn = !v
      this.isShow = !v
    },
    submitForm(v : boolean) {
      this.attendShow = v
      this.showBtn = !v
      this.isShow = !v
      // request
      // ...
    }
  }

});
</script>
