<template>
  <div class="home-banner">
    <div v-if="showBtn" class="mt-56 flex flex-col items-center justify-center">
      <button
        v-if="canAttend"
        class="apply-btn text-center text-xs font-medium rounded mb-4"
        @click="attendActivity"
      >开始报名</button>
      <p v-if="voteType === 1" class="text-center text-sm mb-3">距离本轮投票开始还有约</p>
      <p v-if="voteType === 2" class="text-center text-sm mb-3">距离本轮投票结束还剩约</p>
      <p v-if="voteType === 3" class="text-center text-sm mb-3">本轮投票已结束</p>
      <div class="px-8">
        <timebox times="1633304684145" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Timebox from '@/components/Timebox.vue'
import Vue from 'vue'
export default Vue.extend({
  components: { Timebox },
  name: 'HomeBanner',
  data() {
    return {
      voteType: 1,
      canAttend: true
    }
  },
  props: {
    showBtn: {
      type: Boolean,
      default: true
    },
  },
  methods: {
    attendActivity() {
      this.$emit('showAttendForm', true)
    }
  }
})
</script>

<style scoped>
  .home-banner {
    min-height: 280px;
    background-image: url(../../assets/home/banner.png);
    background-position-x: 50%;
    background-position-y: 0%;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .apply-btn {
    width: 100px;
    height: 30px;
    /* margin-top: 210px; */
    background: #4EE8F1;
    color: #110E4E;
  }
</style>