<template>
  <div class="device-monitor">
    <!-- 顶部标题栏 -->
    <div class="header">
      <div class="header_title">
        <h2>巴西-最小值(CDF曲线图)</h2>
      </div>
      <button class="close-btn" @click="closePanel">×</button>
    </div>

    <!-- 设备列表内容区 -->
    <div class="content">
      <div class="content_header">
        <span>时间段</span>
        <!-- <el-date-picker
        v-model="value2"
        type="datetimerange"
      
      /> -->
        <el-date-picker popper-class="custom-date-popper" v-model="dateRange" type="daterange" size="small"
          unlink-panels range-separator="->" start-placeholder="开始时间" end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss"
          :default-time="defaultDateTimeRange" :disabled-date="disabledDate" :disabled-hours="disabledHours"
          :cell-class-name="(date) => 'date-picker-custom'" />
        <el-button @click="handleDateRangeChange" size="small">查询</el-button>
      </div>
      <div id="ghCurve" class="cdfCurve"></div>
      <div id="sjCurve" class="cdfCurve"></div>
      <div id="dblCurve" class="cdfCurve"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';




const props = defineProps(['devices', 'isDetialDialogVisible'])
const emits = defineEmits(['errorDialoghandleClose', 'isDetialDialogVisibleHandleClose'])

let myCharts = []; // 存储多个图表实例
const lineColor = ['#2e7dff', '#6FFCBA', '#7590bc', '#ff95c7'];

// 为每个图表定义配置数据，支持不同数量的series
const chartConfigs = ref([
  {
    id: 'ghCurve',
    series: [
      {
        name: '空口链路丢包率',
        data: [12, 13, 85, 53, 19, 23, 18],
        Xdata: [1, 2, 3, 4, 5, 6, 7],
        colorIndex: 0
      }
    ]
  },
  {
    id: 'sjCurve',
    series: [
      {
        name: '网络延迟',
        data: [25, 35, 65, 45, 30, 40, 28],
        Xdata: [1, 2, 3, 4, 5, 6, 7],
        colorIndex: 1
      }
    ]
  },
  {
    id: 'dblCurve',
    series: [
      {
        name: '发送速率',
        data: [20, 70, 60, 25, 30, 22, 60, 18, 12, 28, 12, 56],
        Xdata: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        colorIndex: 2
      },
      {
        name: '接收速率',
        data: [110, 18, 60, 18, 12, 28, 12, 56, 89, 21, 78, 25],
        Xdata: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        colorIndex: 3
      }
    ]
  }
]);

const defaultDateTimeRange = ref([

  new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate(), 0, 0, 0),
  new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate(), 0, 0, 0),

]);
// 定义时间范围选择器
function formatDate(date) {
  if (!date) return '';
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
const dateRange = ref([]);
function handleDateRangeChange() {
  const submitData = {
    startTime: formatDate(dateRange.value[0]),
    endTime: formatDate(dateRange.value[1])
  }
  //console.log("提交：",submitData);
  if (submitData.startTime && submitData.endTime) {
    chartConfigs.value = [
      {
        id: 'ghCurve',
        series: [
          {
            name: '空口链路450Mbps-丢包率',
            data: [12, 3, 5, 93, 19, 23, 18],
            Xdata: [1, 2, 3, 4, 5, 6, 7],
            colorIndex: 0
          }
        ]
      },
      {
        id: 'sjCurve',
        series: [
          {
            name: '网络cxcz延迟',
            data: [25, 95, 15, 5, 30, 40, 28],
            Xdata: [1, 2, 3, 4, 5, 6, 7],
            colorIndex: 1
          }
        ]
      },
      {
        id: 'dblCurve',
        series: [
          {
            name: '发送速率size',
            data: [20, 70, 60, 25, 90, 22, 60, 18, 12, 28, 12, 56],
            Xdata: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            colorIndex: 2
          },
          {
            name: '接收速率size',
            data: [110, 18, 60, 18, 12, 28, 12, 56, 89, 21, 7, 25],
            Xdata: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            colorIndex: 3
          }
        ]
      }
    ];
    myCharts.forEach(chart => {
      if (chart) {
        chart.dispose();
      }
    });
    chartConfigs.value.forEach(config => {
      const chartDom = document.getElementById(config.id);
      if (chartDom) {
        initChart(chartDom, config);
        // resizeChart()
      }
    });
  } else {
    ElMessage({
      type: 'warning',
      message: '完善开始时间和结束时间的选择',

    });
  }

}
// 禁用未来日期
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
onMounted(() => {
  // 初始化所有图表
  chartConfigs.value.forEach(config => {
    alert(config)
    console.log('初始化config', config)
    const chartDom = document.getElementById(config.id);
    if (chartDom) {
      initChart(chartDom, config);
      resizeChart()
    }
  });
});

onUnmounted(() => {
  // 销毁所有图表
  myCharts.forEach(chart => {
    if (chart) {
      chart.dispose();
    }
  });
});

function initChart(chartDom, config) {
  const myChart = echarts.init(chartDom);
  myCharts.push(myChart); // 存储图表实例

  // 根据series配置动态构建legend数据
  const legendData = config.series.map(series => series.name);

  // 动态构建series配置
  const seriesOptions = config.series.map((seriesItem) => {
    const color = lineColor[seriesItem.colorIndex];
    return {
      name: seriesItem.name,
      data: seriesItem.data,
      type: 'line',
      smooth: 0.6,
      symbol: 'none',
      lineStyle: {
        color: color,
        width: 5
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: color
            },
            {
              offset: 1,
              color: 'rgba(0,0,0,0.31)'
            }
          ],
          global: false
        }
      }
    };
  });

  const option = {
    legend: {
      show: true,
      data: legendData,
      textStyle: {
        color: '#fff',
        fontSize: 12
      },
      top: 5,
      left: 0,
      backgroundColor: 'transparent',
      borderColor: 'transparent',
      padding: [5, 10],
      icon: 'rect',
      itemWidth: 15,
      itemHeight: 5,
    },
    grid: {
      top: '20%',
      right: '2%',
      bottom: '15%',
      left: '4%'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: config.series[0]?.Xdata || [], // 使用第一个series的X轴数据
      axisLabel: {
        interval: 0,
        rotate: 0,
        fontSize: 10,
        color: '#fff',
      }
    },
    yAxis: {
      type: 'value',
      max: 120,
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)',
          width: 1,
          type: 'dashed'
        }
      },
      splitNumber: 5,
      axisLabel: {
        color: '#fff',
        fontSize: 10,
        formatter: function (value) {
          return value.toFixed(0);
        }
      }
    },
    series: seriesOptions,
    tooltip: {
      trigger: 'axis',
      extraCssText: 'z-index: 99 !important;',
      backgroundColor: 'rgba(50,50,50,0.8)',
      borderColor: '#333',
      borderWidth: 1,
      padding: 10,
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    }
  };

  myChart.setOption(option);

  // 添加resize处理
  const handleResize = () => myChart.resize();
  window.addEventListener('resize', handleResize);

  // 保存resize处理函数以便后续可能需要移除
  myChart._resizeHandler = handleResize;
}

