<template>

  <div class="body">
    <el-row :gutter="20" class="mycharts">
      <el-col :span="6">
         <div class="mydate">
           <div><span>我的日程</span></div>
            <div class="mycate"> 
              <el-checkbox-group v-model="checkedEvent" @change="handleCheckedChange">
                <el-checkbox v-for="item in eventOptions" :label="item.dictValue" :key="item.dictValue">{{item.dictLabel}}</el-checkbox>
              </el-checkbox-group>
            </div>
         
        </div>
      </el-col>
       <el-col :span="18">
         <div class="mycalendar">
            <full-calendar
              @changeMonth="changeMonth"   
              :config="config"
              :events="events"
              ref="calendar"
            ></full-calendar>
        </div>
      </el-col>
    </el-row>
    <el-dialog :title="addEvent.title" :visible.sync="addEvent.open" width="600px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="日程标题" prop="title" >
            <el-input v-model="form.title"   placeholder="请输入日程标题" />
          </el-form-item>
          <el-form-item label="日程类型" prop="eventType" >
            <el-select v-model="form.eventType"  size="small">
              <el-option
                    v-for="dict in eventOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间" prop="startTime" >
              <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form.startTime"
              type="datetime"
              placeholder="选择开始时间">
              
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="finishTime" >
              <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form.finishTime"
              type="datetime"
              placeholder="选择结束时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="提醒时间" prop="eventTime" >
              <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form.eventTime"
              type="datetime"
              placeholder="选择提醒时间">
            </el-date-picker>
          </el-form-item>
            <el-form-item label="备注" prop="content" >
            <el-input v-model="form.content"   placeholder="请输备注" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="addEvent.open=!addEvent.open">取 消</el-button>
        </div>
    </el-dialog>
    <el-dialog :title="showEvent.title" :visible.sync="showEvent.open" width="600px" append-to-body>
        <el-form   label-width="120px">
          <el-form-item label="日程标题" prop="title" >
            <el-input v-model="event.title"  :disabled="true"   placeholder="请输入日程标题" />
          </el-form-item>
          <el-form-item label="日程类型" prop="eventType" >
              <el-select v-model="event.eventType" :disabled="true"  clearable size="small">
              <el-option
                    v-for="dict in eventOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间"  prop="startTime" >
              <el-date-picker :disabled="true"  
              v-model="event.startTime"
              type="datetime"
              placeholder="选择开始时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="finishTime" >
              <el-date-picker :disabled="true"  
              v-model="event.finishTime"
              type="datetime"
              placeholder="选择结束时间">
            </el-date-picker>
          </el-form-item>
            <el-form-item label="提醒时间" prop="eventTime" >
              <el-date-picker :disabled="true"  
              v-model="event.eventTime"
              type="datetime"
              placeholder="选择提醒时间">
            </el-date-picker>
          </el-form-item>
            <el-form-item label="备注" prop="content" >
            <el-input :disabled="true"   v-model="event.content"   placeholder="" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button  @click="delCrmEvent(event)">删除日程</el-button>
          <el-button  v-if="event.status!=1" @click="doEvent(event)">完成日程</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
