<template>
  <div class="voteDetial">
    <span class="title">投票:{{ $route.query.title }}？</span>
    <span class="des">{{ $route.query.content }}</span>
    <div class="voteBox">
      <van-skeleton  :row="3" :loading="loading">
        <van-radio-group v-model="radio" :label-position="'left'" >
          <van-radio  class="van-radio" :name="item.id" checked-color="#5DD8D0" v-for="(item,index) in list" :key="index">{{ item.value }}</van-radio>
        </van-radio-group>
        <input class="input" type="text" placeholder="意见和建议" v-model="suggestion" >
      </van-skeleton>


    </div>
    <div class="btn" @click="goSubmit" >进行投票</div>
    <div class="btn btn1" @click="goSee">查看投票情况</div>
  </div>
</template>

<script>
import { Dialog,Notify  } from 'vant';
export default {
  name: "voteDetial",
  data(){
    return {
      radio:'',
      suggestion:'',
      list:[],
      loading:false
    }
  },
  mounted() {
    this.getVoteOptions()
  },
  methods:{
    getVoteOptions(){
      this.loading = true
      this.$api.getVoteOptions({voteId:this.$route.query.id}).then(res=>{
        this.loading = false
        this.list = res.content
      })
    },
    goSee(){
      this.$router.push({name:'voteModel',query:{id:this.$route.query.id}})
    },
    goSubmit(){
      if(this.radio == ''){
        return;
      }
      Dialog.confirm({
        title: '提示',
        message: '确认提交？提交后无法再修改提交结果。',
      })
          .then(() => {
            let params = {
              optionId:this.radio,
              suggestion:this.suggestion
            }
            this.$api.voteItem(params).then(res=>{
              Notify({ type: 'success', message: '提交成功' });
            })
          })
          .catch(() => {
            // on cancel
          });

    },
  }
}
</script>

<style scoped lang="less">
input{
  width: 299px;
  padding: 0 10px;
  height: 48px;
  background: #F4F5F6;
  border-radius: 8px;
  opacity: 0.8;
  border: none;
  outline: none;
}
.voteDetial{
  width: 100%;
  .title{
    display: inline-block;
    width: calc(100% - 48px);
    padding: 0 24px;
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #01040D;
    line-height: 36px;
    text-align: left;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .des{
    display: inline-block;
    width: calc(100% - 48px);
    padding: 0 24px;
    text-align: left;
    margin-bottom: 50px;
  }
  .voteBox{
    width: 319px;
    margin: 0 auto;
    .van-radio{
      //width: 319px;
      height: 48px;
      background: #F4F5F6;
      border-radius: 8px;
      opacity: 0.8;
      padding: 0 30px;
      margin-bottom: 15px;
    }
    margin-bottom: 50px;
  }
}
.btn1{
  background-color: white;
  color: #6C5DD3;
  border-color: #6C5DD3;
  margin-top: 20px;
  box-shadow:  0 0 3px #6C5DD3;
}

</style>