<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="$emit('showAttendForm', true)"
        text="立即报名"
        class="bg-app-cyan text-app-blue-1 px-5"
      ></app-btn>
      <p class="text-center text-xs mb-2">{{ states[voteType] }}</p>
      <!-- <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";
import { VoteStateEnum } from '@/types/VoteState'

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",
    };
  },
  computed: {
    states(): any {
      const stateObj = {
        [VoteStateEnum.START]: '距离本轮投票开始还有约',
        [VoteStateEnum.PENDING]: '距离本轮投票结束还剩约',
        [VoteStateEnum.END]: '本轮投票已结束'
      }
      return stateObj
    }
  },
  props: {
    showPart: {
      type: Boolean,
    },
    scrollHide: {
      type: Boolean,
      default: false,
    },
    timeStamp: {
      type: String,
    },
    voteType: {
      type: Number,
      default: 1,
    },
    status: {
      type: Number,
    },
  },
});
</script>

<style lang="css" scoped>
input {
  outline: none;
}

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