//https://blog.csdn.net/weixin_44254243/article/details/105238681
//https://blog.csdn.net/qq_41460077/article/details/121158394
import { getMyCrmEventList,addCrmEvent,delCrmEvent,doEvent } from "@/api/crm/event";
import icon from '@/assets/icon/menu.png'
import { FullCalendar } from 'vue-full-calendar' //单页
import 'fullcalendar/dist/fullcalendar.css'
export default {
name: 'Index',
components: { FullCalendar },
data() {
  return {
      showEvent:{
        title:"查看日程",
        open:false,
      },
      addEvent:{
        title:"新增日程",
        open:false,
      },
      event:{},
      form:{
        eventId:undefined,
        eventType:"1",
        startTime:undefined,
        limitTime:undefined,
        noticeTime:undefined,
        title:undefined,
        content:undefined,
      },
      rules:{
        title: [
          { required: true, message: "标题不能为空", trigger: "blur" }
        ],
        startTime: [
          { required: true, message: "开始时间不能为空", trigger: "blur" }
        ],
        finishTime: [
          { required: true, message: "结束时间不能为空", trigger: "blur" }
        ],
        eventTime: [
          { required: true, message: "提醒时间不能为空", trigger: "blur" }
        ],
      },
      checkedEvent: [],
      eventOptions:[],
      icon: icon,
      selectDate:'',//日期选择器选中的月份
      events: [],
      myEvents:[],
      searchMonth:null,
      config: {
        firstDay: '0', // 以周日为每周的第一天
        locale: 'zh-cn', // 语言
        defaultView: 'month', // 默认按月显示
        height: 'auto', // 高度
        // buttonText: { today: "今天", month: "月", week: "周", day: "日" },
        buttonText: { today: '今天' },
        header: { left: 'today', center: 'prev, title, next', right: '' },
        // header: {left:'prev,next,today', center: 'title',right:'custom'},
        fixedWeekCount: false, // 显示的周数(如果为true，显示为6周高，否则将有4、5、6周，取决于月份)
        theme: false, // 是否允许使用jquery的ui主题
        // slotLabelFormat:'H:mm', // axisFormat 'H(:mm)'
        // slotLabelInterval:1,
        allDayDefault: false,
        views: {
          month: {
            titleFormat: 'YYYY年MMM'
          }
          // day: {
          //   titleFormat: 'YYYY年MMMDD日 dddd'
          // }
        },
        // monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        // monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        // dayNames: ["日", "一", "二", "三", "四", "五", "六"],
        dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'],
        // slotDuration:'00:30:00',
        slotLabelFormat: 'H:mm:ss',
        minTime: '00:00:00',
        maxTime: '23:59:59',
        // editable: false, //是否允许修改事件
        // selectable: false,//是否允许用户单击或者拖拽日历中的天和时间隙
        // eventLimit: false, // 限制一天中显示的事件数，默认false
        // allDaySlot:false, //是否显示allDay
        // displayEventEnd: false,//是否显示结束时间
        // allDayText: '全天',
        // navLinks: true, //允许天/周名称是否可点击
        eventClick: this.eventClick, // 点击事件
        dayClick: this.dayClick, // 点击日程表上面某一天
        eventRender: this.eventRender
      }
  }
},
created() {
    this.searchMonth = this.$moment().format('YYYY-MM')
    this.getDicts("crm_event_type").then((response) => {
        this.eventOptions = response.data;
    });
    this.getMyCrmEventList();
},
mounted() {
  this.$nextTick(() => {
    //点击上个月
    const prevBtn = document.querySelector('.fc-prev-button')
    prevBtn.addEventListener('click', () => {
      this.changeMonth()
    })
    const nextBtn = document.querySelector('.fc-next-button')
    nextBtn.addEventListener('click', () => {
      this.changeMonth()
    })
    const todayBtn = document.querySelector('.fc-today-button')
      todayBtn.addEventListener('click', () => {
    })
  })
},
methods: {
  changeMonth() {
    this.events = []
    const text = document.querySelector('.fc-center h2').innerText
    const year = text.substring(0, 4)
    var month = text.substring(5, 7)
    month = isNaN(month) ? text.substring(5, 6) : month
    if(month<10){
      month="0"+month
    }
    console.log(`${year}-${month}`);
    this.searchMonth=`${year}-${month}`
    this.getMyCrmEventList();
  },
  doEvent(event){
      this.$confirm('是否确认完成此日程?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        var data={eventId:event.eventId}
        return doEvent(data);
      }).then(() => {
        this.showEvent.open=false;
        this.getMyCrmEventList();
        this.msgSuccess("删除成功");
      }).catch(function() {});
    },
    delCrmEvent(event){
      this.$confirm('是否确认删除此日程?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        var data={eventId:event.eventId}
        return delCrmEvent(data);
      }).then(() => {
        this.showEvent.open=false;
        this.getMyCrmEventList();
        this.msgSuccess("删除成功");
      }).catch(function() {});
    },
    submitForm(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          addCrmEvent(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("创建成功");
                this.addEvent.open = false;
                this.getMyCrmEventList(this.customerId);
              }
            });
        }
      });
    },
    getMyCrmEventList() {
      var data={eventTypes:this.form.eventTypes,searchMonth:this.searchMonth};
      getMyCrmEventList(data).then(response => {
        this.events=[];
        this.myEvents=response.data.list;
        if(data!=null){
          // {
          //   id:5,
          //   title:'春游4',
          //   start: '2021-03-17 15:00:00',
          //   end: '2021-03-17 16:00:00',
          //   color: '#ff0000' 
          // }
          for(var i=0;i<this.myEvents.length;i++){
              var item={};
              item.id=this.myEvents[i].eventId;
              item.title=this.myEvents[i].title;
              item.start=this.myEvents[i].startTime;
              item.end=this.myEvents[i].finishTime;
              item.color="rgb(24, 144, 255)";
              if(this.myEvents[i].status==1){
                item.color="rgb(24, 144, 255)";
              }
              else{
                item.color="rgb(255, 144, 255)";
              }
              this.events.push(item)
          }
        }
        
        this.users = response.data;
      });
    },
    handleCheckedChange(value) {
      console.log(value)
      this.form.eventTypes=value.toString()
      this.getMyCrmEventList();
    },
    // 点击事件
    eventClick (event, jsEvent, pos) {
      var that=this;
      that.showEvent.open=true;
      this.myEvents.forEach(function(element) {
        console.log(event.id)
        console.log(element)
        if(element.eventId==event.id){
          that.event=element
          that.event.eventType=that.event.eventType.toString();
        }
      });
    },
    // 点击当天
    dayClick (day, jsEvent) {
      this.addEvent.open=true;
      var d = day._i
      console.log(day._i)
      this.form.eventId=undefined;
      this.form.eventType="1";
      this.form.title="";
      this.form.content="";
      if(day._i.length==undefined){
        this.form.startTime=this.formatDate(d);
      }
    },
    eventRender:function (event, element) {
      console.log(event)
      element.find('.fc-title').attr('title',event.title)
    }
}
}
</script>

<style lang="scss">
.body{
  padding: 12px;
  background-color: rgb(240, 242, 245);
  position: relative;
}
.mycalendar{
 height: 100%;
 background-color:#ffffff;
 padding: 15px;
 
}
.fc th{
 font-weight: normal;
 font-size: 14px;
}
.fc-toolbar h2{
 font-weight: normal;
 margin-top: 6px;
 font-size: 18px;
}

</style>
<style lang="scss" scoped>
.mydate{
  border: 1px solid #e6e6e6;
  padding: 15px;
  border-radius:4px;
  background-color: white;
  img{
    margin-right: 10px;
    vertical-align: middle;
    width: 20px;
    height: 20px;
  }
  span{
    margin-top: 5px;
    vertical-align: middle;
    font-size: 16x;
    font-weight: bold;

  }
  .mycate{
    margin: 15px 0;
  }
}
.el-checkbox{
  display: block;
  margin: 10px 0;
}

</style>
