<template>
  <ns-drawer
    v-model:visible="visible"
    width="562px"
    :title="' '"
    :footer-style="{ textAlign: 'right' }"
    :ok="btnClick"
    :cancel="handleClose"
    placement="right"
    @close="handleClose">
    <div style="width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden">
      <!-- top -->
      <div class="box">
        <div class="card"></div>
        <div style="left: 25px; position: absolute; height: 35px; line-height: 35px">
          告警编号：{{ infoObject.alarmCode }}
        </div>
        <div style="right: 20px; position: absolute; height: 35px; line-height: 35px">
          {{ infoObject.updateTime }}
        </div>
      </div>
      <!-- center -->
      <div style="width: 100%; height: 400px">
        <div style="width: 100%; height: 100%" ref="graphChart"></div>
      </div>
      <!-- bottom -->
      <div style="width: 100%; margin-top: 10px">
        <a-descriptions :column="1" bordered>
          <a-descriptions-item label="优先级">{{
            infoObject.priority ? infoObject.priority.label : ''
          }}</a-descriptions-item>
          <a-descriptions-item label="状态">{{
            infoObject.alarmLogState ? infoObject.alarmLogState.label : ''
          }}</a-descriptions-item>
          <a-descriptions-item label="错误码">{{ infoObject.errorCode }}</a-descriptions-item>
          <a-descriptions-item label="告警描述">
            <div style="color: #2778ff">{{ infoObject.alarmTitle }}</div>
            {{ infoObject.abnormalDescription }}</a-descriptions-item
          >
          <a-descriptions-item label="监测点位">
            {{ infoObject.monitoringPoints }}
          </a-descriptions-item>
          <a-descriptions-item label="重复次数">
            {{ infoObject.alarmRepetitions }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
    <template #footer>
      <a-button type="primary" @click="handleClose">确定</a-button>
    </template>
  </ns-drawer>
</template>
<script lang="ts" setup>
  defineOptions({
    name: 'look', // 与页面路由name一致缓存才可生效
  });
  import { ref } from 'vue';
  import * as echarts from 'echarts';

  let chartInstance: echarts.ECharts | null = null;
  const graphChart = ref(null);
  const infoObject = ref({
    priority: null,
    alarmCode: null,
    alarmLogState: null,
    errorCode: null,
    alarmTitle: null,
    abnormalDescription: null,
    monitoringPoints: null,
    alarmRepetitions: null,
    updateTime: null,
  });
  const visible = ref(false);
  const handleClose = () => {
    visible.value = false;
    if (chartInstance) {
      chartInstance.dispose();
    }
    infoObject.value = {
      priority: null,
      alarmCode: null,
      alarmLogState: null,
      errorCode: null,
      alarmTitle: null,
      abnormalDescription: null,
      monitoringPoints: null,
      alarmRepetitions: null,
      updateTime: null,
    };
  };
  const btnClick = () => {
    handleClose();
  };
  const toggle = (data: any) => {
    infoObject.value = data;
    visible.value = true;
    setTimeout(() => {
      getChatr();
    }, 500);
  };
  const getChatr = () => {
    let dayData = [];
    let energyAlarm: any = [];

    // Extend data for 30 days
    for (let i = 1; i < 30; i++) {
      dayData.push(`3/${i}`);
      energyAlarm.push(Math.floor(Math.random() * 250));
    }
    if (chartInstance) {
      chartInstance.dispose();
    }
    chartInstance = echarts.init(graphChart.value);
    const option = {
      // title: {
      //   text: '告警趋势/ 近30天',
      //   textStyle: {
      //     fontSize: 16,
      //     fontWeight: 'normal',
      //     color: '#aaaaaa',
      //   },
      //   left: '1%',
      //   top: '2%',
      // },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        formatter: function (params: any) {
          let res = params[0].marker + '    ' + params[0].seriesName + '  :    ' + params[0].data;
          return res;
        },
      },
      grid: {
        left: '10%', // 设置图表距离左边的距离
        right: '4%', // 设置图表距离右边的距离
        top: '6%',
        borderWidth: 0,
        y2: 60, // 距离底边
      },
      legend: [
        {
          show: false,
          top: 5,
          left: 'center', // 将图例居中显示
          textStyle: {
            color: 'rgb(89, 89, 89)',
            fontSize: '14',
            fontWeight: 'normal',
          }, // 注意这里的颜色值要用引号括起来
          data: ['电压值'],
          itemGap: 30, // 这里可以调整图例项之间的间距，单位为像素
        },
      ],
      // toolbox: {
      //   show: true,
      //   feature: {
      //     restore: {},
      //     saveAsImage: {},
      //   },
      // },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          splitLine: {
            show: false,
          },
          axisTick: {
            show: true,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            show: true, // 显示 X 轴刻度标签
            color: 'rgb(89, 89, 89)', // X 轴刻度标签的字体颜色
            fontSize: 12, // X 轴刻度标签的字体大小
            formatter: function (value: any) {
              // 可选：格式化 X 轴刻度标签文本
              return value;
            },
          },
          data: dayData,
        },
      ],
      yAxis: [
        {
          type: 'value',
          shwo: false,
          splitLine: {
            show: true,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            show: true, // 显示
            formatter: function (value: any) {
              return value + ' V'; // 在刻度值后加上单位
            },
          },
        },
      ],
      //滑块样式
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 100,
        },
        {
          type: 'slider',
          // backgroundColor: 'yellow',
          // fillerColor: 'yellow',
          height: 12, // 设置slider的高度为15
          start: 0,
          end: 100,
          right: 60,
          left: 60,
          bottom: 10,
          handleIcon:
            'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标
          handleSize: '140%', // 放大按钮
          // borderColor: 'none',
          handleStyle: {
            // color: 'red',
            // shadowBlur: 6,
            // shadowColor: 'yellow',
            shadowOffsetX: 0, // 阴影偏移x轴多少
            shadowOffsetY: 0, // 阴影偏移y轴多少
          },
          // 显示的label的格式化器
          // 20050101 变为 2005\n0101
          // labelFormatter: function (index, value) {
          //   const year = value.slice(0, 4);
          //   const date = value.slice(4);
          //   return year + '\n' + date;
          // },
          // textStyle: {
          //   fontStyle: 'italic', // 设置字体倾斜
          // },
          showDataShadow: false, // 隐藏数据阴影
        },
      ],
      series: [
        {
          name: '电压值',
          type: 'line',
          itemStyle: {
            normal: {
              barBorderRadius: 0,
              color: '#2778FF',
            },
          },
          symbol: 'circle', // 数据点的形状，这里设置为圆形
          symbolSize: 8,
          label: {
            show: true,
            color: 'rgb(89, 89, 89)',
            position: 'top',
            top: '10',
            formatter: function (value: any) {
              return Number(energyAlarm[value.dataIndex]) + 'V';
            },
          },
          data: energyAlarm,
        },
      ],
    };
    chartInstance = echarts.init(graphChart.value);
    chartInstance.setOption(option);
  };
  defineExpose({
    toggle,
  });
</script>
<style scoped lang="less">
  .box {
    width: 100%;
    height: 35px;
    display: flex;
    position: relative;
    font-size: @font-size-base;
    border-bottom: 1px solid @primary-color;
  }
  .card {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 5px;
    height: 35px;
    background-color: @primary-color;
  }
  :deep(.ant-descriptions-item-label) {
    width: 25%;
  }
</style>