<script setup>
import { ref, onMounted, nextTick } from "vue";
import Container from "../Base/Container.vue";
import { useWsStore } from "../../store";
import YieldChart from "../Chart/YieldChart.vue";
import RateChart from "../Chart/RateChart.vue";

const displayProductionChart = ref(false);
const displayRateChart = ref(false);
const websocketData = ref(null);
const refreshToken = ref(1);
const store = useWsStore();

onMounted(() => {
  // websocketData.value = loadData([
  //   {
  //     targetProduction: 1220,
  //     nowProduction: 8,
  //     targetYield: null,
  //     nowYield: null,
  //   },
  // ]);
  websocketData.value = loadData(store.data2.dailyTarget);
  if (!websocketData.value) {
    displayProductionChart.value = false;
    displayRateChart.value = false;
  } else {
    /** 阻止  targetProduction == 0 */
    if (!websocketData.value.targetProduction) {
      displayProductionChart.value = false;
    } else {
      displayProductionChart.value = true;
    }
    /** 阻止  targetYield == 0 */
    if (!websocketData.value.targetYield) {
      displayRateChart.value = false;
    } else {
      displayRateChart.value = true;
    }
  }
});

// 订阅
store.$subscribe((mutation, state) => {
  // const d = loadData([
  //   {
  //     targetProduction: 100,
  //     nowProduction: 66,
  //     targetYield: 13,
  //     nowYield: 3,
  //   },
  // ]);
  websocketData.value = loadData(state.data2.dailyTarget);
  if (!websocketData.value) {
    displayProductionChart.value = false;
    displayRateChart.value = false;
  } else {
    /** 阻止  targetProduction == 0 */
    if (!websocketData.value.targetProduction) {
      displayProductionChart.value = false;
    } else {
      if (refreshToken.value > 100000) refreshToken.value = 0;
      refreshToken.value += 1;
      displayProductionChart.value = true;
    }
    /** 阻止  targetYield == 0 */
    if (!websocketData.value.targetYield) {
      displayRateChart.value = false;
    } else {
      if (refreshToken.value > 100000) refreshToken.value = 0;
      refreshToken.value += 1;
      displayRateChart.value = true;
    }
  }
});

// utils
function loadData(dailyTarget) {
  if (dailyTarget == undefined || !dailyTarget[0]) {
    return null;
  }

  return {
    // 目标产量
    targetProduction: dailyTarget[0].targetProduction,
    // 当前产量
    nowProduction: dailyTarget[0].nowProduction,
    // 目标成品率
    targetYield: dailyTarget[0].targetYield,
    // 当前成品率
    nowYield: dailyTarget[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> -->
    <div class="container-body__h-full">
      <yield-chart
        :key="refreshToken + '_yield_chart_linetoday'"
        :raw-data="websocketData"
      />
      <rate-chart
        :display-placeholder="!displayRateChart"
        :key="refreshToken + '_rate_chart_linetoday'"
        :raw-data="websocketData"
        :isOnlyChild="!displayProductionChart"
      />
      <!-- <p
        v-if="!displayProductionChart && !displayRateChart"
        style="
          height: 100%;
          line-height: 350px;
          user-select: none;
          flex: 1;
          color: #fffc;
          font-size: 24px;
          text-align: center;
        "
      >
        暂无数据
      </p> -->
    </div>
  </Container>
</template>

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

.chart-chart {
  height: 100%;
}

.container-body__h-full {
  height: 100%;
  display: flex;
  gap: 12px;
}
</style>
