<template>
  <div class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" align="start" title="生产任务统计" />
    <div class="container">
      <div ref="chartLeftRef" class="item"></div>
      <dv-decoration-2 :reverse="true" style="width: 5px; height: 100%" />
      <div ref="chartMiddleRef" class="item"></div>
      <dv-decoration-2 :reverse="true" style="width: 5px; height: 100%" />
      <div ref="chartRightRef" class="item"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
import * as echarts from "echarts";
import { productionStatistics } from "@/api/screens";
const bigScreenData: any = inject("bigScreenData");
const props = defineProps({
  moduleId: {
    type: String,
    required: true,
  },
});

const chartLeftRef = ref(null);
const chartMiddleRef = ref(null);
const chartRightRef = ref(null);

onMounted(async () => {
  const chartl = echarts.init(chartLeftRef.value, "dark");
  const chartm = echarts.init(chartMiddleRef.value, "dark");
  const chartr = echarts.init(chartRightRef.value, "dark");

  let res: any = await productionStatistics();
  let { data } = res;

  chartl.setOption(
    gernerateOptionsWithData([data.orderNum], data.orderNum, "件")
  );
  chartm.setOption(
    gernerateOptionsWithData(
      [data.completeNum],
      data.completeNum,
      "件",
      "实际生产数"
    )
  );
  chartr.setOption(
    gernerateOptionsWithData(
      [Number(data.rate), 1 - Number(data.rate)],
      Number(data.rate) * 100 + "",
      "%",
      "合格率"
    )
  );
});

const gernerateOptionsWithData = (
  data: number[],
  centerText: string,
  unitText: string,
  titleText: string = "订单需求数"
) => {
  const option = {
    color: ["#2196F3", "#fff"],
    backgroundColor: "transparent",
    title: {
      text: titleText,
      left: "center",
      bottom: "20",
    },
    legend: {
      show: false,
    },
    series: [
      {
        name: "订单需求数",
        type: "pie",
        radius: ["40%", "60%"],
        center: ["50%", "50%"],
        data: data,
        label: {
          show: false,
          position: "center",
        },
      },
    ],
    graphic: [
      {
        type: "text",
        left: "center",
        top: "45%",
        style: {
          text: centerText,
          textAlign: "center",
          fill: "#00BCD4", // 数值颜色
          fontSize: bigScreenData.value.fontSize * 2.5,
        },
      },
      {
        type: "text",
        left: "center",
        top: "52%",
        style: {
          text: unitText,
          textAlign: "center",
          fill: "#607D8B", // 单位颜色
          fontSize: bigScreenData.value.fontSize * 2.5, // 单位大小
        },
      },
    ],
  };
  return option;
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: calc(100% - 20px);
}

.item {
  flex: 1;
  width: 100%;
  height: 100%;
}
</style>
