<script setup>
import { computed,reactive,ref,watch,nextTick } from 'vue';
import FullCalendar from "@fullcalendar/vue3"; // 提供一个vue组件
import interactionPlugin from "@fullcalendar/interaction"; // 检测dateClick操作、 可选操作和 事件拖放和调整大小所需的
import timeGridPlugin from "@fullcalendar/timegrid"; // 提供TimeGrid视图
import moment from 'moment';
import {ElMessage,ElMessageBox} from "element-plus"
import $ from 'jquery'
import { ArrowLeft,ArrowRight,Close } from '@element-plus/icons-vue'

import { roadshowInterence } from "@/api/api.js"; 


const props = defineProps({
  eventList: {
    type: Array,
    default: [],
  },
  fromCode: {
    type: String,
    default: ''
  }
})
const emits=defineEmits(['weekChange','cellClick','editCallback','delAuthHandle'])

const roleId=computed(()=>{
  return Number(localStorage.getItem("AdminId"));
})
const isSeller=computed(()=>{
  return ['ficc_seller', 'rai_seller', 'ficc_group', 'rai_group'].includes(localStorage.getItem('Role'))
})

// 点击某一区域事件
const handleDateClick=(arg)=>{
  emits("cellClick", arg.date);
}

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

  const { clientX,clientY } = calEvent.jsEvent;

  selectEventInfo = props.fromCode==='meet' 
  ? info.filterArr.map(item => ({ ...item,title: setDynamicTitle(item) }))
  : {...info,title: setDynamicTitle(info)};
  // console.log(selectEventInfo)
  //鼠标点击的位置
  const popoverBounding = {width:300,height:270}
  const {innerWidth,innerHeight} = window
  let currentPosition = {left:clientX,top:clientY}
  if(clientX+popoverBounding.width>=innerWidth){
    currentPosition.left = innerWidth - popoverBounding.width
  }
  if(clientY+popoverBounding.height>=innerHeight){
    //currentPosition.top = innerHeight - popoverBounding.height
    currentPosition.bottom = 0
  }

  //获取popover展示的内容
  getPopoverContent()
  //popover的宽高
  //限制popover的位置不会超出屏幕，否则点不到关闭按钮
  $('.calendar-eventinfo-popover')[0].style.left = currentPosition.left + 'px';
  //$('.calendar-eventinfo-popover')[0].style.top = currentPosition.top + 'px';
  if(currentPosition.bottom === 0){
    $('.calendar-eventinfo-popover')[0].style.bottom=40+'px';
    $('.calendar-eventinfo-popover')[0].style.top='auto';
  }else{
    $('.calendar-eventinfo-popover')[0].style.top = currentPosition.top + 'px'
    $('.calendar-eventinfo-popover')[0].style.bottom='auto';
  }
  showPopover.value=true
  // 禁止日历选择
  calendarApi.value.setOption("selectable", false)
}

