<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 xData = [
    {
        date:"8/1",
        text:'一级',
        level:1
    },
    {
        date:"8/2",
        text:'一级',
        level:1
    },
    {
        date:"8/3",
        text:'一级',
        level:1
    },
    {
        date:"8/4",
        text:'二级',
        level:2
    },
    {
        date:"8/5",
        text:'二级',
        level:2
    },
    {
        date:"8/6",
        text:'二级',
        level:2
    },
    {
        date:"8/7",
        text:'一级',
        level:1
    },
    {
        date:"8/8",
        text:'一级',
        level:1
    },
    {
        date:"8/9",
        text:'三级',
        level:3
    },
    {
        date:"8/2",
        text:'三级',
        level:3
    },
    {
        date:"8/10",
        text:'一级',
        level:1
    },
    {
        date:"8/11",
        text:'一级',
        level:1
    },
    {
        date:"8/12",
        text:'一级',
        level:1
    },
    {
        date:"8/13",
        text:'三级',
        level:3
    },
    {
        date:"8/14",
        text:'一级',
        level:1
    },
]

const colors = [
  {
    offset: 0.25,
    color: "rgba(255, 123, 49, 0.2)",
  },
  {
    offset: 0.5,
    color: "rgba(255, 123, 49, 0.3)",
  },
  {
    offset: 0.75,
    color: "rgba(255, 123, 49, 0.5)",
  },
  {
    offset: 1,
    color: "rgba(255, 123, 49, 0.8)",
  },
];

const options = {
  tooltip: {
    trigger: "axis",
    backgroundColor: "#FF743E",
    borderColor: "#FF743E",
    textStyle: {
      color: "#FFF",
    },
    formatter: "{c0}%",
    padding: [2, 5],
  },
  grid: {
    top: "10%",
    left: "2%",
    right: "3%",
    bottom: "8%",
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      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,
        formatter:(i)=>{
            const str = `${xData[i].date}\n{level${xData[i].level}|${xData[i].text}}`
            return str
        },
        rich:{
            level1:{
                fontSize: '14px',
                padding:[12,0,0,0],
                color:'#FFA043'
            },
            level2:{
                fontSize: '14px',
                padding:[12,0,0,0],
                color:'#FF4824'
            },
            level3:{
                fontSize: '14px',
                padding:[12,0,0,0],
                color:'#FF1313'
            }
        }
      },
      boundaryGap: false,
    },
    //   {
    //   type: "category",
    //   data: [
    //     "一级",
    //     "三级",
    //     "二级",
    //     "二级",
    //     "二级",
    //     "一级",
    //     "一级",
    //     "三级",
    //     "一级",
    //     "一级",
    //     "二级",
    //     "二级",
    //     "一级",
    //     "一级",
    //   ],
    //   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: 100,
      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: "#FF7B31",
        borderWidth: 1,
        borderColor: "#fff",
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, colors, false),
        },
      },
      lineStyle: {
        width: 1,
        color: "#F74E0C",
      },
    },
  ],
};

const initData = async () => {
  const { code, data } = await VE_API.znxy.growAbnormal({
    gardenId: curGardenId.value,
  });
  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>
