<template>
  <div class="p-4">
    <el-card shadow="hover" class="mb-4">
      <el-form :inline="true" :model="queryParams">
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            @change="handleDateChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" v-loading="loading">
      <template #header>
        <div class="text-center text-xl font-bold">进料检验报表</div>
      </template>

      <el-table :data="tableData" border style="width: 100%" :height="tableHeight">
        <el-table-column type="index" label="#" width="50" align="center" />
        <el-table-column prop="inspectionNo" label="检验单号" min-width="140" show-overflow-tooltip />
        <el-table-column prop="purchaseOrderNo" label="采购单号" min-width="140" show-overflow-tooltip />
        <el-table-column prop="inspectionDate" label="检验日期" width="120" />
        <el-table-column prop="inspectionStartTime" label="开始时间" width="160" />
        <el-table-column prop="inspectionEndTime" label="结束时间" width="160" />
        <el-table-column prop="materialCode" label="物料编码" min-width="120" show-overflow-tooltip />
        <el-table-column prop="materialName" label="物料名称" min-width="160" show-overflow-tooltip />
        <el-table-column prop="materialSpec" label="规格型号" min-width="140" show-overflow-tooltip />
        <el-table-column prop="materialUnit" label="单位" width="80" />
        <el-table-column prop="supplierName" label="供应商" min-width="160" show-overflow-tooltip />
        <el-table-column prop="inspectionQty" label="检验数量" width="110" align="right" />
        <el-table-column prop="qualifiedQty" label="合格数" width="100" align="right" />
        <el-table-column prop="unqualifiedQty" label="不合格数" width="110" align="right" />
        <el-table-column prop="inspectionResult" label="检验结果" width="100" />
        <el-table-column prop="inspectionTypeName" label="检验类型" width="120" />
        <el-table-column prop="inspectorName" label="检验人" width="100" />
        <el-table-column prop="items" label="检验项目" min-width="180" show-overflow-tooltip />
        <el-table-column prop="methods" label="检验方法" min-width="180" show-overflow-tooltip />
        <el-table-column prop="unqualifiedItems" label="不合格项" min-width="200" show-overflow-tooltip />
        <el-table-column prop="returnReason" label="退货原因" min-width="160" show-overflow-tooltip />
        <el-table-column prop="unqualifiedSummary" label="不合格汇总" min-width="220" show-overflow-tooltip />
        <el-table-column prop="remark" label="备注" min-width="160" show-overflow-tooltip />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, onBeforeUnmount } from 'vue';
import dayjs from 'dayjs';
import weekOfYear from 'dayjs/plugin/weekOfYear';
import { getIncomingInspectionEfficiency } from '@/api/qms/report';

dayjs.extend(weekOfYear);

// 状态
const loading = ref(false);
const dateRange = ref<[string, string] | null>(null);
const queryParams = ref({ startTime: '', endTime: '' });
const tableData = ref<any[]>([]);

// 自适应高度
const windowHeight = ref(window.innerHeight);
const tableHeight = computed(() => {
  return windowHeight.value - 280; // 粗略计算可视高度
});

const resizeHandler = () => {
  windowHeight.value = window.innerHeight;
};

// 方法
const handleDateChange = (val: any) => {
  if (val && Array.isArray(val)) {
    queryParams.value.startTime = val[0];
    queryParams.value.endTime = val[1];
  } else {
    queryParams.value.startTime = '';
    queryParams.value.endTime = '';
  }
};

const resetQuery = () => {
  // 默认本周
  const start = dayjs().startOf('week').format('YYYY-MM-DD');
  const end = dayjs().endOf('week').format('YYYY-MM-DD');
  dateRange.value = [start, end] as [string, string];
  handleDateChange(dateRange.value);
  handleQuery();
};

const handleQuery = async () => {
  loading.value = true;
  try {
    const res: any = await getIncomingInspectionEfficiency(queryParams.value);
    if (res && res.code === 200) {
      tableData.value = res.data || [];
    } else {
      tableData.value = [];
    }
  } catch (e) {
    console.error('获取进料检验效率报表失败', e);
    tableData.value = [];
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  // 初始化默认周范围并加载
  resetQuery();
  window.addEventListener('resize', resizeHandler);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler);
});
</script>

<style scoped>
.el-form-item {
  margin-bottom: 0;
}
</style>
