<template>
  <div class="water-detection-charts">
    <custom-echart-line-line :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
const legendData = ['矿物质', '钠元素'];

let series = reactive([
  {
    name: legendData[0],
    type: 'line',
    symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆
    smooth: true,
    lineStyle: {
      normal: {
        width: 1,
        color: '#00e6fb', // 线条颜色
      },
    },
    areaStyle: {
      normal: {
        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
        color: {
          type: 'linear', // 线性渐变
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(2, 113, 146,1)' },
            { offset: 0.4, color: 'rgba(2, 83, 111,1)' },
            { offset: 0.7, color: 'rgba(2, 64, 77,1)' },
            { offset: 1, color: 'rgba(1, 18, 43)' },
          ],
          global: false, // 默认为 false
        },
      },
    },
    data: [0.64, 0.34, 0.7, 0.44, 0.74, 0.12, 0.65, 0.41, 0.85, 0.96, 0.23, 0.16],
    markLine: {
      symbol: 'none',
      silent: true,
      lineStyle: {
        color: 'red', // 确保颜色可见
        width: 2, // 确保线条宽度足够
        type: 'solid',
      },
      data: [
        { yAxis: 0.5, name: '基准线1' },
        { yAxis: 0.7, name: '基准线2' },
      ],
      label: {
        show: true,
        position: 'end',
        formatter: '{b}: {c}',
        color: '#fff',
      },
    },
  },
  {
    name: legendData[1],
    type: 'line',
    symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆
    smooth: true,
    lineStyle: {
      normal: {
        width: 1,
        color: 'rgb(0, 254, 150)', // 线条颜色
      },
    },
    areaStyle: {
      normal: {
        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
        color: {
          type: 'linear', // 线性渐变
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgb(42, 140, 102)' },
            { offset: 0.6, color: 'rgb(14, 82, 63)' },
            { offset: 1, color: 'rgb(1, 18, 43)' },
          ],
          global: false, // 默认为 false
        },
      },
    },
    data: [0.14, 0.73, 0.38, 0.46, 0.65, 0.17, 0.89, 0.95, 0.47, 0.19, 0.86, 0.58],
  },
]);
const currentMonth = ref(new Date().getMonth() + 1);
const xPoint = computed(() => {
  let list = [];
  console.info('111', currentMonth.value);
  for (let i = 1; i < 13; i++) {
    let mouth = i < 10 ? i : i;
    list.push(mouth + '月');
  }
  return list;
});

const chartsData = reactive({
  option: {
    backgroundColor: '#00001b',
    grid: {
      left: 20,
      right: 20,
      bottom: '5%',
      top: '20%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(33, 85, 154, .6)',
      borderWidth: 1,
      borderColor: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: 'rgba(85, 149, 233, .6)', // 0% 处的颜色
          },
          {
            offset: 1,
            color: 'rgba(85, 149, 233, 0)', // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
      padding: 8,
      textStyle: {
        color: '#fff',
      },
      axisPointer: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, .6)',
        },
      },
      extraCssText: 'box-shadow: 2px 2px 16px 1px rgba(0, 39, 102, 0.16)',
      formatter: function (params) {
        let content = `<div style='font-size: 14px; color: #fff;'>${params[0].name}</div>`;
        if (Array.isArray(params)) {
          for (let i = 0; i < params.length; i++) {
            content += `
                       <div style='display: flex; align-items: center; padding: 4px; background: #21559A; margin-top: 4px; color: #fff;'>
                         <div style='width: 10px; height: 10px; background: ${params[i].color}; margin-right: 8px;'></div>
                         <div style='font-size: 12px; margin-right: 32px;'>${params[i].seriesName}</div>
                         <div style='font-size: 14px;'>${params[i].value}</div>
                       </div>
                     `;
          }
        }
        return content;
      },
    },
    legend: {
      show: true,
      data: Array.from(legendData),
      left: 'center', // 距离左侧10%的位置
      top: '0', // 垂直居中
      itemWidth: 15, // 图例标记的宽度
      itemHeight: 8, // 图例标记的高度
      textStyle: {
        fontSize: 10, // 图例文字的字体大小
        color: '#fff', // 图例文字的颜色
      },
    },
    // legend: [
    //   {
    //     data: [
    //       {
    //         name: legendData[0],
    //         icon: 'rect',
    //       },
    //     ],
    //     itemWidth: 10,
    //     itemHeight: 2,
    //     top: '2%',
    //     left: '40%',
    //     textStyle: {
    //       color: '#ADD7FF',
    //       fontSize: 12,
    //     },
    //   },
    //   {
    //     top: '2%',
    //     left: '55%',
    //     textStyle: {
    //       color: '#ADD7FF',
    //       fontSize: 14,
    //     },
    //     itemWidth: 18,
    //     itemHeight: 2,
    //     data: [
    //       {
    //         name: legendData[1],
    //         icon: 'rect',
    //       },
    //     ],
    //   },
    // ],
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
        textStyle: {
          color: '#DEEBFF',
          fontStyle: 'normal',
          fontSize: 10,
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        // 坐标轴轴线相关设置
        lineStyle: {
          color: 'rgba(77, 128, 254, 0.2)',
        },
      },
      splitLine: {
        show: false,
      },
      data: xPoint.value,
    },
    yAxis: {
      type: 'value',
      name: ' ',
      nameTextStyle: {
        color: '#DEEBFF',
        fontSize: 14,
        padding: [0, 0, 0, -30],
      },
      axisLabel: {
        interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
        textStyle: {
          color: '#DEEBFF',
          fontStyle: 'normal',
          fontSize: 12,
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        // 坐标轴轴线相关设置
        lineStyle: {
          color: 'rgba(77, 128, 254, 0.2)',
        },
      },
      splitLine: {
        show: false,
      },
    },
    series: series,
  },
});

onMounted(() => {});
</script>
<style lang="scss" scoped>
.water-detection-charts {
  height: 100%;
}
</style>
