<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="!canAttend " ref="imgbtn" class="fixed top-1/2 right-1 z-50 imgbtn" :style="{ top: top, right: right }" @click="attendActivity">
      <img class="w-16 h-16" src="@/assets/home/a-btn.png" alt="">
    </div>
    <!-- <template v-if="!scrollHide"> -->
    <div
    
      class="header-box w-full h-auto pb-12 flex flex-col items-center justify-center"
      :class="{ 'opacity-0': scrollHide }"
      >
      <button
        v-if="canAttend"
        class="apply-btn text-center text-xs font-medium rounded mt-2 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-10">
        <Timebox times="1633304684145" />
      </div>
    </div>
    <!-- </template> -->
    <div class="mt-3 w-full px-6 absolute bottom-0">
      <app-search></app-search>
    </div>
  </div>
</template>

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

export default Vue.extend({
  components: {
    Timebox,
     'app-search':()=>import('@/components/common/Search.vue')
  },
  name: 'HomeBanner',
  data() {
    return {
      voteType: 1,
      canAttend: true,
      clientWidth: 0,
      clientHeight: 0,
      top: '50%',
      right: '4px'
    }
  },
  props: {
    showBtn: {
      type: Boolean,
      default: true
    },
    scrollHide: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    attendActivity() {
      this.$emit('showAttendForm', true)
    },
    search() {
      console.log('run')
    },
    touchEvent() {
      this.clientWidth = window.innerWidth
      this.clientHeight = window.innerHeight
      window.onresize = () => {
        this.clientWidth = window.innerWidth
        this.clientHeight = window.innerHeight
      }
      window.onscroll = () => {
        this.clientWidth = window.innerWidth
        this.clientHeight = window.innerHeight
      }
      this.$nextTick(()=>{
        const div = this.$refs.imgbtn as any
        div.addEventListener("touchstart",(e: any)=>{
          e.stopPropagation();
          div.style.transition = 'none'
        });
        div.addEventListener("touchmove",(e: any)=>{
          e.preventDefault()
          e.stopPropagation()
          if (e.targetTouches.length === 1) {
            let touch = e.targetTouches[0]
            this.top = touch.clientY - 32 + 'px'
            this.right = this.clientWidth - touch.clientX - 32 + 'px'
            if(parseFloat(this.right) <= 0) {
              this.right = '0'
            } else if (parseFloat(this.right) > this.clientWidth - 64) {
              this.right = this.clientWidth - 64 + 'px'
            }
            if(parseFloat(this.top) <= 0) {
              this.top = '0'
            } else if (parseFloat(this.top) > this.clientHeight - 64) {
              this.top = this.clientHeight - 64 + 'px'
            }
          }
        },{ passive: false });
        div.addEventListener("touchend",(e: any)=>{
          e.stopPropagation()
          div.style.transition = 'all 0.3s'
          if(parseFloat(this.top) <= 0) {
            this.top = '0'
          } else if (parseFloat(this.top) > this.clientHeight){
            this.top = this.clientHeight - 64 + 'px'
          }
        })
      })
    }
  },
  mounted() {
    // this.touchEvent()
  },
  watch: {
    // showBtn(v: boolean) {
    //   if (v) {
    //     this.$nextTick(() => {
    //       this.touchEvent()
    //     })
    //   }
    // }
  }
})
</script>

<style lang="css" scoped>
  .home-banner {
    /* height: 360px; */
    transition: 0.3s ease-in-out;
  }
  .apply-btn {
    width: 100px;
    height: 30px;
    background: #4EE8F1;
    color: #110E4E;
  }

  input {
    outline: none;
  }

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