// 日历组件
<template>
  <div class="calendar-container">
    <header class="calendar-header">
      <!-- 头部左插槽 -->
      <div class="left">
        <slot name="left"></slot>
      </div>
      <div class="center">
        <el-button type="primary" @click="toogelDate('prev')"
          ><i class="el-icon-arrow-left" /> 上一周</el-button
        >
        <el-button type="primary" @click="toogelDate('today')">本周</el-button>
        <el-button type="primary" @click="toogelDate('next')"
          >下一周 <i class="el-icon-arrow-right"
        /></el-button>
      </div>
      <!-- 头部右插槽 -->
      <div class="right">
        <slot name="right"></slot>
      </div>
    </header>
    <FullCalendar
      ref="fullCalendar"
      class="calendar-body"
      :options="calendarOptions"
    >
      <template #eventContent="arg">
          <div class="popper-content">
            <template v-if="fromCode!=='meet'">
              <p>{{ arg.timeText }}</p>
              <p>{{ arg.event.title }}</p>
            </template>

            <div v-else-if="arg.event.extendedProps.titleArr.length">
              <p v-for="item in arg.event.extendedProps.titleArr" :key="item.title">{{ item.title }}</p>
            </div>
          </div>
      </template>
    </FullCalendar>
    <el-popover
      placement="bottom-start"
      width="250"
      popper-class="calendar-eventinfo-popover"
      ref="popover"
    >
      <div class="popover-body" v-if="fromCode!=='meet'">
        <p>
          <template v-if="selectEventInfo.StartDate === selectEventInfo.EndDate">
            {{
              `${$moment(selectEventInfo.StartDate).format("MM.DD")}
              (${$moment(selectEventInfo.StartDate).format('ddd')}) 
              ${selectEventInfo.StartTime&&selectEventInfo.StartTime.substr(0,5)} - 
              ${selectEventInfo.EndTime&&selectEventInfo.EndTime.substr(0,5)}`
            }}
          </template>
          <template v-else>
            {{
              `${$moment(selectEventInfo.StartDate).format("MM.DD")}
              (${$moment(selectEventInfo.StartDate).format('ddd')}) 
              ${selectEventInfo.StartTime&&selectEventInfo.StartTime.substr(0,5)} - 
              ${$moment(selectEventInfo.EndDate).format("MM.DD")}
              (${$moment(selectEventInfo.EndDate).format('ddd')}) 
              ${selectEventInfo.EndTime&&selectEventInfo.EndTime.substr(0,5)}`
            }}
          </template>
        </p>
        <p v-if="isSeller">{{ selectEventInfo.ResearcherName }}</p>
        <p>{{ selectEventInfo.title }}</p>
        <p v-if="selectEventInfo.CompanyName" >{{ `${selectEventInfo.CompanyName}${selectEventInfo.CompanyStatus ? '('+ selectEventInfo.CompanyStatus + ')' : ''}` }}</p>
        <p v-if="selectEventInfo.Theme">{{ selectEventInfo.Theme }}</p>
        <p v-if="selectEventInfo.CooperationName">{{ selectEventInfo.CooperationName }}</p>
        <p v-if="['公开会议','内部会议','路演'].includes(selectEventInfo.ActivityType)">发起人:{{selectEventInfo.SysUserRealName}}</p>
      </div>
      <div class="popover-body" v-else>
        <div v-for="item in selectEventInfo" :key="item.RsCalendarId" class="popover-event-item">
          <p>
            <template v-if="$moment(item.minTime).format('YYYY-MM-DD') === $moment(item.maxTime).format('YYYY-MM-DD')">
              {{
                `${$moment(item.minTime).format("MM.DD")}
                (${$moment(item.minTime).format('ddd')}) 
                ${$moment(item.minTime).format('HH:mm')} - 
                ${$moment(item.maxTime).format('HH:mm')}`
              }}
            </template>
            <template v-else>
              {{
                `${$moment(item.minTime).format("MM.DD")}
                (${$moment(item.minTime).format('ddd')}) 
                ${$moment(item.minTime).format('HH:mm')} - 
                ${$moment(item.maxTime).format("MM.DD")}
                (${$moment(item.maxTime).format('ddd')}) 
                ${$moment(item.maxTime).format('HH:mm')}`
              }}
            </template>
          </p>
          <p>{{ item.total_rs_name }}</p>
          <p>{{ item.title }}</p>
          <p v-if="item.CompanyName" >{{ `${item.CompanyName}${item.CompanyStatus ? '('+ item.CompanyStatus + ')' : ''}` }}</p>
          <p v-if="item.Theme">{{ item.Theme }}</p>
          <p v-if="item.CooperationName">{{ item.CooperationName }}</p>
          <p>发起人:{{item.SysUserRealName}}</p>
        </div>
      </div>
      <i
        class="close-icon el-icon-close"
        @click="closeIconClick"
      ></i>
    </el-popover>
  </div>