const calendarOptions=reactive({
  height: 'auto', // 组件高度
  plugins: [interactionPlugin, timeGridPlugin], // 引入插件
  headerToolbar: false, // 顶部工具栏
  allDaySlot: false, // 全天日程(不需要)
  nowIndicator: true, //周/日视图中显示今天当前时间点（以红线标记），默认false不显示
  selectable: true,
  initialView: "timeGridWeek", // 设置默认显示周，可选月、日
  dateClick: handleDateClick,
  eventClick: handleEventClick,
  // eventsSet: handleEvents,
  // select: 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
const calendarApi=ref(null)
// 用来存放弹出框
const eventInfoPopoverApi=ref(null)
// 选中的日程信息
let selectEventInfo=reactive({
  id: 0,
  title: "",
  userId: 0,
  beginDate: "",
  endDate: "",
  remark: "",
  status: "",
})
//弹窗展示的日程信息
let popContentArr=reactive([
  {
      key:'',
      label:'',
      content:'',
      otherContent:''
  }
])
const showPopover=ref(false)

watch(()=> props.eventList,()=>{
  getReservationList();
})

watch(showPopover,(value)=>{
  if(value){
    $('.calendar-eventinfo-popover')[0].style.display='unset'
  }else{
    setTimeout(()=>{
      $('.calendar-eventinfo-popover')[0].style.display='none'
    },200)
  }
})
const fullCalendar=ref(null)

// 获取组件api,存放到data中
const getCalendarApi=()=>{
  calendarApi.value = fullCalendar.value.getApi();
}
// /* 切换日期 */
const toogelDate=(type)=>{
  switch(type) {
    case 'prev':
      calendarApi.value.prev();
      break;
    case 'today':
      calendarApi.value.today();
      break;
    case 'next':
      calendarApi.value.next();
      break;
  }
  emits('weekChange');
}

const getPopoverContent=()=>{
    const {StartDate,StartTime,StartWeek,EndDate,EndTime,EndWeek} = selectEventInfo
    //前两项默认是开始时间和结束时间
    const popContent = [{
        key:'StartDate',
        label:'开始时间：',
        content:`${StartDate} ${StartTime} （${StartWeek}）`,
    },{
        key:'EndDate',
        label:'结束时间：',
        content:`${EndDate} ${EndTime} （${EndWeek}）`,
    }]
    //根据ActivityType判断是什么类型,根据RoadshowType展示对应信息
    const {ActivityType,RoadshowType} = selectEventInfo
    const {Province,City,District} = selectEventInfo
    //ActivityType为路演时，需要显示的内容
    const {RoadshowPlatform,CompanyName,CompanyStatus} = selectEventInfo
    const RoadshowContent = [{
        key:'RoadshowPlatform',
        label:'路演平台：',
        content:`${RoadshowPlatform}`,
        RoadshowType:'线上'
    },{
        key:'RoadshowCity',
        label:'路演城市：',
        content:`${Province}${City}${District}`,
        RoadshowType:'线下'
    },{
        key:'CompanyName',
        label:'客户名称：',
        content:`${CompanyName}${CompanyStatus ? '('+ CompanyStatus + ')' : ''}`,
        RoadshowType:RoadshowType,
    }].filter(item=>item.RoadshowType===RoadshowType)
    //ActivityType为公开会议时，需要显示的内容
    const {Theme,CooperationName} = selectEventInfo
    const MeetingContent = [
        {
            key:'RoadshowPlatform',
            label:'会议平台：',
            content:`${RoadshowPlatform}`,
            RoadshowType:'线上'
        },{
            key:'RoadshowCity',
            label:'会议城市：',
            content:`${Province}${City}`,
            RoadshowType:'线下'
        },{
            key:'Theme',
            label:'会议主题：',
            content:`${Theme}`,
            RoadshowType:RoadshowType
        },{
            key:'CooperationName',
            label:'合作方名称：',
            content:`${CooperationName}`,
            RoadshowType:RoadshowType
        }].filter(item=>item.RoadshowType===RoadshowType)
    //ActivityType不为空时，需要显示的内容
    const {ResearcherName,SysUserRealName} = selectEventInfo
    const SuppleContent=[{
        key:'ResearcherName',
        label:'研究员：',
        content:`${ResearcherName}`,
    },{
        key:'SysUserRealName',
        label:'发起人：',
        content:`${SysUserRealName}`,
    }]
    //ActivityType为空时，需要显示的内容
    const {MatterContent,EditReason,ModifyTime} = selectEventInfo
    const MattersContent=[{
        key:'MatterContent',
        label:'事项内容：',
        content:`${MatterContent}`,
    },{
        key:'EditReason',
        label:'最近修改记录：',
        content:`${EditReason}`,
        otherContent:`${moment(ModifyTime).format('YYYY-MM-DD HH:mm:ss')}`
    }].filter(item=>{return item.content.length})

    const contentMap = {
        '路演':RoadshowContent,
        '公开会议':MeetingContent,
    }
    if(ActivityType){
        popContentArr = [...popContent,...contentMap[ActivityType]||[],...SuppleContent]
    }else{
        popContentArr = [...popContent,...MattersContent]
    }

    //console.log('check',popContentArr)

}
// 点击日程信息弹窗关闭按钮
const closeIconClick=()=>{
  calendarApi.value.setOption("selectable", true);
  showPopover.value=false
}

// 点击日程信息弹窗修改按钮
const editIconClick=(id)=>{
  closeIconClick(id);
  emits('editCallback',selectEventInfo);
}

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

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

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

    if(Ret !== 200) return;
    
    ElMessage.success('删除成功');
    emits('weekChange');

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

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

    closeIconClick(id);
  
}

// 处理赋值函数
const getReservationList=()=>{
  const arr = props.eventList.map((item) => {
    let title = (isSeller.value && item.ActivityType==='路演')
    ? `${item.CompanyName}${item.CompanyStatus ? '('+ item.CompanyStatus + ')' : ''}` 
    : (isSeller.value && item.ActivityType==='公开会议')
    ? item.Theme 
    : 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 && 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
    };
  });
  calendarOptions.events = arr
  console.log(props.eventList)
}

