<template>
  <div class='work-report-record'>
    <el-card shadow='never'>
      <template #header>
        <div class='card-header'>
          <span>报工记录</span>
          <el-button type='primary' icon='Refresh' @click='getList'>刷新</el-button>
        </div>
      </template>

      <el-table
        v-loading='loading'
        :data='recordList'
        border
        stripe
        style='width: 100%'
      >
        <el-table-column label='工单号' prop='planCode' width='150' align='center' />
        <el-table-column label='产品名称' prop='materialName' width='200' align='center' show-overflow-tooltip />
        <el-table-column label='工序名称' prop='processName' width='150' align='center' />
        <el-table-column label='工位' prop='stationName' width='120' align='center' />
        <el-table-column label='报工数量' prop='reportQuantity' width='100' align='center' />
        <el-table-column label='不良数量' prop='remainingAmount' width='100' align='center' />
        <el-table-column label='报工时间' prop='reportTime' width='180' align='center'>
          <template #default='scope'>
            <span>{{ parseTime(scope.row.reportTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label='报工人' prop='reportUser' width='120' align='center' />
<!--        <el-table-column label='备注' prop='remark' align='center' show-overflow-tooltip />-->
      </el-table>

      <pagination
        v-show='total > 0'
        :total='total'
        v-model:page='queryParams.pageNum'
        v-model:limit='queryParams.pageSize'
        @pagination='getList'
      />
    </el-card>
  </div>
</template>

<script setup name='WorkReportRecord' lang='ts'>
import { ref, onMounted } from 'vue';
import { listProductPlanDetail } from '@/api/mes/productPlanDetail';
import { ProductPlanDetailVO, ProductPlanDetailQuery } from '@/api/mes/productPlanDetail/types';
import { listPlanInfo } from '@/api/mes/planInfo';
import { PlanInfoQuery } from '@/api/mes/planInfo/types';
import { parseTime } from '@/utils/ruoyi';

const props = defineProps<{
  workstationId?: number;
}>();

const loading = ref(false);
const recordList = ref<any[]>([]);
const total = ref(0);

const queryParams = ref<ProductPlanDetailQuery>({
  pageNum: 1,
  pageSize: 10,
  stationId: props.workstationId
});

// 获取报工记录列表
const getList = async () => {
  loading.value = true;
  try {
    // 查询生产信息
    let allDetailList: ProductPlanDetailVO[] = [];

    // 如果没有工位ID，直接查询所有生产信息
    const query: ProductPlanDetailQuery = {
      ...queryParams.value
    };
    const res = await listProductPlanDetail(query);
    allDetailList = res.rows || [];

    // 映射生产信息数据到报工记录显示格式
    recordList.value = allDetailList.map((item: ProductPlanDetailVO) => ({
      planCode: item.planCode,
      materialName: (item as any).materialName || '-',
      processName: (item as any).processName || '-',
      reportQuantity: item.completeAmount || 0,
      remainingAmount: (item as any).remainingAmount || 0,
      reportTime: item.realBeginTime,
      reportUser: item.reportUser ,
      stationName: (item as any).stationName || '-',
      remark: item.remark || '-'
    }));

    total.value = allDetailList.length;
  } catch (error) {
    console.error('获取报工记录失败:', error);
    recordList.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
};

// 刷新数据
const refresh = () => {
  getList();
};

defineExpose({
  refresh
});

onMounted(() => {
  getList();
});
</script>

<style scoped lang='scss'>
.work-report-record {
  width: 100%;
  height: 100%;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