</template>

<script>
import { roadshowInterence } from "@/api/api.js"; 
import FullCalendar from "@fullcalendar/vue"; // 提供一个vue组件
import interactionPlugin from "@fullcalendar/interaction"; // 检测dateClick操作、 可选操作和 事件拖放和调整大小所需的
import timeGridPlugin from "@fullcalendar/timegrid"; // 提供TimeGrid视图
export default {
  name: "Calendar",
  components: {
    FullCalendar,
  },
  props: {
    eventList: {
      type: Array,
      default: [],
    },
    fromCode: {
      type: String,
      default: ''
    }
  },
  computed: {
    roleId() {
      return Number(localStorage.getItem("AdminId"));
    },
    isSeller() {
      return ['ficc_seller', 'rai_seller', 'ficc_group', 'rai_group'].includes(localStorage.getItem('Role'))
    }
  },
  data() {
    return {
      calendarOptions: {
        height: 'auto', // 组件高度
        plugins: [interactionPlugin, timeGridPlugin], // 引入插件
        headerToolbar: false, // 顶部工具栏
        allDaySlot: false, // 全天日程(不需要)
        nowIndicator: true, //周/日视图中显示今天当前时间点（以红线标记），默认false不显示
        selectable: true,
        initialView: "timeGridWeek", // 设置默认显示周，可选月、日
        dateClick: this.handleDateClick,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents,
        select: this.handleDateSelect,
        // 日程列表
        events: [],
        eventTimeFormat: {
          // 格式化日程显示时间,如'14:30'
          hour: "2-digit",
          minute: "2-digit",
          hour12: false,
        },
        slotMinTime:'08:00:00',//每天最早8点
        slotLabelFormat: {
          //格式化左侧显示时间
          hour12: false, // 14:00  true = 2pm
          hour: "2-digit", //'06:xx'
          minute: "2-digit", // 'xx:10'
        },
        eventColor: "#ECF5FF", // 默认日程背景色
        eventTextColor: "#333", // 默认日程文本颜色
        // eventClassNames: [ 'myclassname', 'otherclassname' ],  // 自定义日程类名
        locale: "zh-cn", // 语言
        weekNumberCalculation: "ISO", // 周次的显示格式(ISO表示从周一开始)
        // slotEventOverlap: false, // 日程是否重叠
        // eventMaxStack: 1, // 堆叠最大日程数
      },
      // 用来存放组件api
      calendarApi: null,
      // 用来存放弹出框
      eventInfoPopoverApi: null,
      // 选中的日程信息
      selectEventInfo: {
        id: 0,
        title: "",
        userId: 0,
        beginDate: "",
        endDate: "",
        remark: "",
        status: "",
      }
    };
  },
  methods: {
    // 获取组件api,存放到data中
    getCalendarApi() {
      this.calendarApi = this.$refs.fullCalendar.getApi();
    },
    // /* 切换日期 */
    toogelDate(type) {
      switch(type) {
        case 'prev':
          this.calendarApi.prev();
          break;
        case 'today':
          this.calendarApi.today();
          break;
        case 'next':
          this.calendarApi.next();
          break;
      }
      this.$emit('weekChange');
    },

    // 点击某一区域事件
    handleDateClick(arg) {
      this.$emit("cellClick", arg.date);
    },

    // 点击某一日程事件
    handleEventClick(calEvent) {
      let id = calEvent.event.id; // 获取当前点击日程的ID
      let info = this.eventList.find((item) => item.id == id);

      const { clientX,clientY } = calEvent.jsEvent;

      this.selectEventInfo = this.fromCode==='meet' 
      ? info.filterArr.map(item => ({ ...item,title: this.setDynamicTitle(item) }))
      : {...info,title: this.setDynamicTitle(info)};
      // console.log(this.selectEventInfo)

      $('.calendar-eventinfo-popover')[0].style.left = clientX + 'px';
      $('.calendar-eventinfo-popover')[0].style.top = clientY + 'px';
      this.$refs.popover.doShow();
      // 禁止日历选择
      this.calendarApi.setOption("selectable", false);
    },
    // 点击日程信息弹窗关闭按钮
    closeIconClick() {
      this.calendarApi.setOption("selectable", true);
      // this.$refs["popover-" + id].doClose();
      this.$refs.popover.doClose();
    },

    // 点击日程信息弹窗修改按钮
    editIconClick(id) {
      this.closeIconClick(id);
      this.$emit('editCallback',this.selectEventInfo);
    },

    // 点击日程信息弹窗删除按钮
    delIconClick(id) {

      const { RsCalendarId,RsCalendarResearcherId,RsMattersId, ActivityType  } = this.selectEventInfo;

      !['公开会议','路演'].includes(ActivityType) && this.$confirm("删除该活动后，将从日历中移除，确定继续吗?", "删除", {
        type: "warning"
      }).then( async() => {
        //删除事项
        let { Ret } = RsMattersId ? await roadshowInterence.delMatters({ RsMattersId }) 
        //删除活动
        : await roadshowInterence.deleteRoadshow({ RsCalendarId, RsCalendarResearcherId });

        if(Ret !== 200) return;
        
        this.$message.success('删除成功');
        this.$emit('weekChange');

        })
        .catch(() => {});

        ['公开会议','路演'].includes(ActivityType) && this.$emit('delAuthHandle',this.selectEventInfo);

        this.closeIconClick(id);
      
    },

    // 处理赋值函数
    getReservationList() {
      const arr = this.eventList.map((item) => {
        let title = (this.isSeller && item.ActivityType==='路演')
        ? `${item.CompanyName}${item.CompanyStatus ? '('+ item.CompanyStatus + ')' : ''}` 
        : (this.isSeller && item.ActivityType==='公开会议')
        ? item.Theme 
        : this.setDynamicTitle(item);

        let start = item.StartDate ? `${item.StartDate}T${item.StartTime}` : item.MinTime.replace(/ /,'T');
        let end = item.EndDate ? `${item.EndDate}T${item.EndTime}` : item.MaxTime.replace(/ /,'T');

         //合并公开会议显示
        item.CalendarList && this.filterSameIdArr(item);
        let titleArr = item.filterArr ? item.filterArr.map(sub_item => ({
          title: sub_item.title
        })) : [];

        return {
          start,
          end,
          event_id: item.RsCalendarId || item.RsMattersId,
          id: item.id,
          title,
          titleArr
        };
      });
      this.calendarOptions.events = arr
      console.log(this.eventList)
    },

    /* 拆分出活动id相同的数组和不同的数组 */
    filterSameIdArr(obj){
      let public_arr = [], id_arr = [];

      obj.CalendarList && obj.CalendarList.forEach(item => {
        if(!id_arr.includes(item.RsCalendarId)) {
          public_arr.push({
            id: item.RsCalendarId,
            ActivityType: item.ActivityType,
            Theme: item.Theme,
            CompanyName: item.CompanyName,
            CompanyStatus: item.CompanyStatus,
            CooperationName: item.CooperationName,
            SysUserRealName: item.SysUserRealName,
            RoadshowType: item.RoadshowType,
            RoadshowPlatform: item.RoadshowPlatform,
            Province: item.Province,
            City: item.City,
            children: [{
              name: item.ResearcherName,
              start: `${item.StartDate} ${item.StartTime}`,
              end: `${item.EndDate} ${item.EndTime}`,
            }]
          })
          id_arr.push(item.RsCalendarId)
        }else {
          public_arr.forEach(_item => {
            if(_item.id === item.RsCalendarId) {
              _item.children.push({
              name: item.ResearcherName,
              start: `${item.StartDate} ${item.StartTime}`,
              end: `${item.EndDate} ${item.EndTime}`,
            })
            }
          })
        }
      })

      //拼接活动id标题 获取活动公用最早时间和最晚时间
      public_arr.forEach(item => {
        let str = '';
        item.children.forEach(sub_item => {
          str += sub_item.name+','
        })
        str = str.substr(0, str.length-1)
        item.title = `${item.Theme}(${str})`;
        item.total_rs_name = str;

        let startDateArr = item.children.map(sub_item => this.$moment(sub_item.start).valueOf());
        let endDateArr = item.children.map(sub_item => this.$moment(sub_item.end).valueOf());

        let minTime = this.$moment(Math.min(...startDateArr)).format('YYYY-MM-DD HH:mm:ss');
        let maxTime = this.$moment(Math.max(...endDateArr)).format('YYYY-MM-DD HH:mm:ss');
        item.minTime = minTime;
        item.maxTime = maxTime;
        
      })

      this.$set(obj,'filterArr',public_arr)
      
      // console.log(public_arr)
    
    },

    // 拼接标题 type 内部会议 公开会议 路演 报告电话会 事项
    setDynamicTitle({ActivityType,RsMattersId,MatterContent,RoadshowType,RoadshowPlatform,Province,City,ActivityCategory,Source,Title}) {

      //第三方添加的日历活动
      if(Source === 1) return Title;

      switch(ActivityType || RsMattersId) {
        case '内部会议': return ActivityType;
        case '公开会议': return `${RoadshowType}${ActivityType}(${RoadshowType==='线上' ? RoadshowPlatform : Province+City})`;
        case '路演': return `${RoadshowType}${ActivityType}(${RoadshowType==='线上' ? RoadshowPlatform : Province+City})`;
        case '报告电话会': return `${ActivityCategory}电话会`;
        case RsMattersId: return MatterContent;
      }
    },

    // 格式化日期YYYY-MM-DD
    formateDate(date){
      return this.$moment(date).format('YYYY-MM-DD')
    },

  },
  mounted() {
    this.getCalendarApi();
    // this.today()
    this.toogelDate('today');
  },
  watch: {
    eventList() {
      this.getReservationList();
    },
  },
};
</script>