/* 拆分出活动id相同的数组和不同的数组 */
const 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 => moment(sub_item.start).valueOf());
    let endDateArr = item.children.map(sub_item => moment(sub_item.end).valueOf());

    let minTime = moment(Math.min(...startDateArr)).format('YYYY-MM-DD HH:mm:ss');
    let maxTime = moment(Math.max(...endDateArr)).format('YYYY-MM-DD HH:mm:ss');
    item.minTime = minTime;
    item.maxTime = maxTime;
    
  })
  obj.filterArr=public_arr
  
  // console.log(public_arr)

}

// 拼接标题 type 内部会议 公开会议 路演 报告电话会 事项
const 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
const formateDate=(date)=>{
  return moment(date).format('YYYY-MM-DD')
}

defineExpose({
  calendarApi,
  formateDate
})

nextTick(()=>{
  getCalendarApi();
  toogelDate('today');
})


</script>

<!-- 日历组件 -->
<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')"
          ><el-icon :size="14" style="margin-right: 4px;"><ArrowLeft /></el-icon> 上一周</el-button
        >
        <el-button type="primary" @click="toogelDate('today')">本周</el-button>
        <el-button type="primary" @click="toogelDate('next')"
          >下一周 <el-icon :size="14" style="margin-left: 4px;"><ArrowRight /></el-icon></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="props.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>
    <!-- 日历详情弹窗 新版 element-plus的el-popover组件实现不来原本的效果，很难用。-->
    <div class="calendar-eventinfo-popover"  :style="{opacity:showPopover?1:0}">
      <div class="pop-header">
          <template v-if="props.fromCode==='meet'">
              <p>{{selectEventInfo[0]?selectEventInfo[0].ActivityType:''}}</p>
          </template>
          <template v-else>
              <p>{{selectEventInfo.ActivityType?`${selectEventInfo.RoadshowType}${selectEventInfo.ActivityType}`:'事项'}}</p>
          </template> 
          <el-icon :size="16" style="cursor: pointer;" @click="closeIconClick"><Close/></el-icon>
      </div>
      <div class="popover-body">
        <template v-if="props.fromCode==='meet'">
          <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.title }}</p>
            <p>研究员：{{ item.total_rs_name }}</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>
        </template>
        <template v-else>
            <!-- 换行的内容需要对齐,所以dom结构设置成了下面这样 -->
            <div class="content-item" v-for="item in popContentArr" :key="item.key">
                <span class="label">{{item.label}}</span>
                <div class="content">
                    <p>{{item.content}}</p>
                    <p v-if="item.otherContent" class="other-text">{{item.otherContent}}</p>
                </div>
            </div>
        </template>
      </div>
    </div>
  </div>
</template>

<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;
        position: relative;
        left:-3px;
        &::before{
            content: '';
            position: absolute;
            top:0;left:0;
            height: 100%;
            width: 4px;
            background-color: #409EFF;
        }
        p {
          overflow: hidden;
          margin: 2px 10px;
          /* 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: fixed;
  border-radius: 5px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  top: 0;
  z-index: 99;
  padding: 14px 0;
  background: #fff;
  min-width: 300px;
  color: #606266;
  line-height: 1.4;
  text-align: justify;
  font-size: 14px;
  word-break: break-all;
  transition: opacity 0.2s linear,visibility 0.4s linear;
  .popover-body {
    padding: 0 14px;
    max-height: 270px;
    overflow-y: auto;
    margin-top: 25px;
    .content-item{
        display: flex;
        margin-top: 5px;
        .content{
            .other-text{
                color:#999;
            }
        }
    }
  }
  .pop-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #5882EF;
        color: #fff;
        margin:-14px 0;
        padding:12px;
        .close-icon{
            cursor: pointer;
            font-size: 16px;
        }
    }
  .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>