<template>
  <el-card
    shadow="always"
    class="common-card-container common-card-container-body-no-padding"
  >
    <div slot="header">
      <span class="card-title">电池平均温度</span>
    </div>
    <div ref="chartRef" style="height: 360px" />
  </el-card>
</template>

<style scoped lang="scss"></style>
<script>
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import { getPointConfigCurve } from "@/api/ems/site";

export default {
  mixins: [resize],
  props: {
    displayData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chartRef);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    init(siteId,timeRange) {
      const [startTime='', endTime=''] = timeRange;
      const row = (this.displayData || []).find(
        (item) =>
          item &&
          item.fieldCode === "SBJK_SSYX__curveBatteryAveTemp" &&
          item.useFixedDisplay !== 1 &&
          item.dataPoint
      );
      const pointId = String(row?.dataPoint || "").trim();
      if (!pointId) {
        this.setOption([]);
        return;
      }
      getPointConfigCurve({
        siteId,
        pointId,
        rangeType: "custom",
        startTime: this.normalizeDateTime(startTime, false),
        endTime: this.normalizeDateTime(endTime, true)
      })
        .then((response) => {
          const list = response?.data || [];
          this.setOption(
            list
              .map((item) => [this.parseToTimestamp(item.dataTime), Number(item.pointValue)])
              .filter((item) => item[0] && !Number.isNaN(item[1]))
          );
        });
    },
    normalizeDateTime(value, endOfDay) {
      const raw = String(value || "").trim();
      if (!raw) return "";
      if (raw.includes(" ")) return raw;
      return `${raw} ${endOfDay ? "23:59:59" : "00:00:00"}`;
    },
    parseToTimestamp(value) {
      if (!value) return null;
      const t = new Date(value).getTime();
      return Number.isNaN(t) ? null : t;
    },
    setOption(data = []) {
      this.chart && this.chart.setOption({
        legend: {
          left: "center",
          top: "5",
          itemWidth: 10,
          itemHeight: 5,
          textStyle: {
            fontSize: 9,
          },
        },
        grid: {
          containLabel: true,
        },
        tooltip: {
          show:true,
          trigger: "axis",
          axisPointer: {
            type: "cross",
          }
        },
        textStyle: {
          color: "#333333",
        },
        xAxis: { type: "time" },
        yAxis: {
          type: "value",
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        series: [
          {
            type: "line",
            name: `电池平均温度`,
            showSymbol: false,
            smooth: true,
            areaStyle: {
              opacity: 0.35
            },
            data,
          },
        ],
      },true);
    },
  },
};
</script>
