<template>
  <div class="wrapper">
    <h2 class="card-title">近24小时降雨量变化趋势图</h2>
    <div class="chart-wrapper">
      <div class="chart-container" ref="chartRef"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from "vue";
import * as echarts from "echarts";
import { ChevronUp } from "@vicons/ionicons5";

const chartRef = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;

// 初始化ECharts
const initChart = () => {
  if (!chartRef.value) return;
  chartInstance = echarts.init(chartRef.value);
  const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`);
  const data = hours.map(() => Math.floor(Math.random() * 150) + 20);

 // 定义警戒线值
  const warningLines = [
     { value: 50, name: '蓝色警戒线', color: '#409EFF' },
    { value: 100, name: '黄色警戒线', color: '#FFD700' },
    { value: 150, name: '橙色警戒线', color: '#FF8C00' },
    { value: 200, name: '红色警戒线', color: '#FF0000' }
  ];

  chartInstance.setOption({
    grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
     tooltip: {
    trigger: 'axis'
  },
  //  toolbox: {
  //   show: true,
  //   feature: {
  //     dataZoom: {
  //       yAxisIndex: 'none'
  //     },
  //     dataView: { readOnly: false },
  //     magicType: { type: ['line', 'bar'] },
  //     restore: {},
  //     saveAsImage: {}
  //   }
  // },
    xAxis: {
      type: "category",
      data: hours,
      axisLine: { lineStyle: { color: "#4f6b95" } },
      axisLabel: { color: "#a0b3d6", interval: 2 },
    },
    yAxis: {
      name:'mm',
      // nameLocation:'end',
      // nameGap: 10, // 单位与Y轴轴线的间距
      // nameAlign:'left',
      // axisLabel: {
      //       offset: 200 // 向左移动10像素
      //   },
      // nameTextStyle: { padding: [-30, 0, 0, 0] },
      nameTextStyle: {
      color: "white", //颜色
      padding: [0, 30, 0, 0], //间距分别是 上 右 下 左
  },
      type: "value",
      max: 300,
      axisLine: { lineStyle: { color: "#4f6b95" } },
      axisLabel: { color: "white"},
      splitLine: { lineStyle: { color: "rgba(79, 107, 149, 0.2)" } },
      // // 添加警戒线标记
      // axisTick: {
      //   show: false
      // }

    },
    
    series: [
      {
        data,
        type: "line",
        smooth: true,
        showSymbol: false, // 显示数据点显示
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(54, 162, 235, 0.4)" },
            { offset: 1, color: "rgba(54, 162, 235, 0)" },
          ]),
        },
        lineStyle: { color: "rgba(54, 162, 235, 1)", width: 2 },
      //    markPoint: {// 气泡
      //   data: [
      //     { type: 'max', name: 'Max' },
      //     { type: 'min', name: 'Min' }
      //   ]
      // },
      markLine: {
         symbol: 'none',
        // data: [{ type: 'average', name: 'Avg' }]
        data: warningLines.map(line => ({
          label: {
            show: false
          },
            name: line.name,
            yAxis: line.value,
            lineStyle: {
              color: line.color,
              width: 1,
              type: 'dashed',
             
              
            }
          }))
      }
      },
    ],
  });
};

// 窗口缩放适配
const resizeChart = () => chartInstance?.resize();

onMounted(() => {
  nextTick(initChart);
  window.addEventListener("resize", resizeChart);
});

onUnmounted(() => {
  window.removeEventListener("resize", resizeChart);
  chartInstance?.dispose();
});
</script>

<style scoped lang="scss">
.wrapper {
  overflow: visible;
  width: 4.6rem;
  height: 3rem;
  position: relative;
  padding: 0.15rem;
  // padding-top: 0.45rem;

  .card-title {
    position: absolute;
    left: 0.25rem;
    top: -0.15rem;
    font-weight: 500;
    font-size: 0.2rem;
    color: #ffffff;
    text-shadow: 0rem 0rem 0rem rgba(5, 38, 68, 0.5);
  }
  width: 100%;
  margin-top: 0.3rem;
  background-image: url("@/assets/jinrun/module-bg.png");
  background-repeat: no-repeat;
  .chart-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
  }
  .chart-container{
    width: 100%;
    height: 100%;
  }

}
</style>