<template>
  <div ref="echart" class="echart animate__animated animate__fadeIn"></div>
</template>

<script setup>
import { ref, shallowRef } from "vue";
import chartOptionYs from "./chartYs";
const props = defineProps({
  echartData: {
    type: Object,
    default: () => ({}),
  },
});
const { echartData } = props;
const echartOptions = JSON.parse(JSON.stringify(chartOptionYs));
echartOptions.grid.top = "22%";
echartOptions.grid.right = "4%";
echartOptions.color = [
  "#5470c6",
  "#91cc75",
  "#fac858",
  "#ee6666",
  "#73c0de",
  "#3ba272",
  "#fc8452",
  "#9a60b4",
  "#ea7ccc",
];
const { proxy } = getCurrentInstance();
const myChart = shallowRef(null);

const getOptions = () => {
  if (!echartData) return;
  echartOptions.series = [];
  echartOptions.legend.data = [];
  echartOptions.xAxis.data = [];
  echartOptions.yAxis = [];
  if (JSON.stringify(echartData) == "{}" || echartData.propertyMonitorXList.length == 0) {
    echartOptions.xAxis.data = [];
    return false;
  } else {
    echartOptions.xAxis.data = echartData.propertyMonitorXList;
    echartData.propertyMonitorList.map((item, i) => {
      const values = item.ylist.map((it) => it * 1);
      const max = Math.max(...values);
      echartOptions.yAxis.push({
        type: "value",
        name: item.value, //value是英文单位，label是中文单位
        position: "left",
        offset: 50 * i,
        axisLine: { show: true, lineStyle: { color: echartOptions.color[i] } },
        axisTick: { show: true },
        splitLine: {
          show: true, // 显示网格线
          lineStyle: { type: "dashed" },
        },
        min: 0,
        max: Math.ceil(max),
      });
      echartOptions.series.push({
        name: item.monitorPropertyName + item.propertyUnit,
        type: "line",
        smooth: true,
        data: item.ylist,
        lineStyle: { color: echartOptions.color[i] },
        yAxisIndex: i,
      });
      echartOptions.legend.data.push(item.monitorPropertyName + item.propertyUnit);
    });
    echartOptions.grid.left = 50 * (echartOptions.yAxis.length - 1); //left值设置
    return echartOptions;
  }
};

// 初始化echarts
function intChart() {
  if (!!myChart.value) {
    myChart.value.dispose();
  }
  // 绘制图表
  const dom = proxy.$refs.echart;
  if (!dom) return;
  myChart.value = proxy.echarts.init(dom, "dark");
  myChart.value.setOption(echartOptions);
}

//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}

onMounted(() => {
  const options = getOptions();
  if (options) intChart();
  window.addEventListener("resize", resizeTheChart);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeTheChart);
});
</script>

<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 260px;
}
</style>