<template>
  <view class="content">
    <l-echart ref="domMyChart" class="echarts"></l-echart>
  </view>
</template>

<script setup>
import * as echarts from "echarts";
import { onLoad, onShow, onHide, onLaunch, onResize } from "@dcloudio/uni-app";
import { defineComponent, ref, onMounted, nextTick, watch } from "vue";

const props = defineProps({
  currentDateList: {
    type: Object,
    default: null,
  },
});

const domMyChart = ref(null);
let myChart;
let option;

var legendData = [];
var seriesData = [];

function initData() {
  legendData = [];
  seriesData = [];

  if (props.currentDateList.length > 0) {
    props.currentDateList.forEach((el) => {
      legendData.push(el.attributeName);

      seriesData.push({
        name: el.attributeName,
        type: "line",
        data: el.data,
        emphasis: {
          focus: "series",
          blurScope: "coordinateSystem",
        },
        symbolSize: 5,
      });
    });
  } else {
    legendData = ["暂无数据"];
    seriesData = [
      {
        // smooth: true,  //设置折线为圆滑曲线,false则有转折点
        name: "暂无数据",
        type: "line",
        data: [
          ["2023-06-07", 0],
          ["2023-06-14", 0],
        ],
        emphasis: {
          focus: "series",
          blurScope: "coordinateSystem",
        },
        symbolSize: 5,
        // symbol: "circle",
      },
    ];
  }

  option = {
    tooltip: {
      backgroundColor: "rgba(255, 255, 255, 0.8)",
      borderColor: "rgba(0, 0, 0, 0.1)",
      order: "valueDesc",
      trigger: "axis",
      // formatter: function (params) {
      //   var res = ``;
      //   res += `
      //           <view>${params[0].axisValueLabel.split(" ")[0]}</view>
      //           `;
      //   for (let i in params) {
      //     res += `
      //           <view style="display:flex">
      //               <view style="width:10px;height:10px;background:${params[i].color};border-radius: 10px;margin:10px 0;"></view>
      //               <view style="padding:4px 0px 0px 10px;">${params[i].seriesName} :</view>
      //               <view style="padding:4px 0px 0px 10px;">${params[i].data[1]}</view>
      //           </view>`; //可以在这个方法中做改变
      //   }
      //   return res;
      // },
    },
    legend: {
      type: "scroll", //设置超出滚动
      bottom: 0,
      right: "auto",
      left: "center",
      padding: [5, 10, 18, 10],
      data: legendData,
      itemGap: 30, // 图例间隔
      itemWidth: 30, // 图例宽度
      itemHeight: 10, //高度
      textStyle: {
        fontSize: "12",
        fontFamily: "font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;",
      },
      formatter: function (name) {
        return name;
      },
    },
    grid: {
      left: "3%",
      top: 30,
      right: "4%",
      bottom: "15%",
      containLabel: true,
    },
    toolbox: {
      show: false,
    },
    xAxis: {
      type: "time",
      boundaryGap: false,
      nameTextStyle: {
        // 名称样式
        fontSize: 12,
        color: "#fff",
        fontWeight: "bold",
      },
      axisLine: {
        lineStyle: {
          // color: "rgba(0,0,0,0.1)",
        },
        // symbol: ["none", "arrow"], //轴线两边的箭头
        symbolSize: [8, 12],
      },
      axisLabel: {
        show: false,
        showMaxLabel: true,
        formatter: {
          year: "{yyyy}",
          month: "{MM}-{dd}",
          // day: "{MM}-{dd} {hh}:{mm}",
          day: "{dd}",
          hour: "{MM}-{dd} {HH}:{mm}",
          minute: "{HH}:{mm}",
          second: "{HH}:{mm}:{ss}",
          millisecond: "{hh}:{mm}:{ss} {SSS}",
          none: "{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}",
        },
      },
    },
    yAxis: {
      type: "value",
    },
    series: seriesData,
  };
}

function initEcharts() {
  // let dom = uni.createSelectorQuery().select("#linEcharts");
  // myChart = echarts.init(document.getElementById("linEcharts"));
  // 观测更新的数据在 view 层可以直接访问到
  // myChart.setOption(option);

  myChart = domMyChart.value;
  myChart.init(echarts, (myChart) => {
    myChart.setOption(option);
  });
}

onLoad(() => {
  nextTick(() => {
    initData();
    initEcharts();
  });
});

onResize(() => {
  myChart.resize();
});

watch(
  () => props.currentDateList,
  (val) => {
    initData();
    initEcharts();
  }
);
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.echarts {
  width: 100%;
  height: 600rpx;
  /* margin-top: 70rpx; */
  /* background:pink */
}
</style>
