<template>
    <div class="app-container">
      <van-nav-bar
        left-arrow
        fixed
        placeholder
        @click-left="$router.back(-1)"
      >
        <template #title>
          <p style="font-weight: bold;">添加任务下发</p>
        </template>
      </van-nav-bar>
      <div class="main_box">
        <van-form ref="_Form">
        <van-row type="flex" justify="space-between" align="center" style="margin-bottom: 5%;">
          <van-col span="12" style="font-size: 14px;color:#333333">截止上报时间</van-col>
          <van-col span="12">
            <van-field style="line-height: 0" clickable v-model="queryParams.reportDeadline" label-width="auto" placeholder="选择日期" @click="showApplyTime = true" :rules="[{ required: true }]" required>
              <template #label>
                <van-icon name="notes-o" size="20"/>
              </template>
            </van-field>
            <van-calendar v-model="showApplyTime" @confirm="onConfirmApplyTime" />
          </van-col>
        </van-row>

        <vue-html5-editor :content="queryParams.title" @change="updateData" :height="500"></vue-html5-editor>
        </van-form>
        <div style="padding: 16px 0;" v-if="allowCUD">
          <van-row>
            <van-col span="12" align="center">
              <van-button type="info" color="#B4B0B0" native-type="submit" class="submitButton"  @click="goBack">取<i style="margin-right: 1em;"></i>消</van-button>
            </van-col>
            <van-col span="12" align="center">
              <van-button type="info" native-type="submit" class="submitButton" @click="goAdd">保<i style="margin-right: 1em;"></i>存</van-button>
            </van-col>
          </van-row>
          <div class="clear"></div>
        </div>
      </div>
    </div>
</template>

<script>
import { addTask } from "@/api/onlineHome/homestead/task";
import {Notify} from "vant";
export default {
  name: "taskLssueAdd",
  data() {
    return {
      content:'',
      showApplyTime:false,
      time:'',
      value:'',
      queryParams:{
        title:'',
        reportDeadline:''
      }
    };
  },
  created() {

  },
  computed: {
    allowCUD: function () {
      return this.$store.getters.businessLevel == '2'
    },
  },
  methods: {
    goAdd(){
      if(!this.queryParams.title)
      {
        Notify({ type: 'danger', message: '请填写标题' });
        return;
      }
      this.$refs._Form.validate().then(() => {
      addTask(this.queryParams).then(response => {
        console.log(response);
        this.$toast.success('保存成功');
        this.$router.back();
      })
      }).catch((e) => {
        Notify({ type: 'danger', message: '请填写完整的表单项' });
      });
    },
    updateData(value){
      console.log(value)
      this.queryParams.title = value ;
    },
    onConfirmApplyTime(date){
      this.queryParams.reportDeadline = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
      this.showApplyTime = false;
    },
    goBack(){
      window.history.go(-1)
    }
  },
}
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 0;
  }
  .main_title{
    font-size: 0.4rem;
    color: #1D6FE9;
    margin: 0.2rem 6%;
    position: relative;
  }
  .main_box{
    width: 96%;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    background-color: #FFF;
    padding: 4%;
  }
  .submitButton{
    width: 80%;
    margin: 0 auto;
    background-color: #1D6FE9;

  }
</style>
