<script setup>
import { ref, onMounted,watch, computed } from 'vue';
import { useRoute } from 'vue-router';
import { Sticky,Popup } from 'vant';

import '@fullcalendar/core/vdom'; // solve problem with Vite
import FullCalendar from '@fullcalendar/vue3';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

import moment from 'moment';
import 'moment/dist/locale/zh-cn';
moment.locale('zh-cn');
import swiperCalendar from './swiperCalendar.vue';

/* props */
const props = defineProps({
  eventList: {
    type: Array,
    required: true
  },
  selectUserValue:{
      type:Number,
      default:0
  }
})

const emits = defineEmits(['dateChange','cellClick']);

const route = useRoute();
const swiperCalendarRef = ref(null);

const isSeller = computed(()=> ['ficc_seller', 'rai_seller', 'ficc_group', 'rai_group'].includes(localStorage.getItem('ssbg-role')))


let isShowPopup = ref(false);//日程弹窗
const selectEventInfo = ref(null)//日程信息

/* 点击表格日期 */
const handleDateClick = ({date}) => {
  emits('cellClick',date)
};

let popContentArr = ref([])
/* 点击日程 */
const handleEventClick = (_) => {
  let id = _.event.id; // 获取当前点击日程的ID

  let event_item = props.eventList.find(item => item.id === Number(id));

  //标题拼接
  let title = setDynamicTitle(event_item);

  selectEventInfo.value = {...event_item,title};
  getPopoverContent()
  isShowPopup.value = true;
};
function getPopoverContent(){
    const {StartDate,StartTime,StartWeek,EndDate,EndTime,EndWeek} = selectEventInfo.value
    //前两项默认是开始时间和结束时间
    const popContent = [{
        key:'StartDate',
        label:'开始时间：',
        content:`${StartDate} ${StartTime} （${StartWeek}）`,
    },{
        key:'EndDate',
        label:'结束时间：',
        content:`${EndDate} ${EndTime} （${EndWeek}）`,
    }]
    //根据ActivityType判断是什么类型,根据RoadshowType展示对应信息
    const {ActivityType,RoadshowType} = selectEventInfo.value
    const {Province,City,District} = selectEventInfo.value
    //ActivityType为路演时，需要显示的内容
    const {RoadshowPlatform,CompanyName} = selectEventInfo.value
    const RoadshowContent = [{
        key:'RoadshowPlatform',
        label:'路演平台：',
        content:`${RoadshowPlatform}`,
        RoadshowType:'线上'
    },{
        key:'RoadshowCity',
        label:'路演城市：',
        content:`${Province}${City}${District}`,
        RoadshowType:'线下'
    },{
        key:'CompanyName',
        label:'客户名称：',
        content:`${CompanyName}`,
        RoadshowType:RoadshowType,
    }].filter(item=>item.RoadshowType===RoadshowType)
    //ActivityType为公开会议时，需要显示的内容
    const {Theme,CooperationName} = selectEventInfo.value
    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)
      const SalonContent = [
        {
            key:'RoadshowPlatform',
            label:'会议平台：',
            content:`${RoadshowPlatform}`,
            RoadshowType:'线上'
        },{
            key:'RoadshowCity',
            label:'会议城市：',
            content:`${Province}${City}`,
            RoadshowType:'线下'
        },{
            key:'Theme',
            label:'会议主题：',
            content:`${Theme}`,
            RoadshowType:RoadshowType
        }].filter(item=>item.RoadshowType===RoadshowType)
    ////ActivityType不为空时，需要显示的内容
    const {ResearcherName,SysUserRealName} = selectEventInfo.value
    const SuppleContent=[{
        key:'ResearcherName',
        label:'研究员：',
        content:`${ResearcherName}`,
    },{
        key:'SysUserRealName',
        label:'发起人：',
        content:`${SysUserRealName}`,
    }]
    //ActivityType为空时，需要显示的内容
    const {MatterContent,EditReason,ModifyTime} = selectEventInfo.value
    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,
        '沙龙':SalonContent,
    }
    if(ActivityType){
        popContentArr.value = [...popContent,...contentMap[ActivityType]||[],...SuppleContent]
    }else{
        popContentArr.value = [...popContent,...MattersContent]
    }
}

let calendarOptions = ref({
  height: 'auto',
  headerToolbar: false, // 顶部工具栏
  allDaySlot: false, // 全天日程(不需要)
  locale: 'zh-cn', // 语言
  nowIndicator: true,
  plugins: [
    timeGridPlugin,
    interactionPlugin, // needed for dateClick
  ],
  initialView: 'timeGridDay', //默认显示格式
  editable: true,
  selectable: true,
  selectMirror: true,
  dayMaxEvents: true,
  weekends: true,
  dateClick: handleDateClick,
  eventClick: handleEventClick,
  events: [], //日程表
  eventTimeFormat: {
    // 格式化日程显示时间,如'14:30'
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
  },
  slotMinTime: '08:00:00', //每天最早8点
  dayHeaderFormat: {
    weekday: 'short',
    // year: 'numeric',
    month: 'numeric',
    day: 'numeric',
    omitCommas: true,
  }, //顶部显示格式
  slotLabelFormat: {
    //格式化左侧显示时间
    hour12: false, // 14:00  true = 2pm
    hour: '2-digit', //'06:xx'
    minute: '2-digit', // 'xx:10'
  },
  slotDuration: '01:00:00',//一小时分割
  eventColor: '#D5E6FF', // 默认日程背景色
  eventTextColor: '#333', // 默认日程文本颜色
  weekNumberCalculation: "ISO"
  // eventClassNames: [ 'myclassname', 'otherclassname' ],  // 自定义日程类名
}); //配置

