<template>
  <div class="vote">
    <div class="vote-box" style="margin-top: 0.2rem">
      <div class="vote-project" v-for="(item, index) in list" :key="index">
        <div class="vote-project-hd">
          <h2 class="vote-project-title">{{ item.project }}:</h2>
          <p class="vote-project-text">
            您可选择{{ item.limit }}名候选人，已选择{{ item.checkedCount }}/{{ item.limit }}
          </p>
          <div class="collapse" @click="toggleCollapse(item)">
            <van-icon name="arrow-down" v-if="item.collapsed" />
            <van-icon name="arrow-up" v-else />
          </div>
        </div>
        <div class="vote-project-bd" v-show="!item.collapsed">
          <div class="vote-item" v-for="user in item.candidate" :key="user.id">
            <div class="vote-item-pic" @click="handleClickItem(user)">
              <img :src="user.photo" />
            </div>
            <div class="vote-item-content" @click="handleClickItem(user)">{{ `${user.num}号：${user.name}` }}</div>

            <div class="vote-like vote-like__active" @click="toggleCheck(user, item)" v-if="user.checked">
              <img src="../../assets/img/vote_liked.png" />已投
            </div>
            <div class="vote-like vote-like__disabled" v-else-if="item.checkedCount === item.limit">
              <img src="../../assets/img/vote_like_disabled.png" />已满
            </div>
            <div class="vote-like vote-like__primary" @click="toggleCheck(user, item)" v-else>
              <img src="../../assets/img/vote_like.png" />投票
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vote-button" @click="handSubmit">确认投票</div>
  </div>
</template>

<script>
import * as api from '@/api/vote'
export default {
  metaInfo: { title: '投票' },
  data() {
    return {}
  },
  computed: {
    city() {
      return this.$route.query.city
    },
    list() {
      return this.$store.state.voteList
    }
  },
  methods: {
    toggleCollapse(item) {
      item.collapsed = !item.collapsed
    },
    handleClickItem(item) {
      this.$router.push({ name: 'voteItem', params: { id: item.id } })
    },
    toggleCheck(item, parent) {
      parent.checkedCount = item.checked ? --parent.checkedCount : ++parent.checkedCount
      item.checked = !item.checked
    },
    handSubmit() {
      const ids = this.list.reduce((results, item) => {
        item.candidate.forEach(user => {
          user.checked && results.push(user.id)
        })
        return results
      }, [])
      if (!ids.length) {
        this.$notify('请投票')
        return
      }
      this.$router.push({ name: 'votePrimary' })
    },
    // 检测是否投票
    checkVote() {
      api.checkVote().then(response => {
        response.flag && this.$router.replace({ name: 'voteIndex' })
      })
    }
  },
  beforeMount() {
    this.checkVote()
    !this.list.length && this.$store.dispatch('getVoteList', this.city)
  }
}
</script>

<style scoped src="../../assets/css/vote.css"></style>
<style lang="scss" scoped>
.vote-project-hd {
  position: relative;
  padding: 0.1rem 0;
  border-bottom: 1px solid #ccc;
}
.collapse {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  padding: 10px;
}
.vote-project-title {
  font-size: 0.2rem;
  font-weight: 600;
  color: #222;
}
.vote-project-text {
  margin-top: 0.05rem;
  font-size: 0.14rem;
  color: #666;
}
.vote-item {
  display: flex;
  align-items: center;
  padding: 0.1rem 0;
  border-bottom: 1px solid #ccc;
}
.vote-item-pic {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 0.1rem;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.vote-item-content {
  flex: 1;
  font-size: 0.15rem;
  font-weight: 600;
  color: #222;
}
.vote-like {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.73rem;
  height: 0.24rem;
  border-radius: 0.12rem;
  font-size: 0.15rem;
  font-weight: 600;
  img {
    margin-right: 0.05rem;
    width: 0.16rem;
    height: 0.15rem;
  }
}
.vote-like__disabled {
  color: #999;
  background: #ccc;
}
.vote-like__active {
  color: #fff;
  background: #ccc;
}
.vote-like__primary {
  color: #fff;
  background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #c01540 100%);
}
</style>