<template>
  <!-- 模板部分保持不变 -->
  <div>
    <el-card>
      <div>
        <span class="show-text">生产订单号:</span>
        <el-input v-model="orderNo" placeholder="请输入订单号" clearable style="width: 100px; margin-right: 10px" />
        <!-- <span class="show-text">合同号:</span>
        <el-input v-model="contractNo" placeholder="请输入合同号" clearable style="width: 130px; margin-right: 10px" /> -->
        <span class="show-text">零件编码:</span>
        <el-input v-model="productCode" placeholder="请输入零件编码" clearable style="width: 150px; margin-right: 10px" />
        <span class="show-text">零件名称:</span>
        <el-input v-model="productName" placeholder="请输入零件名称" clearable style="width: 100px; margin-right: 10px" />
        <span class="show-text">质检类型:</span>
        <el-select
          v-model="QualityStatus"
          clearable
          placeholder="请选择质检类型"
          style="width: 150px; margin-right: 10px"
        >
          <el-option label="全部" value="10" />
          <el-option label="收检" value="0" />
          <el-option label="终检" value="1" />
          <el-option label="来料检验" value="2" />
          <el-option label="退库检验" value="3" />
        </el-select>
        <span class="show-text">放行:</span>
        <el-select
          v-model="releaseStatus"
          clearable
          placeholder="请选择"
          style="width: 100px; margin-right: 10px"
        >
          <el-option label="全部" value="" />
          <el-option label="是" value="1" />
          <el-option label="否" value="0" />
        </el-select>
        <span class="show-text">质检日期起:</span>
        <el-date-picker 
          v-model="startDate" 
          type="date"
          placeholder="选择开始日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          style="width: 150px; margin-right: 10px" />
        <span class="show-text">质检日期止:</span>
        <el-date-picker 
          v-model="endDate" 
          type="date"
          placeholder="选择结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          style="width: 150px; margin-right: 10px" />
        <el-button :disabled="!!loading" icon="el-icon-search" plain type="primary" @click="handleSearch">查询</el-button>
        <el-button style="width: 100px;" icon="el-icon-download" type="primary"  @click="exportExcel">Excel导出</el-button>
      </div>
      
      <el-tabs v-model="activeTab" type="card" class="custom-tabs">
        <el-table 
          v-loading="loading" 
          :data="tableData" 
          :height="'67vh'" 
          border
          element-loading-background="rgba(0, 0, 0, 0.2)" 
          element-loading-spinner="el-icon-loading"
          highlight-current-row 
          size="mini" 
          style="width: 100%;margin-top: 20px;" 
          tooltip-effect="dark"
          :row-class-name="tableRowClassName"  
          @row-click="handleRowClick">
          
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column align="center" label="序号" type="index" width="50" fixed />
          <el-table-column align="center" prop="质检类型" label="质检类型" width="80" fixed />
          <el-table-column align="center" prop="零件编码" label="零件编码" width="220" fixed />
          <el-table-column align="center" prop="零件名称" label="零件名称" width="190" />
          <el-table-column align="center" prop="内部合同号" label="销售订单号" width="100" />
          <el-table-column align="center" prop="计划号" label="生产订单号" width="80" />
          <el-table-column align="center" prop="工序名称" label="工序名称" width="100" />
          <el-table-column align="center" prop="工位名称" label="工位名称" width="100" />
          <el-table-column align="center" prop="供应商代码" label="供应商代码" width="120" />
          <el-table-column align="center" prop="检验数量" label="检验数量" width="120" />
          <el-table-column align="center" prop="合格数" label="合格数" width="120" />
          <el-table-column align="center" prop="不合格数" label="不合格数" width="120" />
          <el-table-column align="center" prop="放行数量" label="放行数量" width="120" />
          <el-table-column align="center" prop="检测人" label="检测人" width="100" />
          <el-table-column align="center" label="检测时间" width="160">
            <template slot-scope="scope">
              {{ formatDateTime(scope.row.检测时间) }}
            </template>
          </el-table-column>
          
          <el-table-column align="center" prop="检测说明" label="检测说明" width="160"/>
        </el-table>
        
        <div class="block" style="margin-top: 10px;">
          <el-pagination
            :current-page="pageCurrent"
            :page-sizes="[20, 50, 100]"
            :page-size="pageSize"
            :total="total1"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChanges"
            @current-change="handleCurrentChanges" />
        </div>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 分页
      pageCurrent: 1,
      pageSize: 20,
      total1: 0,
      
      // 搜索条件
      QualityStatus:'10',
      startDate:null,
      endDate:null,
      orderNo:'',
      contractNo:'',
      productCode:'',
      productName:'',
      releaseStatus:'',

      
      // 表格数据
      loading: false,
      activeTab: 'first',
      tableData: [],

      // 新增相关数据
      orderList: [],
      exporting: false,
      // processList: [],
      // personnelList: [],
      
    }
  },
  
  mounted() {
    this.searchTable()
  },
  
  methods: {
    // ============ 表格相关方法 ============
    tableRowClassName({ row, rowIndex }) {
      if (!row.结束时间 || row.结束时间 === '') {
        return 'row-without-endtime'
      }
      return ''
    },
    
    handleRowClick(row) {
      this.currentTask = row
    },
    
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    exportExcel() {
      // 校验日期是否已选择
      // if (!this.startDate || !this.endDate) {
      //   this.$message.warning('请选择开始日期和结束日期')
      //   return
      // }
      // // 校验开始日期不能大于结束日期
      // if (this.startDate > this.endDate) {
      //   this.$message.warning('开始日期不能大于结束日期')
      //   return
      // }
      const param = []
      param.push(["质检类型", this.QualityStatus]);
      param.push(["开始日期", this.startDate]);
      param.push(["结束日期", this.endDate]);
      param.push(["订单号", this.normalizeQueryValue(this.orderNo) ]);
      param.push(["合同号", this.normalizeQueryValue(this.contractNo) ]);
      param.push(["零件编码", this.normalizeQueryValue(this.productCode) ]);
      param.push(["零件名称", this.normalizeQueryValue(this.productName) ]);
      param.push(["放行", this.normalizeReleaseStatusValue(this.releaseStatus) ]);
      
      this.exporting = true
      const Data = this.CreateData('2001', '质量管理_质检明细_导出', param)
      this.exportExcel_NPOI(Data).finally(() => {
        this.exporting = false
      })
    },
    // ============ 数据加载方法 ============
    // loadPersonnelList() {
    //   var param = []
    //   var Data = this.CreateData('11', '系统管理_人员管理_所有有效人员查询', param)
    //   this.ExecDatabase(Data).then(response => {
    //     if (response.data && response.data.length > 0) {
    //       this.personnelList = response.data.map(person => ({
    //         key: person.人员编号,
    //         label: person.人员姓名,
    //         disabled: false
    //       }))
    //     }
    //   })
    // },
    
    // loadOrderList(orderId) {
    //   var param = []
    //   param.push(['订单编号', orderId])
    //   var Data = this.CreateData('11', '工时校验_获取订单列表', param)
    //   this.ExecDatabase(Data).then(response => {
    //     this.orderList = response.data || []
    //   }).catch(error => {
    //     console.error('加载订单列表失败:', error)
    //     this.orderList = []
    //   })
    // },
    

    // loadProcessList(orderId) {
    //   var param = [['订单编号', orderId]]
    //   var Data = this.CreateData('11', '工时校验_获取订单工序', param)
    //   this.ExecDatabase(Data).then(response => {
    //     this.processList = response.data || []
    //   }).catch(error => {
    //     console.error('加载工序列表失败:', error)
    //     this.processList = []
    //   })
    // },
    

    
    // ============ 分页方法 ============
    handleSearch() {
      this.pageCurrent = 1
      this.searchTable()
    },

    handleSizeChanges(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    
    handleCurrentChanges(val) {
      this.pageCurrent = val
      this.searchTable()
    },
    
    searchTable() {
      this.loading = true
      
      var param = []
      param.push(["质检类型", this.QualityStatus]);
      param.push(["开始日期", this.startDate]);
      param.push(["结束日期", this.endDate]);
      param.push(["订单号", this.normalizeQueryValue(this.orderNo) ]);
      param.push(["合同号", this.normalizeQueryValue(this.contractNo) ]);
      param.push(["零件编码", this.normalizeQueryValue(this.productCode) ]);
      param.push(["零件名称", this.normalizeQueryValue(this.productName) ]);
      param.push(['PageCurrent', this.pageCurrent])
      param.push(['PageSize', this.pageSize])
      param.push(['PageCount', '1111', 'int', '1'])
      param.push(['ItemCount', '1111', 'int', '1'])
      param.push(["放行", this.normalizeReleaseStatusValue(this.releaseStatus) ]);
      
      var Data = this.CreateData('11', '质量管理_质检明细_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.tableData = response.data.result || []
        this.total1 = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      }).catch(error => {
        this.$message.error('查询失败：' + error.message)
        this.loading = false
      })
    },
    
    // ============ 工具方法 ============
    
    normalizeQueryValue(value) {
      return value === null || value === undefined || value === '' ? '0' : value
    },

    normalizeReleaseStatusValue(value) {
      return value === null || value === undefined || value === '' ? null : value
    },

    
    getCurrentUser() {
      return this.$store.state.user.name
    },
    
    formatDateTime(dateTime) {
      if (!dateTime) return ''
      const date = new Date(dateTime)
      return date.toLocaleString('zh-CN', { 
        year: 'numeric', 
        month: '2-digit', 
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      }).replace(/\//g, '-')
    },

  }
}
</script>

<style scoped>
.search-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.show-text {
  white-space: nowrap;
}

.custom-tabs {
  margin-top: 10px;
}

.dialog-footer {
  text-align: center;
}

/* ::v-deep .row-without-endtime {
  background-color: #f56c6c !important;
  color: #000000 !important;
} */
</style>