let calendarApi = ref(null); //日历api
let FullCalendarRef = ref(null); //ref


/* 选中日期改变 更新日历 */
const datechangeHandle = (date) => {

  calendarApi.value.gotoDate(date)
  emits('dateChange',date)
  // document.title = date.substr(0,7);
}

/* 切换日历和周为本日 */
const toogeCurrentWeek = () => {
  swiperCalendarRef.value.getRecentWeek(moment().format('YYYY-MM-DD'))
  swiperCalendarRef.value.selectDateHandle(moment().format('YYYY-MM-DD'),1)
}

// 处理数据结构
const getReservationList = () => {
  const arr = props.eventList.map((item) => {
    // let title = (this.isSeller && item.ActivityType==='路演')
    // ? `${item.CompanyName}${item.CompanyStatus ? '('+ item.CompanyStatus + ')' : ''}` : (this.isSeller && item.ActivityType==='公开会议')
    // ? item.Theme : setDynamicTitle(item);
    let title = item.Source === 1 
      ? item.Title 
      : item.ActivityType==='路演'
      ? `${item.CompanyName}${item.CompanyStatus ? '('+ item.CompanyStatus + ')' : ''}` 
      : item.ActivityType==='公开会议' || item.ActivityType==='沙龙'
      ? item.Theme 
      : setDynamicTitle(item);

    return {
      start: item.StartDate+'T'+item.StartTime ,
      end: item.EndDate+'T'+item.EndTime,
      event_id: item.RsCalendarId || item.RsMattersId,
      id: item.id,
      title,
    };
  });
  calendarOptions.value.events = 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;
  }
}

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

onMounted(() => {
  calendarApi.value = FullCalendarRef.value.getApi();
  datechangeHandle(moment().format('YYYY-MM-DD'))
});

defineExpose({ toogeCurrentWeek,calendarApi });
</script>

<template>
  <Sticky>
    <div class="header">
      <swiperCalendar @dateChange="datechangeHandle" ref="swiperCalendarRef" :selectUserValue="selectUserValue"/>
    </div>
  </Sticky>
  <FullCalendar :options="calendarOptions" ref="FullCalendarRef">
    <template #eventContent="arg">
      <div class="popper-content">
        <!-- <p>{{ arg.timeText }}</p> -->
        <p>{{ arg.event.title }}</p>
      </div>
    </template>
  </FullCalendar>

<!-- 弹窗层 旧版-->
<!--   <Popup
    v-model:show="isShowPopup"
    closeable
  >
    <div class="dialog-cont">
      <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>
  </Popup> -->
  <!-- 新版 -->
  <Popup
    v-model:show="isShowPopup"
    round closeable
    style="width:90%;"
  >
    <div class="pop-dialog-wrap">
        <div class="pop-header">
            <p>{{selectEventInfo.ActivityType?`${selectEventInfo.RoadshowType}${selectEventInfo.ActivityType}`:'事项'}}</p>
        </div>
        <div class="popover-body">
            <!-- 换行的内容需要对齐,所以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>
        </div>
    </div>
  </Popup>
</template>

<style lang="scss" scoped>

.header {
  background: #fff;
  /* padding-bottom: 20px; */
  box-shadow: 0px 3px 6px rgba(172, 172, 172, 0.16);
  .tab-cont {
		padding: 30px;
		background: #fff;
		box-shadow: 0px 3px 12px rgba(175, 175, 175, 0.16);
		border-bottom: 6px solid #f6f6f6;
    margin-bottom: 20px;
		.tab-ul {
			display: flex;
			align-items: center;
			li {
				margin-right: 50px;
				color: #666;
				text-align: center;
				.item-img {
					width: 78px;
					height: 78px;
					display:block;
					margin: 0 auto 10px;
				}
			}
		}
  }  
}
.fc {
  margin: 0 0 160px;
  ::v-deep(.fc-timegrid-slot) {
    height: 120px;
  }

  ::v-deep(.fc-timegrid-slot-label) {
    border-right: none;
  }
  ::v-deep(.fc-timegrid-slot) {
    border-left: none;
  }
  ::v-deep(.fc-timegrid-event ) {
    border-left: 8px solid #3385FF !important;
  }
  ::v-deep(.fc-timegrid-col-events){
      margin:0 !important;
  }
}

.dialog-cont {
  width: 550px;
  padding: 40px;
  p {
    color: #333;
  }
}
.pop-dialog-wrap{
    padding: 40px 20px;
    .pop-header{
        text-align: center;
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .popover-body{
        font-size: 30px;
        .content-item{
            display: flex;
            margin-top: 20px;
            .label{
                display: inline-block;
                width:220px;
                text-align: right;
            }
            .content{
                .other-text{
                    color: #999;
                }
            }
        }
    }
}
</style>
