<template>
  <div class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" align="start" title="生产计划情况" />
    <dv-scroll-board
      :config="config"
      style="width: calc(100% - 40px); height: calc(100% - 32px)"
    />
  </div>
</template>

<script lang="ts" setup>
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
import { productionPlan, productionPlanList } from "@/api/screens";
import { useDictionaryStore } from "@/store";
const bigScreenData: any = inject("bigScreenData");
const config = ref({});
const dictS = productionPlanList();

const props = defineProps({
  moduleId: {
    type: String,
    required: true,
  },
});
const loadData = async () => {
  let res = await productionPlan();
  if (res.data.length > 0) {
    let dicts = {
      workOrderCode: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>生产批号</span>`,
      materialName: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>物料名称</span>`,
      materialCode: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>物料规格</span>`,
      number: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>生产数量</span>`,
      operationName: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>工序名称</span>`,
      stationName: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>工位名称</span>`,
      state: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>状态</span>`,
    };

    let bigData: any[] = [];
    res.data.forEach((item: any) => {
      const isImportant = item.isImportant === 1;
      const textColor = isImportant ? 'color: yellow;' : '';
      let row = [
        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px;${textColor}'>${item.workOrderCode}</span>`,
        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px;${textColor}'>${item.materialName}</span>`,
        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px;${textColor}'>${item.materialModel}</span>`,
        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px;${textColor}'>${item.number}</span>`,
        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px;${textColor}'>${item.operationName}</span>`,
        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px;${textColor}'>${item.stationName}</span>`,
        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px;${textColor}${isImportant ? '' : 'color: #00a680;'}'>执行中</span>`,
      ];
      bigData.push(row);
    });

    config.value = {
      header: Object.values(dicts),
      data: bigData,
      index: true,
      rowNum: 10,
      // columnWidth: [50, 130, 160, 160, 120, 160, 120],
      columnWidth: [50],
      align: ["left"],
      carousel: "page",
    };
  }
}

onMounted(async () => {
  loadData();
  const timer = setInterval(loadData, 60 * 5 * 1000)
  // 组件卸载时清除定时器
  onUnmounted(() => clearInterval(timer));
});
</script>

<style lang="scss" scoped>
:deep(.ceil) {
  .index {
    background-color: red;
  }
}
</style>
