<template>
    <div>
        <DateTimeSelect ref="changeDateTime" v-if="!(lineData && lineData.hiddenTime)" :sideIcon="sideIcon" :dateDataTrans="dateDataTrans" :dateShowType="dateShowType" @dataChange="dataChangeValue"></DateTimeSelect>
<!--        <div :id="`lineChart` + num" style="width:100%;height: 100%;" />-->
        <!-- 新增：包裹图表和自定义下拉框的容器，设置为相对定位 -->
        <div class="chart-wrapper">
          <!-- 自定义的下拉选择框 -->
          <template v-if="this.lineData && this.lineData.unitSelList && this.lineData.unitSelList.length > 0">
            <select :class="'yaxis-selector yaxis-selector' + num" v-model="selectedYAxisName">
              <option v-for="item of this.lineData.unitSelList" :value="item.value">{{item.label}}</option>
            </select>
          </template>
          <template v-if="this.lineData && this.lineData.legend && this.lineData.legend.legendSelect">
            <div :class="'yaxis-legSelector yaxis-legSelector' + num">
              <span style="display: inline-block;font-size: 14px;font-weight: 600;">图例：</span><el-select v-model="legendSelectListModel" multiple collapse-tags @change="handleSelect">
                <el-option v-for="(item,index) of this.lineData.legend.legendSelect" :key="item" :value="item" :label="item">
                  <span><span :style="{background: `${colorList[index % colorList.length]}`}" class="selOptionSty"></span>{{item}}</span>
                </el-option>
              </el-select>
            </div>
          </template>
          <!-- 图表容器，id 用于初始化 ECharts -->
          <div :id="`lineChart` + num" class="chart-container"></div>
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts'
    import DateTimeSelect from './dateTimeSelect.vue'
    export default {
      name: 'echartsLine',
      components: {DateTimeSelect},
      props: {
        lineData: {
          type: Object,
          default: () => {}
        },
        title: {
          type: String,
          default: null
        },
        dateShowType: {
          type: String,
          default: null
        },
        dateDataTrans: {
          type: Object,
          default: () => ({})
        },
        chartData: {
          type: Function,
          default: () => {
          }
        },
        sideIcon: {
          type: Object,
          default: () => {}
        }
      },
      watch: {
        lineData: {
          handler(val) {
            this.$nextTick(() => {
              this.selectedYAxisName = this.lineData && this.lineData.unitModel || '';
              this.legendSelectListModel = this.lineData && this.lineData.legend && this.lineData.legend.legendSelect;
              this.getList(this.title, this.lineData);
            });
          },
          deep: true,
          immediate: true
        },
        // 新增：监听下拉框选择的变化
        selectedYAxisName(newVal) {
          if (newVal != (this.lineData && this.lineData.unitModel)) {
            let times = this.lineData && this.lineData.hiddenTime ? [] : this.$refs.changeDateTime.dateRange;
            this.chartData({timeArr: times}, newVal);
          }
        }
      },
      data() {
        return {
          lineDataListIntance: null,
          lineDataList: '',
          num: '',
          selectedYAxisName: '', // 新增：用于绑定下拉框选中的值
          legendSelectListModel: [],
          isInternalAction: false,
          colorList:  ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        }
      },
      created() {
        this.num = Math.floor(Math.random() * 9000);
      },
      mounted() {
        if (this.lineData && this.lineData.hiddenTime) {
          this.$nextTick(() => {
            this.getList(this.title, this.lineData);
          });
        }
        // 确保使用 window 对象挂载
        window.detailsVal = this.detailsVal;
      },
      beforeUnmount() {
        // 组件销毁时清理全局函数
        delete window.detailsVal;
      },
      methods: {
        resizeChart() {
          if (this.lineDataListIntance) {
            this.lineDataListIntance.resize();
          }
        },
        getList(title, dataXY) {
          let that = this;
          if (that.lineDataListIntance) {
            that.lineDataListIntance.dispose(); // 1. 先销毁旧实例
          }
          that.lineDataListIntance = echarts.init(document.getElementById('lineChart' + that.num));
          let titleList = [{text: title, x: '50%', y: '3%', textAlign: 'center',textStyle: {fontSize: 16}}];
          if (dataXY && dataXY.titleSubtext) {
            titleList.push(dataXY.titleSubtext);
          } else if (dataXY && dataXY.titleVal) {
            titleList[0] = Object.assign({},titleList[0], dataXY.titleVal);
          }
          let legendData = dataXY && dataXY.legend ? dataXY.legend : {};
          if (dataXY && dataXY.legend && dataXY.legend.formatter) {
            let formatData = {
              formatter: function(params) {
                const customSuffix = dataXY && dataXY.content && dataXY.content[params] || ' ';
                return `${params} ${customSuffix}`;
              },
            };
            legendData = Object.assign({}, legendData, formatData);
          }
          let series = [];
          if (dataXY && dataXY.dataList && dataXY.dataList.length > 0) {
            dataXY.dataList.forEach(item => {
              let str = {
                name: item && item.name || '',
                type: 'line',
                // showSymbol: false,
                symbol: item && item.symbol || 'circle',
                data: item && item.data || []
              };
              if (!(item && item.areaStyleNone)) {
                str['areaStyle'] =  {
                  opacity: 0.6
                };
              }
              series.push(str);
            });
          } else {
            series = [{
              data: dataXY && dataXY.data || [],
              type: 'line',
              smooth: true,
              // areaStyle: {  // 阴影
              //   color: 'rgba(140, 158, 217, 1)'
              // }
            }];
          }
          let option = {
            animation: false, // 关闭渲染动画
            title: titleList,
            legend: legendData,
            tooltip: {
              trigger: 'axis',
              confine: true, // 将tooltip限制在图表的区域内，防止超出屏幕
              enterable: dataXY.tooltipFormatter ? true : false, // 关键配置：允许鼠标移入tooltip内部
              extraCssText: dataXY.tooltipFormatter ? 'z-index: 2000;' : 'z-index: 2000;background-color: #ffffffb3;', // 设置一个较高的层级
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              },
              // 自定义位置 - 跟随鼠标
              position: !dataXY.tooltipFormatter ? null : function (point, params, dom, rect, size) {
                // 确保提示框在视图范围内
                let x = point[0];
                let y = point[1];

                // 如果太靠右，向左偏移
                if (x > size.viewSize[0] - size.contentSize[0]) {
                  x = x - size.contentSize[0] + 10;
                }

                // 如果太靠下，向上偏移
                if (y > size.viewSize[1] - size.contentSize[1]) {
                  y = y - size.contentSize[1] - 20;
                }

                return [x - 5, y + 18];
              },
              formatter: function(params) {   // 主要应对与MTRAgent丢包趋势图模块的功能
                // 获取当前悬停的日期
                const date = params[0].name;
                // 构建提示框HTML内容
                let html = `<div><div>${date}</div>`;
                // if (params && params.length >= 7) {
                //   html = `<div style="max-height: 175px; overflow-y: auto;">
                //             <div>${date}</div>
                //           `;
                // }
                // 遍历所有系列
                params.forEach(paramItem => {
                  if (dataXY.tooltipFormatter && dataXY.tooltipFormatter.customList) {
                    if (paramItem.data.content) {
                      let content = JSON.parse(paramItem.data.content);
                      html+= `<div>最后一跳平均延迟: ${content[content.length - 1].avgLatency}(ms)</div>
                                <div>最后一跳丢包率: ${content[content.length - 1].lossPercent}(%)</div>`;
                        html+= `<button style="float: right;background: #409eff; border-color: #409eff;color:#fff;box-shadow:none;" onclick="window.detailsVal('${date}' ,'${paramItem.dataIndex}', '${dataXY.dialogOpen}')">详情</button>`;
                    } else {
                      let valueparams = paramItem.value;
                      if (dataXY.tooltipFormatter && dataXY.tooltipFormatter.valueToop) {
                        let value = dataXY.tooltipFormatter.valueToop;
                        valueparams = paramItem.value && paramItem.value === value.num ? value.msg : paramItem.value || paramItem.value === 0 ? paramItem.value : '-';
                        // 为每个系列创建一行
                        html += `
                        <div style="display: flex; justify-content: space-between; align-items: center; margin: 4px 0;">
                            <div style="display: flex; align-items: center;">
                                <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${paramItem.color}; margin-right: 8px;"></span>
                                <span style="color: #57606f;">${paramItem.seriesName} </span>
                            </div>
                            <span style="font-weight: bold; color: #2f3542;margin-left:20px;"> ${valueparams}</span>
                        </div>`;
                      }
                    }
                  } else {
                    // 为每个系列创建一行
                    html += `
                        <div style="display: flex; justify-content: space-between; align-items: center; margin: 4px 0;">
                            <div style="display: flex; align-items: center;">
                                <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${paramItem.color}; margin-right: 8px;"></span>
                                <span style="color: #57606f;">${paramItem.seriesName} </span>
                            </div>
                            <span style="font-weight: bold; color: #2f3542;margin-left:20px;"> ${paramItem.value || paramItem.value === 0 ? paramItem.value : '-'}</span>
                        </div>`;
                    // 目前应用与服务器管理挂载文件处
                    if (dataXY && dataXY.otherModel) {
                      html += `
                            <div style="display: flex; justify-content: space-between; align-items: center; margin: 4px 0;">
                            <div style="display: flex; align-items: center;">
                                <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%;margin-right: 8px;"></span>
                                <span style="color: #57606f;">${dataXY.otherModel.name} </span>
                            </div>
                            <span style="font-weight: bold; color: #2f3542;margin-left:20px;"> ${dataXY.otherModel.value[paramItem.dataIndex] || dataXY.otherModel.value[paramItem.dataIndex] === 0 ? dataXY.otherModel.value[paramItem.dataIndex] : '-'}</span>
                        </div>
                      `;
                    }
                  }
                });
                return html += `</div>`;
              }
            },
            grid: {
              top: dataXY && dataXY.gridTop || '80px',
              left: dataXY && dataXY.gridLeft || '2%',
              right: dataXY && dataXY.gridRight || '4%',
              bottom: dataXY && dataXY.gridBotm || '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: function(value) {
                 if (value) {
                   // 每4个字符换一行（根据实际文本长度调整）
                   const maxLength = 11;
                   let result = '';
                   let count = 0;
                   for (let i = 0; i < value.length; i++) {
                     count++;
                     result += value[i];
                     if (count % maxLength === 0 && i !== value.length - 1) {
                       result += '\n'; // 换行
                     }
                   }
                   return result;
                 }
                },
                // lineHeight: 10, // 行高（确保换行后不重叠）
              },
              data: dataXY && dataXY.lineXData || []
            },
            yAxis: {
              type: 'value',
              name: dataXY?.yAxisName || ' ',
              nameTextStyle: dataXY && dataXY.unitSelList && dataXY.unitSelList.length > 0 ? {color: 'transparent'} : {},  // 将名称文本颜色设为透明，使其不可见
              min: 0,    // 自定义最小刻度（根据业务需求调整，如 0）
              max: dataXY && dataXY.data && dataXY.data.length > 0 ? null : dataXY && dataXY.dataList && dataXY.dataList[0] && dataXY.dataList[0].data.length > 0 ? null : 100,
              splitLine: {
                show: true,
              },
            },
            // 配置高亮状态下的样式
            emphasis: dataXY && dataXY.highlight ? {
              itemStyle: {
                borderWidth: 2,      // 边框加粗
                shadowBlur: 5,      // 添加阴影光晕
              },
              label: {
                show: false,          // 高亮时显示标签
              }
            } : {},
            series: series
          };
          that.lineDataListIntance.setOption(option);
          if (dataXY && dataXY.highlight) {
            // 然后高亮当前点击的数据点
            that.lineDataListIntance.dispatchAction({
              type: 'highlight', // 高亮类型
              seriesIndex: 0, // 系列索引，从点击事件参数中获取
              dataIndex: 0 // 数据索引，从点击事件参数中获取
            });
          }
          if (dataXY && dataXY.unitSelList && dataXY.unitSelList.length > 0) {
            // 初始化图表后，调用方法定位下拉框
            this.positionYAxisSelector(that.lineDataListIntance);
          }
          window.addEventListener("resize", () => {
            that.lineDataListIntance.resize();
            if (dataXY && dataXY.unitSelList && dataXY.unitSelList.length > 0) {
              this.positionYAxisSelector(that.lineDataListIntance);
            }
          });
          that.lineDataListIntance.off('click');
          that.lineDataListIntance.on("click", function(params) {
            that.$emit("chartClickModel", {params: params});
            if (dataXY && dataXY.highlight) {
              // 首先取消之前可能存在的高亮状态
              that.lineDataListIntance.dispatchAction({
                type: 'downplay' // 取消所有数据点的高亮
              });

              // 然后高亮当前点击的数据点
              setTimeout(() => {
                that.lineDataListIntance.dispatchAction({
                  type: 'highlight', // 高亮类型
                  seriesIndex: params.seriesIndex, // 系列索引，从点击事件参数中获取
                  dataIndex: params.dataIndex // 数据索引，从点击事件参数中获取
                });
              },1000);
            }
          });
          // ​当鼠标在图形元素内部移动时持续触发
          that.lineDataListIntance.on('mousemove', (params) => {
            this.$emit('showChartTabList', {value: params.name, tableVal: params.data});
          });
          // 2. 关键：拦截默认的鼠标移入事件，不做任何操作（即不取消高亮）
          that.lineDataListIntance.on('mouseover', (params) => {
            // 这个函数体为空，或者只包含一些不涉及downplay的逻辑
            // 这样就阻止了鼠标移出时高亮自动消失
          });
        // 2. 关键：拦截默认的鼠标移出事件，不做任何操作（即不取消高亮）
          that.lineDataListIntance.on('mouseout', (params) => {
            this.$emit('showChartTabList', {});
            // 这个函数体为空，或者只包含一些不涉及downplay的逻辑
            // 这样就阻止了鼠标移出时高亮自动消失
          });
        },
        positionYAxisSelector(chartInstance) {
          const selector = document.querySelector('.yaxis-selector' + this.num);
          const legSelector = document.querySelector('.yaxis-legSelector' + this.num);
          if (!selector || !chartInstance) return;

          const chartDom = chartInstance.getDom();
          const chartRect = chartDom.getBoundingClientRect();

          // 获取图表配置项中的网格设置
          const option = chartInstance.getOption();
          const grid = option.grid && option.grid[0] ? option.grid[0] : {};

          // 使用网格的 left 和 top 作为基准点
          const gridLeft = this.parseGridValue(grid.left || '2%', chartRect.width);
          const gridRight = this.parseGridValue(grid.right || '2%', chartRect.width);
          const gridTop = this.parseGridValue(grid.top || '80px', chartRect.height);

          // const labelAreaLeft = gridLeft - 100; // 向左偏移
          // const labelAreaTop = gridTop + (chartRect.height / 2) - 10; // 垂直居中

          // selector.style.left = `${chartRect.left + window.pageXOffset + labelAreaLeft}px`;
          // selector.style.top = `${chartRect.top + window.pageYOffset + labelAreaTop}px`;

          const labelAreaLeft = gridLeft - 5; // 向左偏移
          const labelAreaRight = gridRight - 5; // 向左偏移
          const labelAreaTop = gridTop; // 垂直居中

          selector.style.left = `${labelAreaLeft}px`;
          selector.style.top = `${labelAreaTop - 35}px`;
          if (!legSelector || !chartInstance) return;
          if (this.lineData && this.lineData.hiddenTime) {
            legSelector.style.right = `${labelAreaRight}px`;
            legSelector.style.top = `${labelAreaTop - 50}px`;
          } else {
            legSelector.style.right = `${labelAreaRight + 350}px`;
            legSelector.style.top = `${labelAreaTop - 69}px`;
          }
        },

        // 辅助方法：解析网格值（百分比、像素等）
        parseGridValue(value, containerSize) {
          if (typeof value === 'number') return value;
          if (typeof value === 'string') {
            if (value.includes('%')) {
              return (parseFloat(value) / 100) * containerSize;
            } else if (value.includes('px')) {
              return parseFloat(value);
            }
          }
          return 0;
        },
        // 图例下拉变化时,切换图例
        handleSelect(val){
          const newSelected = {};
          // 假设 allLegendNames 包含所有图例名称
          this.lineData.legend.legendSelect.forEach(name => {
            newSelected[name] = this.legendSelectListModel.includes(name);
          });
          // 使用 setOption 更新图例状态
          this.lineDataListIntance.setOption({
            legend: {
              selected: newSelected
            }
          }, false, true);
        },
        dataChangeValue(val, timeArr, iconVal) {
          // 调用父级页面传过来的事件，在父级中处理该方法的逻辑--
          if (timeArr) {
            this.chartData(timeArr);
          }
          if (iconVal) {
            this.chartData({iconVal: iconVal})
          }
        },
        // tooltip中的按钮点击事件
        detailsVal(xTime, content, dialogOpen) {
          if (dialogOpen && dialogOpen !== 'null') {
            this.$emit('showChartTabList', {value: xTime, tableVal: this.lineData.dataList[0].data[content]});
          } else {
            this.$emit('dialogChartTabList', {value: xTime, tableVal: this.lineData.dataList[0].data[content]});
          }
        }
      }
    }
