<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";
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(() => {
  const chartl = echarts.init(chartLeftRef.value, "dark");
  const chartm = echarts.init(chartMiddleRef.value, "dark");
  const chartr = echarts.init(chartRightRef.value, "dark");

  chartl.setOption(gernerateOptionsWithData([40, 4], "1000", "%", "产品名称"));
  chartm.setOption(gernerateOptionsWithData([40, 50], "1000", "%", "产品名称"));
  chartr.setOption(gernerateOptionsWithData([40, 50], "57", "%", "产品名称"));
});

const gernerateOptionsWithData = (
  data: number[],
  centerText: string,
  unitText: string,
  titleText: string
) => {
  const option = {
    color: ["#2196F3", "#fff"],
    backgroundColor: "transparent",
    title: {
      text: titleText,
      left: "center",
      top: "10%",
      textStyle: {
        fontSize: bigScreenData.value.fontSize * 1.8,
      },
    },
    textStyle: {
      fontSize: bigScreenData.value.fontSize * 1.8,
    },
    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: "center",
        style: {
          text: centerText + unitText,
          textAlign: "center",
          fill: "#00BCD4", // 数值颜色
          fontSize: bigScreenData.value.fontSize * 1.8, // 数值大小
        },
      },
    ],
  };
  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>
