<template>
  <div class="app-container" v-if="isReloadData">
    <FullCalendar  defaultView="dayGridMonth" :options="calendarOptions" locale="zh-cn" firstDay="1" weekNumberCalculation="ISO"
                  showNonCurrentDates="false"
                  :eventTimeFormat="evnetTime"
                  :header="header"
                  :buttonText="buttonText"
                  :displayEventEnd="true"
                  :allDayDefault="false"
                  eventLimitText="查看所有"
                  :fixedWeekCount="false"
                  :showNonCurrentDates="false"
                  :eventLimit="true"
                  :allDaySlot="false"
                  :weekends="true"
                  @dateClick="handleDateClick"
                  @eventClick="handleEventClick"
    />
<!--    添加日程-->
    <el-dialog  :visible.sync="schedule"  title="添加日程" append-to-body width="40%" @click="close">
      <el-row :gutter="12">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="24">
            <el-form-item label="开始时间" prop="start">
              <el-date-picker
                v-model="formData.start"
                type="datetime"
                :style="{width: '100%'}"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="结束时间" prop="finish">
              <el-date-picker
                v-model="formData.finish"
                type="datetime"
                :style="{width: '100%'}"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="提前提醒" prop="hour">
              <el-input v-model="formData.hour" placeholder="小时提醒我" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="日程内容" prop="incident">
              <el-input v-model="formData.incident" type="textarea" placeholder="记录你将要做的一件事"
                        :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary"  @click="submit()">确定</el-button>
      </div>
    </el-dialog>
<!--    编辑日程-->
    <el-dialog  :visible.sync="schedule1"  title="编辑日程" append-to-body width="40%" >
      <el-row :gutter="12">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="24">
            <el-form-item label="开始时间" prop="start">
              <el-date-picker
                v-model="formData.start"
                type="datetime"
                :style="{width: '100%'}"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="结束时间" prop="finish">
              <el-date-picker
                v-model="formData.finish"
                type="datetime"
                :style="{width: '100%'}"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="提前提醒" prop="hour">
              <el-input v-model="formData.hour" placeholder="小时提醒我" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="日程内容" prop="incident">
              <el-input v-model="formData.incident" type="textarea" placeholder="记录你将要做的一件事"
                        :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary"   @click="updatarc()">修改</el-button>
        <el-button type="danger" @click="deletrichen()">删除</el-button>
      </div>
    </el-dialog>
  </div>
  </template>