</script>
<style scoped>
  /* 新增样式 */
  .chart-wrapper {
    position: relative; /* 为绝对定位的下拉框提供参考 */
    width: 100%;
    height: 100%;
  }
  .chart-container {
    width: 100%;
    height: 100%;
  }
  .selOptionSty {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
  }
  .yaxis-selector {
    position: absolute; /* 绝对定位，相对于 .chart-wrapper */
    z-index: 10; /* 确保下拉框显示在图表上方 */
    /* 初始位置，后续由 js 方法精细调整 */
    top: 0;
    left: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 5px;
    font-size: 12px;
  }
  .yaxis-legSelector {
    position: absolute; /* 绝对定位，相对于 .chart-wrapper */
    z-index: 10; /* 确保下拉框显示在图表上方 */
    /* 初始位置，后续由 js 方法精细调整 */
    top: 0;
    /*left: 0;*/
    background: white;
    font-size: 12px;
  }
  ::v-deep .tab_border {
    padding: 2px 10px;
    border-bottom: 1px solid #ddd;
  }
  ::v-deep .ellipsis {
    max-width: 300px;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis; /* 显示省略号来代表被裁剪的文本 */
  }
  ::v-deep .el-select__tags .el-tag:nth-child(1) {
    width: 65%;
  }
</style>
