<!--
 * @Author: zhp
 * @Date: 2024-05-07 10:04:53
 * @LastEditTime: 2024-05-31 13:19:34
 * @LastEditors: zhp
 * @Description:
-->

<template>
  <div class="efficiency-copilot">
    <Container title="芯片良率" icon="chip2">
      <ChipRate :period="period" :than="than" />
    </Container>
    <Container title="标准组件良率" icon="std">
      <StdRate :period="period" :than="than" />
    </Container>
    <Container title="芯片OEE" icon="chip">
      <ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
    </Container>
    <Container title="转化效率" icon="cube">
      <TransformRate :transformRate="transformRate" :period="period" :than="than" />
    </Container>
  </div>
</template>

<script>
import Container from "@/views/copilot/components/Container.vue";
import ChipOeeVue from "./components/ChipOee.vue";
import ChipRateVue from "./components/ChipRate.vue";
import StdRateVue from "./components/StdRate.vue";
import TransformRateVue from "./components/TransformRate.vue";

export default {
  name: "EfficiencyCopilot",
  components: {
    Container,
    ChipOee: ChipOeeVue,
    ChipRate: ChipRateVue,
    StdRate: StdRateVue,
    TransformRate: TransformRateVue,
  },
  props: {
    period: {
      type: String,
      default: "日",
    },
    than: {
      type: String,
      default: "同比",
    },
  },
  data() {
    return {
      chipOeeRate: {},
      transformRate:{}
    };
  },
  watch: {
    period: {
      handler(val) {
        val && this.fetchData(val,this.than);
      },
      immediate: true,
    },
    than: {
      handler(val) {
        console.log(val)
        val && this.fetchData(this.period, val);
      },
      immediate: true,
    },
  },
  methods: {
    fetchData(period = "日",than) {
      console.log(`效率驾驶舱，获取${period}数据`);
      this.$store.dispatch("copilot/initCopilot", {
        period,
        source: "efficiency",
        than
      }).then(() => {
        this.$nextTick(() => {
          this.chipOeeRate = this.$store.getters.copilot.efficiency.chipOeeRate
          this.transformRate = this.$store.getters.copilot.efficiency.transformRate
        })
      })
    },
  },
};
</script>

<style scoped>
.efficiency-copilot {
  flex: 1;
  display: grid;
  gap: 16px;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr)
}

.efficiency-copilot > div {
  height: 100%;
}
</style>
