<template>
  <div class="home_wrapper">
    <div class="header_main">
      新增投票
      <div class="return_btn" @click="onClickLeft"></div>
      <div class="add_btn"></div>
    </div>
    <van-form @submit="onSubmit">
      <div class="list_main">

        <van-field required label="主题" v-model="form.subjectName" placeholder="请输入主题" :rules="[{ required: true , message:'请输入主题' }]" input-align="right" :border="false" />

        <van-field label="描述" v-model="form.description" placeholder="请输入描述" input-align="right" :border="false" />

        <van-field label="规则" v-model="form.rules" placeholder="请输入规则" input-align="right" :border="false" />

        <van-field name="radio" label="投票类型" input-align="right" :border="false">
          <template #input>
            <van-radio-group v-model="form.type" direction="horizontal">
              <van-radio name="1">单选</van-radio>
              <van-radio name="2">多选</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field
          readonly
          clickable
          label="开始时间"
          placeholder="请选择"
          v-model="form.startTime"
          @click="showStartTime = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
          required
          :border="false"
          :rules="[{ required: true , message:'请选择开始时间' }]"
        />
        <van-popup v-model="showStartTime" position="bottom">
          <van-datetime-picker
            v-model="startTime"
            type="datetime"
            title="选择开始时间"
            @confirm="onConfirmOpenNy"
            @cancel="showStartTime = false"
          />
        </van-popup>

        <van-field
          readonly
          clickable
          label="结束时间"
          placeholder="请选择"
          v-model="form.endTime"
          @click="showEndTime = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
          required
          :border="false"
          :rules="[{ required: true , message:'请选择结束时间' }]"
        />
        <van-popup v-model="showEndTime" position="bottom">
          <van-datetime-picker
            v-model="endTime"
            type="datetime"
            title="选择结束时间"
            @confirm="onConfirmOpenEndTime"
            @cancel="showEndTime = false"
          />
        </van-popup>

        <van-field label="发起人/单位" v-model="form.promoters" placeholder="请输入发起人/单位" input-align="right" :border="false" />

        <van-field name="radio" label="是否匿名" input-align="right" :border="false">
          <template #input>
            <van-radio-group v-model="form.anonymous" direction="horizontal">
              <van-radio name="Y">是</van-radio>
              <van-radio name="N">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <p class="tit">投票选项</p>

        <div style="margin-bottom: 10PX;">
          <van-field v-for="(item,index) in form.options" :key="index" required :rules="[{ required: true , message:'请输入选项名称' }]" :label="'选项'+(index+1)" v-model="item.name" placeholder="请输入选项" input-align="right" :border="false" />
        </div>
        <van-button plain hairline block icon="plus" type="info" native-type="button" @click="addOptions">增加投票选项</van-button>

      </div>

      <div style="margin: 16px auto;width: 50%;">
        <van-button round block type="primary" native-type="submit">
          保存
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
  import { commonUpload , addPoll } from "@/api/sunVillage_info/fixedAssets";
  import Cookies from "js-cookie";
  import request from '@/utils/request'
  export default {
    name: "certificateList",
    data() {
      return {
        showStartTime:false,
        showEndTime:false,
        form:{
          startTime:this.format(new Date(),'yyyy-MM-dd HH:mm:ss'),
          endTime:this.format(new Date(),'yyyy-MM-dd HH:mm:ss'),
          type:'1',
          anonymous:'Y',
          status:'2',
          options:[{name:''}]
        },
        openPic:[],
        fileList:[],
        fileList1:[],
        startTime:new Date(),
        endTime:new Date(),
        type:'',
        openFile:[],
        openFileList:[],
        queryParams:{
          bookId:'',
          deptId:'',
        },
        openFile2:[],
        openPic2:[],
      };
    },
    created() {
      this.queryParams.bookId = Cookies.get('bookId');
      this.queryParams.deptId = Cookies.get('deptId');
    },
    methods: {
      addOptions(){
        var that = this;
        let array = that.form.options.filter(function (e) { return e.name == ""; });
        console.log(array);
        if (array.length>0){
          that.$toast('请勿添加多个空选项！');
        }else{
          that.form.options.push({name:''})
        }
      },
      onSubmit(){
        var that = this;
        addPoll(that.form).then((r1) => {
          if (r1.code == 200){
            that.$notify({ type: 'success', message: '新增成功' });
            setTimeout(function(){
              history.back(-1);
            },2000)
          }
        })
      },
      onConfirmOpenNy(data){
        this.form.startTime = this.format(data,'yyyy-MM-dd HH:mm:ss');
        this.startTime = data;
        this.showStartTime = false;
      },
      onConfirmOpenEndTime(data){
        this.form.endTime = this.format(data,'yyyy-MM-dd HH:mm:ss');
        this.endTime = data;
        this.showEndTime = false;
      },
    },
  }
</script>

<style scoped lang="scss">
  /deep/ .van-button--primary{
    background: url("../../assets/images/sunVillage_info/btn_bg.png") no-repeat;
    background-size: 100% 100%;
    border: none;
  }
  .van-radio:last-child{
    margin-right: 0;
  }
  .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;
      }
    }
    .release_head{
      height: 90px;
      padding:0 23px;
      display: flex;
      align-items: center;
      font-size: 26px;
      color: #929292;
      .people{
        flex: 1;
        display: flex;
        align-items: center;
        .icon{
          width: 24px;
          height: 21px;
          background: url('../../assets/images/sunVillage_info/details_icon_1.png') no-repeat;
          background-size: 100% 100%;
          display: block;
          margin-right: 8px;
        }
      }
      .time{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content:flex-end;
        .icon{
          width: 25px;
          height: 25px;
          background: url('../../assets/images/sunVillage_info/details_icon_2.png') no-repeat;
          background-size: 100% 100%;
          display: block;
          margin-right: 8px;
        }
      }
    }
    .release_conetnt{
      padding:0 22px;
      font-size: 32px;
      color: #252525;
      line-height: 44px;
      img{
        max-width: 100%;
        margin-bottom: 16px;
      }
      p{
        margin-bottom: 16px;
      }
    }
    .list_main{
      padding:25px;
      background: #ffffff;
      width: 94%;
      margin: 25px auto 0;
      border-radius: 15PX;
      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
    }
    .tit{
      font-size: 16PX;
      padding: 15PX 10PX;
    }
    /deep/ .van-cell{
      padding-left: 0!important;
      padding-right: 0!important;
      padding-bottom: 0!important;
      &:nth-child(1){
        padding-top: 0;
      }
    }
    /deep/ .van-field__label{
      padding-left: 10PX;
      width: auto;
      display: flex;
      align-items: center;
    }
    /deep/ .van-cell--required::before{
      left: 0PX;
    }
    /deep/ .van-field__error-message{
      display: none;
    }
  }
</style>
