<template>
  <div class="vote">
    <!-- 投票完成 -->
    <template v-if="status === 2">
      <div class="vote-banner"><img src="../../assets/img/vote_banner.png" /></div>
      <div class="vote-box" style="margin-top: 0.2rem">
        <p>{{ announce }}</p>
      </div>
      <div class="vote-button" @click="goHome">回到首页</div>
    </template>

    <!-- 已投票 -->
    <template v-else-if="hasVote">
      <div class="vote-banner"><img src="../../assets/img/vote_banner.png" /></div>
      <h1 class="vote-tips">您已投票成功</h1>
      <div class="vote-button" @click="goHome">回到首页</div>
    </template>

    <!-- 投票结束 -->
    <template v-else-if="status === 0">
      <div class="vote-banner"><img src="../../assets/img/vote_banner.png" /></div>
      <h1 class="vote-tips">投票已截止，请等待公示</h1>
      <div class="vote-button" @click="goHome">回到首页</div>
    </template>

    <!-- 投票中 -->
    <template v-else>
      <div class="vote-banner"><img src="../../assets/img/vote_banner.png" /></div>
      <h1 class="vote-title">投票活动说明</h1>
      <div class="vote-box">
        <p>
          投票活动说明投票活动说明投票活动说明投票活动说明投票活动说明投票活动说明投票活动说明投票活动说明投票活动说明投票活动说明投票活动说明
        </p>
      </div>
      <div class="vote-button" @click="$router.push({ name: 'voteCity' })">我已知晓</div>
    </template>
  </div>
</template>

<script>
import * as api from '@/api/vote'
export default {
  metaInfo: { title: '投票' },
  data() {
    return {
      hasVote: false,
      status: 1,
      announce: ''
    }
  },
  methods: {
    getVoteStatus() {
      api.getVoteStatus().then(response => {
        this.status = response.status
        this.announce = response.announce || ''
      })
    },
    // 检测是否投票
    checkVote() {
      api.checkVote().then(response => {
        this.hasVote = response.flag
      })
    },
    goHome() {
      this.$router.replace('/')
    }
  },
  beforeMount() {
    this.getVoteStatus()
    this.checkVote()
  }
}
</script>

<style scoped src="../../assets/css/vote.css"></style>