<template>
  <div class="device-monitor">
    <!-- 顶部标题栏 -->
    <div class="header">
      <div class="header_title">
        <h2>上海站</h2>
      </div>
      <button class="close-btn" @click="closePanel">×</button>
    </div>
    
    <!-- 设备列表内容区 -->
    <div class="content">
      <div id="childrenInstant" class="cdfCurve"></div>
      <div class="showValue">
        <div v-for="(item, index) in markLineData" :key="index">
          <span style="font-weight: 900;font-size: 15px;" :style="{ color: item.color }">---</span>: {{ item.descript }}
        </div>
      </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 myChart = null;
const lineColor = ['#2C74EE', '#6FFCBA'];
const markLineData = ref([
  {
    color: '#89dac4',
    descript: "最大值：12"
  },
  {
    color: '#da45ds',
    descript: "最小值：12"
  },
  {
    color: '#56fds9',
    descript: "平均值：12"
  },
])

onMounted(() => {
  initChart();
});

onUnmounted(() => {
  if (myChart) {
    window.removeEventListener('resize', resizeChart);
    myChart.dispose();
  }
});

function initChart() {
  const chartDom = document.getElementById('childrenInstant');
  myChart = echarts.init(chartDom);
    
  const option = {
    legend: {
      show: true,
      data: ['空口链路丢包率', '通信设备丢包率'],
      textStyle: {
        color: '#fff',
        fontSize: 12
      },
      borderColor: 'transparent',
      padding: [15, 10],
      icon: 'rect',
      itemWidth: 15,
      itemHeight: 5,
    },
    grid: {
      top: '20%',
      right: '5%',
      bottom: '10%',
      left: '10%'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      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: [
      {
        name: '空口链路丢包率',
        data: [12, 13, 85, 53, 19, 23, 18],
        type: 'line',
        smooth: 0.6,
        symbol: 'none',
        lineStyle: {
          color: lineColor[0],
          width: 5
        },
        markLine: {
          symbol: 'none',
          label: {
            show: false
          },
          data: [
            {
              yAxis: 45,
              lineStyle: {
                color: '#ff0000',
                width: 2,
                type: 'dashed'
              },
            },
            {
              yAxis: 70,
              lineStyle: {
                color: '#ff55f5',
                width: 2,
                type: 'dashed'
              },
            }
          ]
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: lineColor[0]
              },
              {
                offset: 1,
                color: 'rgba(0,0,0,0.31)'
              }
            ],
            global: false
          }
        }
      },
      {
        name: '通信设备丢包率',
        data: [102, 13, 55, 13, 9, 23, 18],
        type: 'line',
        smooth: 0.6,
        symbol: 'none',
        lineStyle: {
          color: lineColor[1],
          width: 5
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: lineColor[1]
              },
              {
                offset: 1,
                color: 'rgba(0,0,0,0.31)'
              }
            ],
            global: false
          }
        }
      }
    ],
    tooltip: {
      trigger: 'axis',
      extraCssText: 'z-index: 999999 !important;',
      backgroundColor: 'rgba(50,50,50,0.8)',
      borderColor: '#333',
      borderWidth: 1,
      padding: 10,
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    }
  };

  myChart.setOption(option);
  resizeChart();
  window.addEventListener('resize', resizeChart);
}

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

const closePanel = () => {
  emits('isDetialDialogVisibleHandleClose')
  // showView.value = false;
};
</script>

<style scoped>
.device-monitor {
  width: 350px;
  height: 330px;
  background-color: #1e1e2d;
  border-radius: 10px;
  color: #e0e0e0;
  /* font-family: 'Consolas', monospace;  */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
  position: fixed;
  /* top: 0; */
  right: 390px;
  bottom: 0;
  margin: auto;
}

.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: contain;
  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: 350px;
  height: 220px;
}

.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>