<template>
  <div id="cpop" class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" title="当前生产订单进度" />
    <div class="charts-container">
      <el-table
        :cell-style="{
          textAlign: 'center',
          background: '#2d3748',
          fontSize: '1.8vh',
        }"
        :data="tableData"
        :header-cell-style="{
          textAlign: 'center',
          background: '#2d3748',
          color: '#fff8',
          fontSize: '2vh',
        }"
        size="large"
        style="width: 100%; height: 100%"
      >
        <el-table-column label="订单编号" prop="orderCode" />
        <el-table-column label="产品型号" prop="materialModel" />
        <el-table-column label="计划数量" prop="planNum" />
        <el-table-column label="各班次实际生产数量">
          <el-table-column label="8:00-12:00" prop="completeSum" />
          <el-table-column label="12:00-16:00" prop="completeSum1" />
          <el-table-column label="16:00-20:00" prop="completeSum2" />
        </el-table-column>
        <el-table-column label="未完成数量" prop="noCompleteNum" />
        <el-table-column label="完成进度" prop="schedule" />
        <el-table-column label="状态" prop="stateLabel" />
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
import { currentProductionSchedule } from "@/api/screens";

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

const tableData = ref<any[]>([]);

onMounted(async () => {
  let res: any = await currentProductionSchedule();
  tableData.value = res.data ?? [];
});
</script>

<style lang="scss" scoped>
.count-cell-common {
  background-color: #2d3748;
  color: #fff8;
  text-align: center;
}

/* 使用深度选择器确保样式生效 或者设置row-class-name 也没有高亮效果 */
//row-class-name="table-row"
:deep(.table-row:hover) {
  background-color: transparent; /* 取消悬浮高亮 */
}

:deep(
    .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell
  ) {
  background-color: transparent !important;
}

:deep(.el-table) {
  --el-table-border-color: transparent;
  //--el-table-border: none;
  --el-table-text-color: #bdbdbe;
  //--el-table-header-text-color: #bdbdbe;
  --el-table-row-hover-bg-color: transparent;
  //--el-table-current-row-bg-color: transparent;
  //--el-table-header-bg-color: #2d3748;
  --el-table-bg-color: transparent;
  //--el-table-tr-bg-color: #2d3748;
  //--el-table-expanded-cell-bg-color: transparent;
}
</style>
