<template>
  <div class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" title="物料情况" />
    <dv-capsule-chart
      :config="config"
      class="charts-container"
      style="width: calc(100% - 20px)"
    />
  </div>
</template>

<script lang="ts" setup>
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
import { materialSituation } from "@/api/screens";
import { allChartColors } from "@/views/screens/configs/chartsConfig";
const bigScreenData: any = inject("bigScreenData");
const config = ref({});

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

onMounted(async () => {
  let res = await materialSituation();
  let { data } = res;
  let bigData: any[] = [];
  data?.forEach((item: any) => {
    bigData.push({
      name: item.materialName,
      value: item.count,
    });
  });
  config.value = {
    colors: allChartColors,
    data: bigData,
    showValue: true,
    fontSize: bigScreenData.value.fontSize * 2,
  };
});
</script>
<style lang="scss" scoped>
:deep(.capsule-item-column) {
  height: 2.2vh !important;
}
:deep(.capsule-item) {
  height: 2.2vh !important;
  margin-top: -0.1vh !important;
}
</style>
