<template>
  <div :id="computedId" style="width: 100%; height: 100%" class="chart-container"></div>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  onUnmounted,
  watch,
  computed,
  watchEffect,
  nextTick,
} from "vue";
import * as echarts from "echarts";
let bigchart = ref(null);
const props = defineProps({
  chartOption: {
    type: Object,
    default: null,
  },
});
// const { id, xAxis_name, yAxis_name, name, x_data, y_data } = props.chartOption;
// const computedId = computed(() => (props.chart_type ? `${id}${props.chart_type}` : id));
const computedId = ref("csd");
let commonCharts = null;
let option = ref({
  title: {
    text: props.chartOption.name,
    left: "center",
    top: "0",
  },
  xAxis: [
    {
      // name: "时间/s",
      name: props.chartOption.xAxis_name,
      nameGap: "45",
      nameLocation: "center",
      show: true,
      splitLine: {
        lineStyle: {
          // type: "dashed",
        },
        show: false,
      },
      type: "category",
      // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      data: props.chartOption.x_data,
    },
  ],
  yAxis: {
    type: "value",
    axisLine: {
      show: true,
    },
 
    type: "value",
    // name: "温度/℃",
    name: props.chartOption.yAxis_name,
    nameLocation: "center",
    nameGap: "45",
  },
  series: [
    {
      // data: [820, 932, 901, 934, 1290, 1330, 1320],
      data: props.chartOption.series_data,
      type: "line",
      smooth: true,
    },
  ],
});
const initCharts = () => {
  const chartDom = document.getElementById(computedId.value);
  console.log(chartDom, "chartDom");
  nextTick(() => {
    if (chartDom) {
      commonCharts = echarts.init(chartDom);
      nextTick(() => {
        // console.log(option.value.series[0]['data'], 'xxxx');
        commonCharts.clear();
        commonCharts.setOption(option.value, true);
      });
    }
  });
};
const renderCharts = () => {
  if (!commonCharts) {
    initCharts();
  } else {
    nextTick(() => {
      // commonCharts.clear();
      commonCharts.setOption(option.value, true);
    });
  }
};
onMounted(() => {
  console.log('11111222222222222')
  initCharts();
});
watch(
  () => props.chartOption,
  (newOption) => {
    console.log('object',props.chartOption);
    option.value = {
      ...option.value,
      // title: {
      //   ...option.value.title,
      //   text: newOption.name,
      // },
      legend: {
        top: "30",
      },
      xAxis: [
        {
          // name: "时间/s",
          name: props.chartOption.xAxis_name,
          nameGap: "35",
          nameLocation: "center",
          show: true,
          splitLine: {
            lineStyle: {
              // type: "dashed",
            },
            show: false,
          },
          type: "category",
          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          data: props.chartOption.x_data,
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLine: {
            show: false,
          },
          nameLocation: "center",
          nameGap: "45",
          type: "value",
          name: newOption.yAxis_name,
          scale: false,
        },
      ],
      series: [
      {
          type: "line",
          smooth: true,
          symbol: "none",

          data: props.chartOption.series_data,
        }
      ],
    };
    renderCharts();
  },
  {
    deep: true,
    immediate: true,
    // flush: "post",
  }
);
watchEffect(() => {
  if (props.chart_type && props.chartOption) {
    renderCharts();
  }
});
onUnmounted(() => {
  if (commonCharts) {
    commonCharts.dispose();
    commonCharts = null;
  }
});
</script>
<style lang="less" scoped></style>
