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

const store = useWsStore();
const chartChart = ref(null);
const chart = ref(null);
const showChartDom = ref(false);

/** 无状态，处理数据 */
function loadData(yieldArray) {
  const result = [];
  if (yieldArray == undefined || yieldArray?.length == 0) return null;
  for (let i = 0; i < yieldArray.length; ++i) {
    if (yieldArray[i].teamName == "A组") {
      result[0] = parseInt(yieldArray[i].yield);
    } else if (yieldArray[i].teamName == "B组") {
      result[1] = parseInt(yieldArray[i].yield);
    } else if (yieldArray[i].teamName == "C组") {
      result[2] = parseInt(yieldArray[i].yield);
    }
  }
  return result;
}

function setupChart(chart, dom, data) {
  if (chart.value) chart.value.dispose();
  nextTick(() => {
    chart.value = echarts.init(dom);
    setupFn(chart.value, data);
  });
}

/** 有状态，处理数据 */
function __apply(yieldArray) {
  const d = loadData(yieldArray);
  // const d = loadData([
  //   { teamName: "A组", yield: 11 },
  //   { teamName: "B组", yield: 23 },
  //   { teamName: "C组", yield: 14 },
  // ]);
  if (!d) {
    showChartDom.value = false;
    if (chart.value) chart.value.dispose();
    return;
  }
  showChartDom.value = true;
  setupChart(chart, chartChart.value, d);
}

// 订阅
store.$subscribe((mutation, state) => {
  __apply(state.data2.classTodayProductYield);
});

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

<template>
  <Container class="chart" title="本日班组情况" icon="cube">
    <div
      ref="chartChart"
      class="chart-chart"
      :style="{ opacity: showChartDom ? 1 : 0 }"
    ></div>
    <p v-show="!chart" class="empty-data-hint">暂无数据</p>
  </Container>
</template>

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

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