<template>
  <div class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" title="第n周生产订单完成情况" />
    <div ref="chartRef" class="charts-container"></div>
    <dv-decoration-2 style="width: 100%; height: 5px" />
  </div>
</template>

<script lang="ts" setup>
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
import * as echarts from "echarts";
import { weekProductionSchedule } from "@/api/screens";
const bigScreenData: any = inject("bigScreenData");
const chartRef = ref(null);

onMounted(async () => {
  const chart = echarts.init(chartRef.value, "dark");

  let res: any = await weekProductionSchedule();

  const maxNum = Math.max.apply(null, res?.data[2]);
  const barWidth = 20;

  const option = {
    backgroundColor: "transparent",
    textStyle: {
      fontSize: bigScreenData.value.fontSize * 2,
    },
    title: {
      text: "百分比柱子",
      show: false,
      textStyle: {
        fontSize: bigScreenData.value.fontSize * 2,
      },
    },
    xAxis: {
      show: false,
    },
    yAxis: {
      data: res?.data[0],
      splitLine: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          fontSize: bigScreenData.value.fontSize * 2,
          color: "#02afff",
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: false,
    },
    series: [
      {
        type: "bar",
        barWidth: barWidth,
        zlevel: 2,
        data: res?.data[1].map(function (item, index) {
          return {
            value: item,
            maxNum: res?.data[2][index],
          };
        }),
        label: {
          show: true,
          position: "inside",
          // distance: 80,
          align: "left",
          formatter: function (params) {
            // return params.data.realValue;
            var percent =
              Number((params.data.value / params.data.maxNum) * 100).toFixed(
                2
              ) + "%";
            return percent;
          },
          color: "#fff",
          fontSize: bigScreenData.value.fontSize * 2,
        },
        itemStyle: {
          borderRadius: 10,
          color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            { offset: 0, color: "#395CFE" },
            { offset: 1, color: "#2EC7CF" },
          ]),
        },
      },
      {
        type: "bar",
        barWidth: barWidth,
        barGap: "-100%",
        data: res?.data[2].map(function (item, index) {
          return {
            maxNum: maxNum,
            completeNum: res?.data[1][index],
            value: item,
          };
        }),
        label: {
          show: true,
          position: "right",
          distance: 80,
          align: "right",
          formatter: function (params) {
            return params.data.completeNum + "/" + params.data.value + " 件";
          },
          color: "#02afff",
          fontSize: bigScreenData.value.fontSize * 2,
        },
        itemStyle: {
          borderRadius: 10,
          color: "rgba(3,169,244, 0.5)",
        },
      },
    ],
  };

  chart.setOption(option);
});

const props = defineProps({
  moduleId: {
    type: String,
    required: true,
  },
});
</script>

<style lang="scss" scoped></style>
