<template>
  <div class="quality-statistics-card">
    <div style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 10px;">质量统计信息</div>
    <el-table 
      :data="qualityData" 
      v-loading="loading" 
      border 
      style="width: 100%"
      :height="tableHeight"
    >
      <el-table-column type="index" width="60"></el-table-column>
      <el-table-column prop="fkWorkorderId" label="工单id" width="120"></el-table-column>
      <el-table-column prop="productName" label="产品名称"></el-table-column>
      <el-table-column prop="color" label="颜色" width="100"></el-table-column>
      <el-table-column prop="require" label="投入数" width="80"></el-table-column>
      <el-table-column prop="team" label="班组" width="80"></el-table-column>
      <el-table-column prop="firstgoodNum" label="一次合格数量" width="120"></el-table-column>
      <el-table-column prop="firstgoodRate" label="一次合格率" width="120"></el-table-column>
      <el-table-column prop="finalgoodNum" label="最终合格数量" width="120"></el-table-column>
      <el-table-column prop="finalgoodRate" label="最终合格率" width="120"></el-table-column>
      <el-table-column prop="scrapNum" label="报废数" width="80"></el-table-column>
      <el-table-column prop="scrapRate" label="报废率" width="80"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { QueryQualityStatisticsTable } from '@/api/qualityManagement/qualityStatistics.js'

export default {
  name: 'QualityStatisticsCard',
  data() {
    return {
      loading: false,
      qualityData: [],
      tableHeight: '700px'
    }
  },
  mounted() {
    this.getQualityData()
    // 监听窗口大小变化，调整表格高度
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    getQualityData() {
      this.loading = true
      // 获取今天的时间范围
      const today = new Date()
      const startOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0)
      const endOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59)
      
      const query = {
        starttime: startOfDay,
        endtime: endOfDay,
        pageNum: 1,
        pageSize: 20
      }
      
      QueryQualityStatisticsTable(query)
        .then((res) => {
          if (res.code == 200) {
            this.qualityData = res.data.item1 || []
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleResize() {
      // 简单的响应式调整
      const windowHeight = window.innerHeight
      this.tableHeight = Math.max(windowHeight * 0.7, 500) + 'px'
    }
  }
}
</script>

<style scoped>
.quality-statistics-card {
  padding: 10px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>