<template>
  <div class="home_wrapper">
    <div class="header_main">
      投票
      <div class="return_btn" @click="onClickLeft"></div>
    </div>

    <div class="top_box">
      <p class="title">{{form.subjectName}}</p>
      <p class="label">{{form.description}}</p>
      <div>
        <p><i></i>{{form.anonymous == '1' ? '匿名':'实名'}}</p>
        <p><i></i>{{form.type == '1' ? '单选':'多选'}}</p>
        <p><i></i>{{form.nums}}人已参加</p>
      </div>
    </div>

    <van-cell
      :border="false"
      center
      v-for="(item,index) in form.options"
      :key="index"
    >
      <template #title>
        <div class="cell_title">
          <img src="../../assets/images/sunVillage_info/icon_vote.png" style="width: .5rem;margin-right: 2%;">
          <p>{{item.name}}</p>
        </div>
      </template>
      <template #label>
        <div class="cell_label">
          <van-progress :percentage="50" stroke-width="7" :show-pivot="false" />
          <p>{{item.num}}票</p>
          <p>87%</p>
        </div>
      </template>
    </van-cell>

    <div class="creatName">
      <p>截止时间：{{form.endTime}}</p>
      <p>发起人：{{form.promoters}}</p>
    </div>

  </div>
</template>

<script>
  import { getPoll , votePoll } from "@/api/sunVillage_info/fixedAssets";
  import Cookies from "js-cookie";
  import request from '@/utils/request'
  export default {
    name: "certificateList",
    data() {
      return {
        applicationList:[],
        applicationListSecond:[],
        assetStatusOptions:[],
        auditStatus:[],
        loading: false,
        finished: false,
        show: false,
        showTab: false,
        fileList:[],
        listLength:'0',
        searchInput:'',
        queryParams:{
          pageNum:1,
          pageSize:10,
          orderByColumn:'createTime',
          isAsc:'desc',
          year:'2022',
        },
        uploadFiles1:[],
        projectId:'',
        projectIndex:'',
        showBtn:true,
        form:{},
        radio:''
      };
    },
    created() {
      this.queryParams.bookId = Cookies.get('bookId');
      this.queryParams.deptId = Cookies.get('deptId');
      if (this.$route.query.type == 'code'){
        this.showBtn = false;
      }
      this.getDetail(this.$route.query.id);
    },
    methods: {
      getDetail(id){
        var _this = this;
        getPoll(id).then(response => {
          _this.form = response.data;
        });
      },
      goSubmit(){
        var _this = this;
        var data = {
          userId:JSON.parse(Cookies.get('user')).id,
          option:_this.radio
        }
        votePoll(_this.form.id,data).then(response => {
          _this.$notify({ type: 'success', message: '投票成功' });
          setTimeout(function(){
            history.back(-1);
          },2000)
        });
      },
    },
  }
</script>

<style scoped lang="scss">
  .home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    .header_main{
      height: 116px;
      background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
      background-size: 100% 100%;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      font-size: 36px;
      line-height: 116px;
      text-align: center;
      color: #fff;
      position: relative;
      .return_btn{
        width: 24px;
        height: 43.2px;
        background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
        background-size: 20px 36px;
        position: absolute;
        left: 38px;
        top: 36px;
      }
      .add_btn{
        width: 56.4px;
        height: 40.8px;
        background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
        background-size: 47px 34px;
        position: absolute;
        right: 38px;
        top: 36px;
      }
    }
    .top_box{
      padding: 22PX 7% 0PX;
      .title{font-size: .4rem;margin-bottom: 10PX;}
      .label{color: #878787;margin-bottom: 10PX;}
      div{
        display: flex;
        p{
          color: #1D6FE9;
          font-size: 14PX;
          &:nth-child(1){
            margin-right: 10PX;
            i{
              width: 10PX;
              height: 10PX;
              display: inline-block;
              margin-right: 5PX;
              background: url('../../assets/images/sunVillage_info/icon_sm.png') no-repeat;
              background-size: 100% 100%;
            }
          }
          &:nth-child(2){
            margin-right: 10PX;
            i{
              width: 10PX;
              height: 10PX;
              display: inline-block;
              margin-right: 5PX;
              background: url('../../assets/images/sunVillage_info/icon_sm.png') no-repeat;
              background-size: 100% 100%;
            }
          }
          &:nth-child(3){
            color: #878787;
            margin-left: auto;
            i{
              width: 10PX;
              height: 10PX;
              display: inline-block;
              margin-right: 5PX;
              background: url('../../assets/images/sunVillage_info/icon_cj.png') no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
    }
    .van-cell{
      width: 96%;
      margin: 0 auto;
      margin-top: 15PX;
      box-shadow: 5PX 5PX 2PX #ccc;
      border-radius: 10PX;
    }
    .cell_title{
      display: flex;
      align-items: center;
      .van-radio{
        margin-left: auto;
      }
    }
    .cell_label{
      display: flex;
      align-items: center;
      margin-top: 15PX;
      .van-progress{
        width: 70%;
      }
      p{
        margin-left: auto;
        &:nth-child(3){
          margin-left: 10PX;
        }
      }
    }
    .creatName{
      color: #878787;
      font-size: 14PX;
      display: flex;
      justify-content: space-between;
      width: 88%;
      margin: 15PX auto 30PX;
    }
    .van-button{
      width: 95%;
      margin: 0 auto;
      border-radius: 5PX;
    }
  }
</style>