function resizeChart() {
  myCharts.forEach(chart => {
    if (chart) {
      chart.resize();
    }
  });
}

const closePanel = () => {
  emits('isDetialDialogVisibleHandleClose')
};
</script>

<style scoped>
.device-monitor {
  width: 900px;
  height: 750px;
  background-color: #1e1e2d;
  border-radius: 10px;
  color: #e0e0e0;
  /* font-family: 'Consolas', monospace;  */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 15px;
  border-bottom: 1px solid #383850;
  position: relative;
}

.header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 56, 80, 0.8), transparent);
}

.header_title h2 {
  margin: 3px;
  padding-left: 9px;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header_title {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/lefts/errorHeader.png');
  background-size: 80% 10%;
  background-repeat: no-repeat;
  background-position: center;
}

.close-btn {
  width: 15px;
  height: 15px;
  background: #1E1E2D;
  border: none;
  color: #aaa;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: relative;
  top: -4px;
}

.close-btn:hover {
  color: #ffffff;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  background: #000000;
}

.cdfCurve {
  width: 900px;
  height: 220px;
}

.content_header {
  width: 55%;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  gap: 10px;
  /* background-color: #2a2a3a; */
}

.content_header span {
  width: 60px;
  font-size: 11px;
  color: #e0e0e0;

}

:deep(.el-date-editor) {
  background-color: #000000;
  box-shadow: 0 0 2px rgba(131, 131, 131, 0.95);
}

:deep(.el-button) {
  background: #000000;
  border: none;
  color: #e0e0e0;
  width: 70px;
}

:deep(.el-range-input) {
  color: #ffffff;
}

:deep(.el-range-separator) {
  color: #ffffff;
}

:deep(.el-button:hover) {
  background: linear-gradient(to bottom, #2C76F1, #000000);
  border: none;
  box-shadow: none;
}

:deep(.custom-date-popper) {
  background-color: #1e1e2d;
  border: 1px solid #383850;
}

:deep(.date-picker-custom) {
  background-color: #000000;
  box-shadow: none;
}

/* .date-picker-custom :deep(.el-range-editor) {
  width: 10%;
  height: 100%;
  background-color: #1e1e2d;
  border-color: #000000;
}

.date-picker-custom :deep(.el-range-editor .el-range-input) {
  color: #e0e0e0;
  background-color: transparent;
}

.date-picker-custom :deep(.el-range-editor .el-range-separator) {
  color: #e0e0e0;
}

:deep(.custom-date-picker) {
  background-color: #1e1e2d;
  border: 1px solid #383850;
}

:deep(.custom-date-picker .el-picker-panel__body) {
  background-color: #1e1e2d;
  color: #e0e0e0;
} */

.showValue {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  font-size: 13px;
}

.content::-webkit-scrollbar {
  width: 8px;
}

.content::-webkit-scrollbar-track {
  background: #25253a;
  border-radius: 4px;
}

.content::-webkit-scrollbar-thumb {
  background: #444460;
  border-radius: 4px;
}

.content::-webkit-scrollbar-thumb:hover {
  background: #555570;
}

@media (max-width: 480px) {
  .device-monitor {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}
</style>