<script setup>
import { ref, watch, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import Container from "../Base/Container.vue";
import { useWsStore } from "../../store";
import chartSetup from "./HourChartOptions";

const store = useWsStore();
const chartChart = ref(null);
const chart = ref(null);
// 小时数据
const hourData = ref([
  // { hour: "0:1", data: 10 },
  // { hour: "0:2", data: 13 },
  // { hour: "0:3", data: 20 },
  // { hour: "0:4", data: 12 },
  // { hour: "0:5", data: 12 },
  // { hour: "0:6", data: 11 },
  // { hour: "0:7", data: 10 },
  // { hour: "0:8", data: 1 },
]);
store.$subscribe((mutation, state) => {
  if (
    state.data2.lineHourList == undefined ||
    state.data2.lineHourList?.length == 0
  ) {
    hourData.value.splice(0);
    if (chart.value) chart.value.dispose();
    return;
  }
  hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
    id: `${item.lineName}_${index}`,
    hour: item.hour || `${index}`.padStart(2, "0"),
    data: item.num || Math.floor(Math.random() * 100),
  }));
  setupChart();
});

function setupChart() {
  if (chart.value) chart.value.dispose();
  nextTick(() => {
    chart.value = echarts.init(chartChart.value);
    chartSetup(
      chart.value,
      hourData.value.map((item) => item.hour),
      hourData.value.map((item) => item.data)
    );
  });
}

onMounted(() => {
  chartChart.value.classList.add("h-full");
  // setupChart();
});
</script>

<template>
  <Container class="chart" title="小时数据" icon="cube">
    <div
      ref="chartChart"
      class="chart-chart"
      style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"
    ></div>
    <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
      暂无数据
    </p>
  </Container>
</template>

<style scoped>
.chart {
  /* height: 300px; */
  height: auto;
}

.chart-chart {
  height: 100%;
}
</style>

<style>
.empty-data-hint {
  color: #c5c5c5;
  letter-spacing: 1px;
  font-size: 24px;
  line-height: 1.25;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: inline-block;
  width: 200px;
  height: 32px;
  user-select: none;
}
</style>