<style lang="scss">
.calendar-container {
  .calendar-header {
    display: flex;
    .left,
    .right {
      flex: 1;
    }
    .right {
      display: flex;
      justify-content: end;
    }
    .center .el-button{
      width: 140px;
    }
  }
  .calendar-body {
    height: 100%;
    margin-top: 10px;
    .fc-scrollgrid {
      colgroup col {
        width: 150px !important;
      }
      .fc-timegrid-slots table {
        line-height: 40px;
        .fc-timegrid-slot-label-frame {
          text-align: center;
        }
      }
      .fc-timegrid-cols table {
        .fc-day-today {
          background-color: #fee1cc66;
        }
      }
      .fc-col-header {
        line-height: 40px;
        .fc-col-header-cell {
          background-color: #ecf5ff;
        }
        .fc-day-today {
          background-color: #fee1cc66;
        }
      }
    }
    .fc-timegrid-col-events {
      cursor: pointer;
      margin: 0;
      .fc-event-main .popper-content {
        height: 100%;
        overflow: hidden;
        p {
          overflow: hidden;
          margin: 2px 0;
          /* text-overflow: ellipsis; */
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
.calendar-eventinfo-popover {
  position: relative !important;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .popover-body {
    padding: 0 14px;
    max-height: 400px;
    overflow-y: auto;
    p {
      margin-top: 5px;
    }
  }
  .close-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
    cursor: pointer;
  }
  .handle-btn-icon {
    display: flex;
    justify-content: end;
    i {
      margin: 5px;
      font-size: 20px;
      cursor: pointer;
      color: #3385ff;
    }
  }
  .popover-event-item {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #666;
    &:last-child {
      border: none;
    }
  }
}
</style>

<style lang="scss">
.calendar-eventinfo-popover {
  position: fixed !important;
  top: 0;
  z-index: 99;
  padding: 14px 0;
}
</style>