<template>
  <div ref="chartDom" class="box-echars"></div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
import * as echarts from "echarts";

const getters = useStore().getters;
const curGardenId = ref(getters.userinfo.curGardenId);

let chartDom = ref(null);
let myChart = null;

onMounted(() => {
  myChart = echarts.init(chartDom.value);
  myChart.setOption(options);
  //   initData();
});

const colors = [
  {
    offset: 0.25,
    color: "rgba(0, 154, 243, 0.2)",
  },
  {
    offset: 0.5,
    color: "rgba(0, 154, 243, 0.3)",
  },
  {
    offset: 0.75,
    color: "rgba(0, 154, 243, 0.5)",
  },
  {
    offset: 1,
    color: "rgba(0, 154, 243, 0.8)",
  },
];

const options = {
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(255,255,255,0)",
    borderColor: "rgba(255,255,255,0)",
    textStyle: {
      color: "#FFF",
    },
    formatter: (params) => {
      const htmlStr = `<div class="tooltip-double-line">
                            <div class="name">龙眼</div>
                            <div class="text">高温预警</div>
                       </div>`;
      return htmlStr;
    },
    padding: [0],
  },
  grid: {
    top: "10%",
    left: "2%",
    right: "2%",
    bottom: "1%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      data: [
        "8/1",
        "8/2",
        "8/3",
        "8/4",
        "8/5",
        "8/6",
        "8/7",
        "8/8",
        "8/9",
        "8/10",
        "8/11",
        "8/12",
        "8/13",
        "8/14",
      ],
      axisLine: {
        show: true,
        lineStyle: {
          color: "#ffffff2f",
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: "#ffffff4f",
        },
        alignWithLabel: true,
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: "rgba(255, 255, 255, 0.73)",
        },
        // 默认x轴字体大小
        fontSize: 12,
        align: "center",
        margin: 12,
      },
      boundaryGap: false,
    },
  ],
  yAxis: [
    {
      name: "",
      type: "value",
      max: 40,
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
        formatter: "{value}°",
        margin: 10,
      },
      // 分割线
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      name: "蓝色",
      type: "line",
      smooth: true,
      data: [5, 21, 12, 13, 11, 22, 34, 32, 5, 21, 12, 13, 11, 22],
      showSymbol: false,
      symbol: "circle",
      symbolSize: 8,
      itemStyle: {
        color: "#009AF3",
        borderWidth: 1,
        borderColor: "#fff",
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, colors, false),
        },
      },
      lineStyle: {
        width: 1,
        color: "#009AF3",
      },
    },
    {
      name: "红色",
      type: "line",
      smooth: true,
      data: [15, 11, 10, 12, 21, 32, 24, 22, 10, 11, 22, 33, 21, 20],
      showSymbol: false,
      symbol: "circle",
      symbolSize: 8,
      itemStyle: {
        color: "#FF0000",
        borderWidth: 1,
        borderColor: "#fff",
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0.25,
                color: "rgba(255, 0, 0, 0.2)",
              },
              {
                offset: 0.5,
                color: "rgba(255, 0, 0, 0.3)",
              },
              {
                offset: 0.75,
                color: "rgba(255, 0, 0, 0.5)",
              },
              {
                offset: 1,
                color: "rgba(255, 0, 0, 0.8)",
              },
            ],
            false
          ),
        },
      },
      lineStyle: {
        width: 1,
        color: "#FF0000",
      },
    },
  ],
};

const initData = async () => {
  myChart.clear();
  options && myChart.setOption(options);
};
</script>

<style lang="scss" scoped>
.box-echars {
  width: 100%;
  height: calc(100% - 40px);
}
</style>
<style lang="scss">
.tooltip-double-line {
  width: 116px;
  height: 65px;
  background: url("@/assets/img/detailsPage/tooltip_bg.png") no-repeat center
    center / 100% 100%;
  .name {
    font-weight: bold;
    font-size: 18px;
    color: #00fcff;
    text-align: center;
    line-height: 28px;
  }
  .text {
    width: 100px;
    height: 24px;
    background: linear-gradient(183deg, #ff7575, #d83738);
    border-radius: 12px;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    margin: auto;
    margin-top: 9px;
  }
}
</style>
