<template>

    <div class="voteModel">
    <span class="title">
        投票详情:{{info.title}}
    </span>
      <span class="des">
        {{info.content}}
    </span>
      <div class="voteBox">
        <div class="label" v-for="(item,index) in options" :key="index">
          <van-circle v-model="item.percent" layer-color="#ebedf0" :rate="item.percent" :speed="100" color="#5DD8D0" :text="item.percent.toFixed(0) + '%'" />
          <span>{{ item.value }}</span>
        </div>
      </div>
      <van-cell class="van-cell" :title="item.value" icon="shop-o" v-for="(item,index) in options">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <span>{{item.quantity}}票</span>
      </van-cell>
<!--      <div class="suggestions">-->
<!--        <div class="sHeader">-->
<!--          <span>意见箱</span>-->
<!--        </div>-->
<!--        <div class="body">-->
<!--          <suggestionItem class="suggestionItem" v-for="(item,index) in suggestions" :key="index" :params="item"></suggestionItem>-->
<!--        </div>-->
<!--      </div>-->
      <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" >
        <div class="avatorBox">
          <img v-for="item in new Array(29)" class="avator" src="http://121.5.58.50:8088/sport.png" alt="">
        </div>
      </van-popup>
    </div>


</template>

<script>
import suggestionItem from "@/components/suggestionItem";
import scrollBox from "@/components/scrollBox";
export default {
  name: "voteModel",
  components:{
    suggestionItem,scrollBox
  },
  data() {
    return {
      currentRate: 33,
      show:false,
      options:[],
      info:{},
      page:1,
      pageCapacity:10,
      suggestions:[],
      hasNext:true,
      loading:false,
    };
  },
  mounted() {
    this.getVoteResult()
    // this.getSuggestion()
  },
  methods: {
    touchBottom(){
      this.page ++
      this.getSuggestion()
    },
    getSuggestion(){
      // if(!this.hasNext) return
      // this.loading = true
      // let params = {
      //   voteId:this.$route.query.id,
      //   page:this.page,
      //   pageCapacity:this.pageCapacity,
      // }
      // this.$api.getSuggestion(params).then(res=>{
      //   this.loading = false
      //   if(res.content.suggestions.length<10){
      //     this.hasNext = false
      //   }
      //   this.suggestions = [...this.suggestions,...res.content.suggestions]
      // })
    },
    getVoteResult(){
      this.$api.getVoteResult({voteId:this.$route.query.id}).then(res=>{
        this.options = res.content.items
        this.info = res.content
      })
    },
    text() {
      return this.currentRate.toFixed(0) + '%';
    },
  },

}
</script>

<style scoped lang="less">
.scroll{
  //height: calc(100% - 48px);
  height: 100%;
  overflow-y: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.voteModel/deep/.van-cell{
  //overflow: auto!important;
  overflow: visible;
}
.suggestions{
  //margin-top: 30px;
  width: calc(100% - 48px);
  padding: 24px;
  .suggestionItem{
    margin-top: 15px;
  }
}

.voteModel{
  //padding: 24px;
  height: 100%;
  .title{
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #01040D;
    line-height: 32px;
    display: inline-block;
    width: calc(100% - 48px);
    padding: 24px;
  }
  .des{
    display: inline-block;
    margin-bottom: 30px;
    width: calc(100% - 48px);
    padding: 0 24px;
  }
  .voteBox{
    display: flex;
    justify-content: space-around;
    padding: 24px;
    width: calc(100% - 48px);
    flex-wrap: wrap;
    .label{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
    }
    margin-bottom: 30px;
  }
  .avatorBox{
    padding: 30px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .avator{
      width: 50px;
      height: 50px;
      border-radius: 100%;
      margin-bottom: 10px;
    }
  }
}
</style>