<template>
  <div style="position: relative;">
    <div ref="chartRef" style="height: 620px; width: 1640px" @click="handleClick"></div>
    <div v-show="tooltipVisible" class="custom-tooltip background-as-card"
      :style="{ left: mouseX + 'px', top: mouseY + 'px' }">
      <div class="tooltip-header flex-display">
        <div class="tooltip-header-left text-title-3-bold">{{ currentDate }}</div>
        <div class="tooltip-header-right text-title-3-show">{{ `${'3个部门'}/${'3项举措'}` }}</div>
      </div>
      <div class="tooltip-main">
        <div class="tooltip-main-item" v-for="item, index in currentDetailList" :key="index">
          <div class="item-header flex-display">
            <div class="item-header-left flex-display">
              <div class="logo">
                <img style="width:100%; height: 100%" :src="item.orgLogoUrl" alt="logo">
              </div>
              <div class="name text-bold">{{ item.orgName }}</div>
              <div class="status">
                <div class="status-on text-tip-2" v-if="item.stauts === 2">{{ '已落实' }}</div>
                <div class="status-off text-tip-2" v-else>{{ '未落实' }}</div>
              </div>
            </div>
            <div class="item-header-right  flex-display">
              <AreaTag v-for="tag, idx in item.techDomainList.slice(0, 3)" :key="idx" :tagName="tag"></AreaTag>
            </div>
          </div>
          <div class="item-content text-compact">{{ item.name }}</div>
          <div class="item-footer"></div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue';
import * as echarts from 'echarts/core';
import { CustomChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, CalendarComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

dayjs.locale('zh-cn');

const props = defineProps(
  {
    timelineData: {
      type: Array,
      default: []
    }
  }
);


echarts.use([
  CustomChart,
  TitleComponent,
  TooltipComponent,
  CalendarComponent,
  CanvasRenderer,
]);

const chartRef = ref(null);
let chartInstance = null;

// 弹窗控制
const tooltipVisible = ref(false)
const mouseX = ref(0)
const mouseY = ref(0)
const currentDate = ref('')
const currentDetailList = ref([])

// // 鼠标移动，记录位置
const handleMouseMove = (e) => {
  mouseX.value = e.clientX + 20
  mouseY.value = e.clientY + 20
}

const handleClick = (e) => {
  mouseX.value = e.clientX - 160
  mouseY.value = e.clientY + 50
}

// 计算展示的月份  获取今天在内的之后的三个月的月份
const startDate = dayjs();
console.log('startDate', startDate);

const months = [0, 1, 2].map(offset => startDate.add(offset, 'month'));

// 生成日历数据
function buildDataMap(arr) {
  const map = new Map();
  const stats = months.map(() => ({ total: 0, resolved: 0 }));

  // 按日期聚合
  arr.forEach(item => {
    const date = item.endDate;
    if (!map.has(date)) {
      map.set(date, {
        date,
        count: 0,
        resolved: 0,
        logos: [],
        status: 'empty',
        raw: [],
      });
    }
    const d = map.get(date);
    d.count += 1;
    if (item.status === 2) d.resolved += 1;
    if (d.logos.length < 3 && item.orgLogoUrl) d.logos.push(item.orgLogoUrl);
    d.status = 'has_events';
    d.raw.push(item);
  });

  // 统计每月
  months.forEach((month, idx) => {
    const daysInMonth = month.daysInMonth();
    for (let i = 1; i <= daysInMonth; i++) {
      const dateStr = month.date(i).format('YYYY-MM-DD');
      const d = map.get(dateStr);
      if (d) {
        stats[idx].total += d.count;
        stats[idx].resolved += d.resolved;
      } else {
        map.set(dateStr, {
          date: dateStr,
          count: 0,
          resolved: 0,
          logos: [],
          status: 'empty',
          raw: [],
        });
      }
    }
  });

  return { dataMap: map, monthStats: stats };
}

console.log('timelineData', props.timelineData);


const { dataMap, monthStats } = buildDataMap(props.timelineData);


function getOption() {
  const calendarWidthPercent = 30;
  const gapPercent = (95 - (calendarWidthPercent * 3)) / 4;

  const calendars = months.map((month, index) => ({
    top: 40,
    left: `${gapPercent + index * (calendarWidthPercent + gapPercent)}%`,
    width: `${calendarWidthPercent}%`,
    range: month.format('YYYY-MM'),
    cellSize: ['auto', 82],
    splitLine: { show: true, lineStyle: { color: '#fff', width: 4 } },
    itemStyle: { color: '#f0f9ff', borderColor: '#fff', borderWidth: 4 },
    yearLabel: { show: false },
    monthLabel: { show: false },
    dayLabel: { show: false },
  }));

  const titles = months.map((month, index) => ({
    text: `{month|${month.format('M月')}}                                                      {stats|共 ${monthStats[index].total} 项, 已落实 0 项}`,
    left: `${gapPercent + index * (calendarWidthPercent + gapPercent)}%`,
    top: 10,
    textStyle: {
      rich: {
        month: {
          fontSize: 18,
          fontWeight: 'bold',
          color: 'rgb(5, 95, 194)',
          fontFamily: 'Source Han Sans CN'
        },
        stats: {
          fontSize: 18,
          color: 'rgb(5, 95, 194)',
          fontWeight: 'bold',
          fontFamily: 'Source Han Sans CN'
        }
      }
    }
  }));

  const series = months.map((month, index) => {
    const monthData = [];
    const daysInMonth = month.daysInMonth();
    for (let i = 1; i <= daysInMonth; i++) {
      const dateStr = month.date(i).format('YYYY-MM-DD');
      const item = dataMap.get(dateStr);
      monthData.push([dateStr, item]);
    }

    // console.log('monthData', monthData);


    return {
      type: 'custom',
      coordinateSystem: 'calendar',
      calendarIndex: index,
      data: monthData,
      renderItem: (params, api) => {
        const cellPoint = api.coord([api.value(0), 0]);
        const cellWidth = params.coordSys.cellWidth;
        const cellHeight = params.coordSys.cellHeight;
        const dataIndex = params.dataIndex;
        const rawDataItem = monthData[dataIndex];
        const item = rawDataItem[1];
        if (!item) return;

        const x = cellPoint[0] - cellWidth / 2;
        const y = cellPoint[1] - cellHeight / 2;

        const groupChildren = [];
        const bgColor = item.status === 'has_events' ? '#bfdbfe' : '#f0f9ff';

        groupChildren.push({
          type: 'rect',
          shape: { x, y, width: cellWidth, height: cellHeight },
          style: {
            fill: bgColor,
            stroke: '#fff',
            lineWidth: 1
          },
        });

        if (item.status === 'has_events') {
          const iconSize = 20;
          const iconGap = -5;
          const maxIcons = 3;
          const displayLogos = item.logos.slice(0, maxIcons);
          const iconsY = y + 8;
          const iconsX = x + 8;

          displayLogos.forEach((logo, idx) => {
            groupChildren.push({
              type: 'image',
              style: {
                image: logo,
                x: iconsX + idx * (iconSize + iconGap),
                y: iconsY,
                width: iconSize,
                height: iconSize,
              },
            });
          });

          groupChildren.push({
            type: 'text',
            style: {
              text: `${item.count}项`,
              x: x + 8,
              y: y + cellHeight - 12,
              textAlign: 'left',
              textVerticalAlign: 'bottom',
              fontSize: 18,
              fontFamily: 'Source Han Sans CN'
              // fontWeight: 'bold',

            },
          });
        } else {
          const d = dayjs(item.date);
          groupChildren.push({
            type: 'text',
            style: {
              text: d.format('YYYY年'),
              x: x + cellWidth / 2,
              y: y + cellHeight / 2 - 8,
              textAlign: 'center',
              textVerticalAlign: 'bottom',
              fontSize: 10,
              // fill: '#93c5fd',
              fill:'rgb(185, 220, 255)',
              fontFamily: 'Source Han Sans CN'
            },
          });
          groupChildren.push({
            type: 'text',
            style: {
              text: d.format('MM月DD日'),
              x: x + cellWidth / 2,
              y: y + cellHeight / 2 + 4,
              textAlign: 'center',
              textVerticalAlign: 'top',
              fontSize: 12,
              // fontWeight: 'bold',
              fill: '#rgb(185, 220, 255)',
              fontFamily: 'Source Han Sans CN'
            },
          });
        }

        return {
          type: 'group',
          children: groupChildren,
        };
      },
    };
  });

  // const visualMap = {
  //       min: 0,                 // 数据最小值
  //       max: 10,              // 数据最大值，根据你的实际数据范围调整
  //       calculable: true,        // 是否显示拖拽手柄
  //       orient: 'horizontal',    // 图例方向
  //       left: 'center',          // 图例位置
  //       inRange: {
  //           // 颜色数组：从左（浅）到右（深）代表数值从小到大
  //           color: ['rgb(231, 243, 255)', 'rgb(137, 193, 255)'] // 示例：从白色到深蓝色
  //       }
  //   }

  return {
    tooltip: { show: false },
    title: titles,
    calendar: calendars,
    // visualMap: visualMap,
    series: series,
  };
}

onMounted(() => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value, undefined, { renderer: 'canvas' });
    chartInstance.setOption(getOption());
    window.addEventListener('resize', resizeChart);

    chartInstance.on('click', (params) => {
      console.log('params', params);

      if (Array.isArray(params.data) && params.data.length >= 2) {
        const date = params.data[0]
        // const list = dataMap.get(date)?.raw || []
        const list = params.data[1].raw
        if (list.length > 0) {
          currentDate.value = date
          currentDetailList.value = list
          tooltipVisible.value = true
        } else {
          tooltipVisible.value = false
        }
      }
    });

    // chartInstance.on('mouseout', () => {
    //   tooltipVisible.value = false
    // });
  }
});

