<template>
  <div class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" title="每日产量统计" />
    <div ref="chartRef" class="charts-container"></div>
  </div>
</template>

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

onMounted(async () => {
  const chart = echarts.init(chartRef.value, "dark");
  let res: any = await stationProduction();
  const option = {
    grid: {
      left: "10%",
      right: "10%",
      top: "10%",
      bottom: "15%",
    },
    color: allChartColors,
    backgroundColor: "transparent",
    xAxis: {
      type: "category",
      data: res?.data?.map((item: any) => item.stationName),
      axisLabel: {
        fontSize: bigScreenData.value.fontSize * 2,
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        fontSize: bigScreenData.value.fontSize * 2,
      },
    },
    series: [
      {
        data: res?.data?.map((item: any) => item.number),
        type: "bar",
      },
    ],
  };
  chart.setOption(option);
});

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

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