<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 "./LatestWeekYieldOptions";

const store = useWsStore();
const chartContainer = ref(null);
const chartInstance = ref(null);
const show = ref(false);

onMounted(() => {
  chartContainer.value.classList.add("h-full");
  // const d = loadData(store.data2.lineSevenDayLogList);
  const d = loadData([
    {
      data: [
        { day: "1001", num: 24 },
        { day: "1002", num: 14 },
        { day: "1003", num: 234 },
        { day: "1004", num: 84 },
        { day: "1005", num: 34 },
        { day: "1006", num: 44 },
        { day: "1007", num: 20 },
      ],
      name: "钢一线",
    },
    { data: [], name: "钢二线" },
    { data: [], name: "钢三线" },
  ]);
  if (!d) {
    show.value = false;
    if (chartInstance.value) {
      chartInstance.value.dispose();
      chartInstance.value = null;
    }
  } else {
    if (!chartInstance.value)
      chartInstance.value = echarts.init(chartContainer.value);
    chartSetup(chartInstance.value);
    show.value = true;
  }
});

// 订阅
store.$subscribe((mutation, state) => {
  // const d = loadData(state.data2.lineSevenDayLogList);
  const d = loadData([
    {
      data: [
        { day: "1001", num: 24 },
        { day: "1002", num: 14 },
        { day: "1003", num: 234 },
        { day: "1004", num: 84 },
        { day: "1005", num: 34 },
        { day: "1006", num: 44 },
        { day: "1007", num: 20 },
      ],
      name: "钢一线",
    },
    {
      data: [
        { day: "1001", num: 24 },
        { day: "1002", num: 14 },
        { day: "1003", num: 234 },
        { day: "1004", num: 84 },
        { day: "1005", num: 34 },
        { day: "1006", num: 44 },
        { day: "1007", num: 20 },
      ],
      name: "钢二线",
    },
    {
      data: [
        { day: "1001", num: 24 },
        { day: "1002", num: 14 },
        { day: "1003", num: 234 },
        { day: "1004", num: 84 },
        { day: "1005", num: 34 },
        { day: "1006", num: 44 },
        { day: "1007", num: 20 },
      ],
      name: "钢三线",
    },
  ]);
  if (!d) {
    show.value = false;
    if (chartInstance.value) {
      chartInstance.value.dispose();
      chartInstance.value = null;
    }
  } else {
    if (!chartInstance.value)
      chartInstance.value = echarts.init(chartContainer.value);
    chartSetup(chartInstance.value);
    show.value = true;
  }
});

function loadData(list) {
  if (!list || list.length != 3 || list[0].data.length <= 0) return null;
  const outerdata = [[], [], [], [], [], [], []];

  list.forEach(line => {
    
  })

  const dateList = list[0].data.map((item) => item.day.toString()).sort();
  console.log("datelist", dateList);
  dateList.forEach((date, index) => {
    outerdata[index][0] = date;
  });
  list.forEach((line, index) => {
    if (line.data[0] != null) {
      for (let x = 0; x < 7; x++) {
        for (let y = 0; y < line.data.length; y++) {
          if (outerdata[x + 1][0] == line.data[y].day) {
            outerdata[x + 1][line + 1] = line.data[y].num;
          }
        }
      }
    }
  });
  return outerdata;
}
</script>

<template>
  <Container class="chart" title="近7日产量" icon="cube">
    <div
      ref="chartContainer"
      class="chart-chart"
      :style="{ opacity: show ? 1 : 0 }"
    ></div>
    <p v-show="!show" 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>
