<template>
  <div class="vote">
    <div class="vote-city">
      <h1>请选择您所在的区域</h1>
      <ul>
        <li v-for="item in cityList" :key="item" @click="handleClick(item)">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import * as api from '@/api/vote'
export default {
  metaInfo: { title: '投票' },
  data() {
    return {
      cityList: []
    }
  },
  methods: {
    getCity() {
      api.getCityList().then(response => {
        this.cityList = response
      })
    },
    handleClick(city) {
      this.$store.dispatch('getVoteList', city)
      this.$router.push({ name: 'voteChoose', query: { city } })
    }
  },
  beforeMount() {
    this.getCity()
  }
}
</script>

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

<style lang="scss" scoped>
.vote-city {
  padding: 0 0.2rem;
  h1 {
    padding: 0.65rem 0;
    font-size: 0.18rem;
    text-align: center;
  }
  li {
    margin-bottom: 0.4rem;
    font-size: 0.2rem;
    font-weight: 600;
    line-height: 0.5rem;
    text-align: center;
    background: #fff;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.05);
    border-radius: 0.1rem;
    cursor: pointer;

    &:hover,
    &:active {
      color: #fff;
      background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #c01540 100%);
    }
  }
}
</style>