<template>
  <div class="home-banner relative">
    <div class="pt-5">
      <img class="w-48 object-fill mx-auto" src="@/assets/home/banner-img.png" alt="">
    </div>

    <div
      v-if="!showPart"
      class="header-box w-full h-auto  flex flex-col items-center justify-center"
      :class="{ 'opacity-0': scrollHide }"
      >

      <app-btn v-if="status < 3" @btnClicked='attendActivity' text="立即报名" class=" bg-app-cyan text-app-blue-1 px-5"></app-btn>

      <p v-if="voteType === 1" class="text-center text-xs mb-2">距离本轮投票开始还有约</p>
      <p v-if="voteType === 2" class="text-center text-xs mb-2">距离本轮投票结束还剩约</p>
      <p v-if="voteType === 3" class="text-center text-xs mb-2">本轮投票已结束</p>
      <div class="px-10">
        <Timebox :times="timeStamp" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Timebox from '@/components/Timebox.vue'

export default Vue.extend({
  components: {
    Timebox,
    'app-btn':()=>import('@/components/common/Btn.vue')
  },
  name: 'HomeBanner',
  data() {
    return {
      canAttend: true,
      clientWidth: 0,
      clientHeight: 0,
      top: '50%',
      right: '4px'
    }
  },
  props: {
    showBtn: {
      type: Boolean,
      default: true
    },
    showPart:{
      type: Boolean
    },
    scrollHide: {
      type: Boolean,
      default: false
    },
    timeStamp: {
      type: String
    },
    voteType: {
      type: Number,
      default: 1
    },
    status: {
      type: Number
    }
  },
  methods: {
    attendActivity() {
      this.$emit('showAttendForm', true)
    },
  },
  mounted() {
    // const _now = new Date().getTime()
    // const range = +_now - +this.timeStamp
    // if (range )

  }

})
</script>

<style lang="css" scoped>



  input {
    outline: none;
  }

  .imgbtn {
    /* z-index: 10000; */
  }
</style>