<script>
  import { addRemindEvents,selectList,delSchenule,findList,updatarichen} from "@/api/officework/index";
  import FullCalendar from '@fullcalendar/vue'
  import dayGridPlugin from '@fullcalendar/daygrid'
  import timeGridPlugin from '@fullcalendar/timegrid';
  import interactionPlugin from '@fullcalendar/interaction'
  import listPlugin from '@fullcalendar/list';
  import '@fullcalendar/core/main.css';
  import '@fullcalendar/core/locales/zh-cn.js'
  import { formatDate } from '@fullcalendar/vue';

  let str = formatDate(new Date(), {
    month: 'long',
    year: 'numeric',
    day: 'numeric'
  });
  console.log(str);

  export default{
    name: "schedule",
    components: {
      FullCalendar
    },
        data(){
            return {
              isReloadData: true,
              loading:true,
              dialogVisible:false,
              qqq:'',
              kaishi:'',
              jieshu:'',
              eveid:'',
              schedule: false,
              schedule1:false,
              formData: {
                id:"",
                start: null,
                field105: null,
                finish: null,
                field107: null,
                hour: undefined,
                incident: undefined,
              },
              rules: {
                start: [{
                  required: true,
                  message: '请选择开始日期',
                  trigger: 'change'
                }],
                finish: [{
                  required: true,
                  message: '请选择结束日期',
                  trigger: 'change'
                }],
                hour: [{
                  required: true,
                  message: '请选择提醒时间',
                  trigger: 'blur'
                }],
                incident: [{
                  required: true,
                  message: '请输入你的记录',
                  trigger: 'blur'
                }],
              },
              calendarOptions: {
                plugins: [ dayGridPlugin, timeGridPlugin,interactionPlugin ,listPlugin],
                initialView: 'dayGridMonth',
                dateClick: this.handleDateClick,
                eventClick:this.handleEventClick,
                locale:"zh",
                allDayDefault:false,
                header:{
                  left: 'prev,next today',
                  center: 'title',
                  right: 'month,agendaWeek,agendaDay,list'
                },
                buttonText: {
                  today: '今天',
                  month: '月',
                  week: '周',
                  day: '天',
                  list: '列表'
                },
                events: [
                  // { title: 'event 1', date: '2020-08-05' },
                  // { title: 'event 2', date: '2020-08-06' },
                  // { title: '部门会议', start: new Date(),end:'2020-08-10' }
                ]
              },
              plugins: [
                dayGridPlugin,
                timeGridPlugin,
                interactionPlugin ,
                listPlugin],
              header:{
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,list'
              },
              buttonText: {
                today: '今天',
                month: '月',
                week: '周',
                day: '天',
                list: '列表'
              },
              evnetTime: {
                hour: 'numeric',
                minute: '2-digit',
                hour12: false
              },
                value: new Date(),
              arrList:undefined
            }
        },
    created() {
      this.toList();
    },
     methods:{
       //取消按钮
       cancel() {
         this.schedule1 = false;
         this.reset();
       },
       // 表单重置
       reset() {
         this.formData = {
             id:"",
             start: null,
             field105: null,
             finish: null,
             field107: null,
             hour: undefined,
             incident: undefined,
         },
         this.resetForm("elForm");
       },
       //修改日程
       updatarc(){
         var formdata = new FormData
         formdata.append('id',this.formData.id)
         formdata.append('start',this.formData.start)
         formdata.append('finish',this.formData.finish)
         formdata.append('hour',this.formData.hour)
         formdata.append('incident',this.formData.incident)
          updatarichen(formdata).then(response => {
            // console.log(response)
           // if (response.code === 200) {
             this.msgSuccess("修改成功");
             this.schedule1=false;
            this.calendarOptions.events = [];
            this.toList();
           // }
         });
         this.resetForm();

       },
       reload() {
         this.isReloadData = false;
         this.$nextTick(() => {
           this.isReloadData = true;
         });
       },
      toList (){
        // this.loading = true;
        selectList(this.formData).then(response => {
          console.log(response.rows)
          for(var i = 0; i < response.rows.length;i++){
            this.calendarOptions.events.push({ // add new event data
              title: response.rows[i].incident,
              start: response.rows[i].start,
              end: response.rows[i].finish,
              defId:response.rows[i].id,
            });
          }
        })
      },

          handleDateClick(arg) {
            this.$confirm('是否要添加一个新的日程?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.schedule = true;
              this.formData = {};
              this.formData.start = new Date();
            }).catch(() => {});
          },
          handleEventClick(info) {
            // alert('日程安排为：' + info.event.title);
            // console.log(info.event)
            this.eveid = info.event._def.extendedProps.defId

            this.schedule1 = true;
            // this.updatarc();
            let defId = this.eveid;
            var formdata = new FormData;
            formdata.append('id', defId)
            findList(defId).then(response =>{
              console.log(response.rows[0])
              this.formData= response.rows[0];

            });
          },
          //添加日程
          submit: function() {
            this.$refs["elForm"].validate(valid => {
              if (valid) {
                addRemindEvents(this.formData).then(response => {
                  if (response.code === 200) {
                    this.msgSuccess("添加成功");
                    this.schedule=false;
                    // this.toList();
                    this.calendarOptions.events = [];
                    this.toList();
                  }
                });
              }
            })

            this.resetForm();

          },
          //删除日程
          deletrichen(){
            let defId = this.eveid;
            var formdata = new FormData
            formdata.append('id', defId)
            this.$confirm('是否确认删除日程?', "警告", {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(function() {
              return delSchenule(formdata);
            }).then(() => {
              this.reload();
              this.msgSuccess("删除成功");
              this.schedule1 = false;
              this.calendarOptions.events = [];
              this.toList();
            }).catch(function() {});
          },
          resetForm() {
            this.formData=[];
          }
        },
        inheritAttrs: false,
        // components: {},
        props: [],
        computed: {},
        watch: {},

        mounted() {},
    }
</script>
<style lang="less">
  @import '~@fullcalendar/core/main.css';
  @import '~@fullcalendar/daygrid/main.css';

  .el-calendar__title{font-size: 22px;}
    .calendar-day{
        text-align: center;
        color: #202535;
        line-height: 30px;
        font-size: 12px;
    }
    .is-selected{
        color: #F8A535;
        font-size: 10px;
        margin-top: 5px;
    }
    #calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after{
        content: '当月';
    }
    .prev,.next{background: #efefef;}
    .prev .calendar-day,.next .calendar-day{color: #999;}
    .el-calendar-table td.is-selected {
        background-color:#d6ebff !important;
        }
     .el-calendar-table .el-calendar-day:hover{background-color:#d6ebff !important;}
      .xsmini{width:20px;float: right;}
</style>
