<template>
  <div class="app-container">
    <el-card>
      <!-- 查询表单 -->
      <div class="search-form">
        <el-form :inline="true" :model="queryParams" size="small">
          <el-form-item label="订单编号">
            <el-input
              v-model="queryParams.订单编号"
              clearable
              placeholder="订单编号"
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="操作人">
            <el-input
              v-model="queryParams.操作人"
              clearable
              placeholder="操作人"
              style="width: 120px"
            />
          </el-form-item>
           <el-button icon="el-icon-search" plain type="primary" @click="searchData()">查询</el-button>
        </el-form>
      </div>

      <!-- 表格 -->
      <div class="table-wrapper">
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          stripe
          size="mini"
          element-loading-background="rgba(0, 0, 0, 0.2)"
          element-loading-text="数据加载中"
          height="700"
          style="width: 100%"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ background: '#f5f7fa', textAlign: 'center' }"
        >
          <el-table-column type="index" label="序号" width="55" align="center" />
          <el-table-column prop="订单编号" label="订单编号" width="100" />
          <el-table-column prop="操作类别" label="操作类别" width="90" align="center"/>
          <el-table-column prop="工序名称" label="工序名称" width="100" show-overflow-tooltip />
          <el-table-column prop="工位名称" label="工位名称" width="100" show-overflow-tooltip />
          <el-table-column prop="操作人" label="操作人" width="90" />
          <el-table-column prop="合同号" label="合同号" width="120" show-overflow-tooltip />
          <el-table-column prop="物料编号" label="物料编号" width="150" show-overflow-tooltip />
          <el-table-column prop="物料描述" label="物料描述" width="180" show-overflow-tooltip />
          <el-table-column prop="操作数值" label="操作数值" width="80" align="center" />
          <el-table-column prop="开始时间" label="开始时间" width="160" />
          <el-table-column prop="结束时间" label="结束时间" width="160" />
          <el-table-column prop="总时长" label="人员工时" width="90" align="center" />
          <el-table-column prop="实际工时" label="设备工时" width="90" align="center" />
          <el-table-column prop="最后编辑人" label="最后编辑人" min-width="200" show-overflow-tooltip />
          <el-table-column prop="最后编辑时间" label="最后编辑时间" min-width="200" show-overflow-tooltip />
          <el-table-column prop="操作描述" label="操作描述" min-width="200" show-overflow-tooltip />
        </el-table>
      </div>

      <!-- 分页 -->
      <!-- <div class="pagination-wrapper">
        <el-pagination
          :current-page="pageNum"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div> -->
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'OperationRecord',
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 20,
      // 查询参数
      queryParams: {
        合同号: '',
        订单编号: '',
        操作人: '',
        操作类别: ''
      },
      dateRange: []
    }
  },
  created() {
    this.searchData()
  },
  methods: {
    // 查询数据
    searchData() {
      this.loading = true
      
      // 构建查询参数
      const param = []
      if (this.queryParams.订单编号) {
        param.push(['订单编号', this.queryParams.订单编号])
      }
      if (this.queryParams.操作人) {
        param.push(['操作人', this.queryParams.操作人])
      }
      // 调用接口查询
      const Data = this.CreateData('11', '系统管理_报工操作记录_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data && response.data.length > 0) {
          // 处理数据，添加序号计算
          const startIndex = (this.pageNum - 1) * this.pageSize
          this.tableData = response.data.map((item, index) => {
            item._index = startIndex + index + 1
            return item
          })
          this.total = response.data.length
        } else {
          this.tableData = []
          this.total = 0
        }
        this.loading = false
      }).catch(error => {
        console.error('查询失败:', error)
        this.$message.error('数据查询失败')
        this.loading = false
      })
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.pageNum = 1
      this.searchData()
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.pageNum = val
      this.searchData()
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.el-card {
  margin: 0;
}

.search-form {
  margin-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.table-wrapper {
  margin-top: 10px;
}

.pagination-wrapper {
  margin-top: 15px;
  text-align: right;
}

::v-deep .el-table .cell {
  white-space: pre-line;
  line-height: 1.4;
}

::v-deep .el-tag--mini {
  padding: 0 6px;
}
</style>