function resizeChart() {
  if (chartInstance) {
    chartInstance.resize();
  }
}

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart);
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
});
</script>

<style scoped>
.custom-tooltip {
  position: absolute;
  /* 使用 fixed 相对于视口定位 */
  /* pointer-events: none; */
  /* 让鼠标事件穿透到图表，避免闪烁 */
  z-index: 1000;
  width: 670px;
  background: rgb(255, 255, 255);

}

.tooltip-header {
  height: 50px;
  box-sizing: border-box;
  padding: 13px 24px;
  justify-content: space-between;
  border-bottom: 1px solid rgb(234, 236, 238);
}

.tooltip-main {
  padding: 0 24px 10px;

}

.tooltip-main-item {
  width: 622px;
  height: 144px;
  border-bottom: 1px solid rgb(234, 236, 238);
}

.item-header {
  height: 46px;
  justify-content: space-between;
  align-items: center;
}

.item-header-left {
  gap: 8px;
  align-items: center;

}

.logo {
  width: 24px;
  height: 24px;
}

.status-on {
  height: 23px;
  padding: 0 8px;
  color: rgb(33, 129, 57);
  background: rgba(33, 129, 57, 0.1);
}

.status-off {
  height: 23px;
  padding: 0 8px;
  color: rgb(206, 79, 81);
  background: rgba(206, 79, 81, 0.1);
}

.item-content {
  height: 48px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 限制显示2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  /* 可选：防止单词被截断 */
}

.item-header-right {
  gap: 8px;
}
</style>
