<template>
  <div class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" align="start" title="生产量情况" />
    <div class="container">
      <div ref="chartRef" class="charts-container"></div>
      <div class="describe-container">
        <div>
          <span
            class="typeText"
            :style="{ fontSize: bigScreenData.fontSize * 1.7 + 'px' }"
            >生产目标</span
          >
          <span
            class="valueText"
            :style="{ fontSize: bigScreenData.fontSize * 1.9 + 'px' }"
            >{{ progressOption.orderNum }}</span
          >
          <span
            class="unitText"
            :style="{ fontSize: bigScreenData.fontSize * 1.7 + 'px' }"
            >件</span
          >
        </div>
        <div>
          <span
            class="typeText"
            :style="{ fontSize: bigScreenData.fontSize * 1.7 + 'px' }"
            >实际生产量</span
          >
          <span
            class="valueText"
            :style="{ fontSize: bigScreenData.fontSize * 1.9 + 'px' }"
            >{{ progressOption.comNum }}</span
          >
          <span
            class="unitText"
            :style="{ fontSize: bigScreenData.fontSize * 1.7 + 'px' }"
            >件</span
          >
        </div>
      </div>
    </div>
    <div class="bottom-progress">
      <div
        class="titleText"
        :style="{ fontSize: bigScreenData.fontSize * 1.9 + 'px' }"
      >
        月进度
      </div>
      <dv-percent-pond
        :config="progressOption"
        style="width: 100%; height: 20px"
      />
    </div>
  </div>
</template>

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

const generateOption = (c: string, o: string) => {
  const option = {
    series: [
      {
        type: "gauge",
        progress: {
          show: true,
          width: 12,
        },
        axisLine: {
          lineStyle: {
            width: 12,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          distance: 2,
          length: 4,
          lineStyle: {
            width: 2,
            color: "#999",
          },
        },
        axisLabel: {
          distance: 12,
          color: "#999",
          fontSize: bigScreenData.value.fontSize * 1.5,
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 16,
          itemStyle: {
            borderWidth: 10,
          },
        },
        title: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          fontSize: bigScreenData.value.fontSize * 2,
          offsetCenter: [0, "70%"],
          formatter: "{value}%",
          textStyle: {
            color: "#fff",
          },
        },
        data: [
          {
            value: Number((Number(c) / Number(o)) * 100).toFixed(0),
          },
        ],
      },
    ],
  };
  return option;
};

const progressOption = ref({
  value: 66,
  localGradient: true,
  orderNum: 0,
  comNum: 0,
});

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

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

  progressOption.value = {
    value: Number(data.rate) * 100,
    localGradient: true,
    orderNum: Number(data.orderNum),
    comNum: Number(data.completeNum),
  };

  chart.setOption(generateOption(data.completeNum, data.orderNum));
});

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

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 60px);
  //border: 1px solid red;
}

.bottom-progress {
  height: 30px;
  display: flex;
  padding: 0 20px;
  width: calc(100% - 60px);

  .titleText {
    color: white;

    width: 60px;
    margin-right: 10px;
  }
}

.charts-container {
  width: 60%;
  height: 100%;
  //border: 1px solid blue;
}

.describe-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  width: 40%;
}

.typeText {
  font-size: 14px;
  color: #009688;
}

.valueText {
  font-size: 16px;
  color: #4caf50;
  margin-right: 10px;
  margin-left: 10px;
}

.unitText {
  font-size: 12px;
  color: #009688;
}
</style>
