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

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

// 绿色：24FF5E
// 黄色：FFB524
// 红色：FF3737
onMounted(() => {
  chartContainer.value.classList.add("h-full");
  const d = loadData(store.data2.monthlyTarget);
  // const d = loadData([
  //   {
  //     targetProduction: 100,
  //     nowProduction: 66,
  //     targetYield: 13,
  //     nowYield: 3,
  //   },
  // ]);
  if (!d) {
    show.value = false;
    if (chartInstance.value) {
      chartInstance.value.dispose();
      chartInstance.value = null;
    }
  } else {
    if (!chartInstance.value)
      chartInstance.value = echarts.init(chartContainer.value);
    setupFn(chartInstance.value, d);
    show.value = true;
  }
});

// 订阅
store.$subscribe((mutation, state) => {
  const d = loadData(state.data2.monthlyTarget);
  // const d = loadData([
  //   {
  //     targetProduction: 100,
  //     nowProduction: 66,
  //     targetYield: 13,
  //     nowYield: 3,
  //   },
  // ]);
  if (!d) {
    show.value = false;
    if (chartInstance.value) {
      chartInstance.value.dispose();
      chartInstance.value = null;
    }
  } else {
    if (!chartInstance.value)
      chartInstance.value = echarts.init(chartContainer.value);
    setupFn(chartInstance.value, d);
    show.value = true;
  }
});

// utils
function loadData(monthlyTarget) {
  if (
    monthlyTarget == undefined ||
    // monthlyTarget?.length == 0 ||
    !monthlyTarget[0]
  ) {
    return null;
  }

  return {
    targetProduction: monthlyTarget[0].targetProduction,
    nowProduction: monthlyTarget[0].nowProduction,
    targetYield: monthlyTarget[0].targetYield,
    nowYield: monthlyTarget[0].nowYield,
  };
}
</script>

<template>
  <Container class="chart" title="本月生产线情况" 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>
