<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>
      </van-skeleton>


    </div>
    <div class="btn" @click="goSubmit" >进行投票</div>
    <div class="btn btn1" @click="goSee">查看投票情况</div>
    <div class="btn btn2 " @click="goAgentVote" v-if="isPermissionShow">代理投票</div>
    <van-action-sheet
        @select="onSelect"
        v-model="show"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
    />
  </div>
</template>

<script>
import { Dialog,Notify  } from 'vant';
export default {
  name: "voteDetial",
  data(){
    return {
      radio:'',
      list:[],
      loading:false,
      show: false,
      actions: [],
      isPermissionShow:false,
    }
  },
  mounted() {
    this.getVoteOptions()
    this.getProxyPermission()
    this.el = this.$el
  },

  methods:{
    getProxyPermission(){
      this.$api.getProxyPermission().then(res=>{
        this.isPermissionShow = res.content.have
      })
    },
    goAgentVote(){
      this.$router.push({name:'agentVoteDetial',query:this.$route.query})
    },
    onSelect(item){
      Dialog.confirm({
        title: '提示',
        message: '确认提交？提交后无法再修改提交结果。',
      })
          .then(() => {
            let params = {
              optionId:this.radio,
              houseId:item.houseId,
            }
            this.$api.voteItem(params).then(res=>{
              Notify({ type: 'success', message: '提交成功' });
            })
          })
          .catch(() => {
            // on cancel
          });

    },
    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 == ''){
        Notify({ type: 'warning', message: '请选择投票项' });
        return;
      }

      this.$api.getUserHouses({voteId:this.$route.query.id}).then(res=>{
        if(res.content.length == 0){
          Dialog.confirm({
            title: '提示',
            message: '用户暂时未绑定任何房产，请先绑定房产之后再进行投票',
          })
              .then(() => {
                this.$router.push({name:'binding'})
              })
              .catch(() => {
                // on cancel
              });
          return;
        }

        this.actions = res.content.map(x=>{
          return {
            ...x,
            name:x.houseName,
            disabled:!x.enabled
          }
        })
        this.show = true
      })



    },
  }
}
</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: #F4F5F6 ;
  color: #6C5DD3;
  //border-color: #6C5DD3;
  margin-top: 20px;
  //box-shadow:  0 0 50px #6C5DD3;
}
.btn2{
  background-color: white ;
  color: #6C5DD3;
  border-color: #6C5DD3;
  margin-top: 20px;
  box-shadow:  0 0 10px #6C5DD3;
}

</style>