<template>
  <div class="home-banner">
    <div v-if="showBtn" class="mt-6 w-full flex flex-col items-center justify-center">
      <img class="w-60" src="@/assets/home/banner-img.png" alt="">
      <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-8">
        <Timebox times="1633304684145" />
      </div>
      <div class="mt-3 w-full px-6">
        <Input class="xs-input" placeholder="请输入社区名称/ID" @pressEnter="search">
          <div slot="addonAfter" @click="search">
            <app-icon customize size="20px" type='icon-sousuo'></app-icon>
          </div>
        </Input>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Timebox from '@/components/Timebox.vue'
import AppIcon from '@/components/common/Icon.vue'
import { Input } from 'ant-design-vue'
export default Vue.extend({
  components: {
    Timebox,
    AppIcon,
    Input
  },
  name: 'HomeBanner',
  data() {
    return {
      voteType: 1,
      canAttend: false
    }
  },
  props: {
    showBtn: {
      type: Boolean,
      default: true
    },
  },
  methods: {
    attendActivity() {
      this.$emit('showAttendForm', true)
    },
    search() {
      console.log('run')
    }
  }
})
</script>

<style lang="css" scoped>
  .home-banner {
    min-height: 240px;
    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;
  }

  >>> .ant-input {
    width: 100%;
    height: 35px;
    color: #fff;
    border-radius: 40px;
    font-size: 12px;
    border: 1px solid #5053CE;
    border-right: none;
    background: transparent;
    outline: none;
  }

  >>> .ant-input-group-addon {
    height: 35px;
    border: 1px solid #5053CE;
    border-left: none;
    border-radius: 0 40px 40px 0;
    background: transparent;
  }

  input {
    outline: none;
  }
</style>