<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <div style="margin-top: 10px">
          <span style="margin-left: 10px">工位号：</span>
          <el-select
            v-model="searchForm.stationNumber"
            placeholder="请选择工位号"
            filterable
            clearable
            size="small"
            style="width: 200px">
            <el-option
              v-for="item in stationNumber"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
          
          <span style="margin-left: 10px">产品编号：</span>
          <el-input 
            v-model="searchForm.engineNumber" 
            placeholder="请输入产品编号" 
            clearable 
            size="small" 
            style="width: 200px"/>

          <span style="margin-left: 10px">车号：</span>
          <el-input 
            v-model="searchForm.carNumber" 
            placeholder="请输入车号" 
            clearable 
            size="small" 
            style="width: 120px"/>

          <!-- <span style="margin-left: 10px">物料条码：</span>
          <el-input 
            v-model="searchForm.materialBarcode" 
            placeholder="请输入物料条码" 
            clearable 
            size="small" 
            style="width: 200px"/> -->

          <!-- <span style="margin-left: 10px">操作类型：</span>
          <el-select
            v-model="searchForm.operationType"
            placeholder="请选择操作类型"
            clearable
            size="small"
            style="width: 150px">
            <el-option label="全部" :value="''"/>
            <el-option label="更换" :value="'更换'"/>
            <el-option label="返修" :value="'返修'"/>
          </el-select> -->
            
          <span style="margin-left: 10px">更换日期：</span>
          <el-date-picker
            v-model="searchForm.dateRange"
            size="small"
            type="daterange"
            align="center"
            style="width: 240px;"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            range-separator="～"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
            
          <el-button 
            type="primary" 
            plain 
            size="small" 
            icon="el-icon-search" 
            style="margin-left: 5px" 
            @click="pageCurrent = 1;search()">查询</el-button>

          <el-button 
            type="info" 
            size="small" 
            icon="el-icon-download" 
            style="margin-left: 5px" 
            @click="exportExcel()">Excel</el-button>
        </div>
        
        <el-table
          v-loading="loading"
          :data="tableData"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)"
          height="600px"
          class="main"
          style="width: 100%; margin-top: 10px"
          border
          size="mini">
          <el-table-column type="index" width="60" label="序号" align="center"/>
          <el-table-column prop="订单号" label="订单号" width="100" align="center"/>
          <el-table-column prop="发动机号" label="产品编号" width="170" align="center"/>
          <el-table-column prop="车号" label="车号" width="100" align="center"/>
          <!-- <el-table-column prop="发动机型号" label="发动机型号" width="120" align="center"/> -->
          <el-table-column prop="工位号" label="工位号" width="80" align="center"/>
          <el-table-column prop="物料号" label="物料号" width="110" align="center"/>
          <el-table-column prop="零件名称" label="零件名称"  align="center"/>
          <el-table-column prop="零件数量" label="零件数量" width="80" align="center"/>
          <el-table-column prop="物料条码" label="物料条码"  align="center"/>
          <el-table-column prop="更换物料条码" label="更换物料条码"  align="center"/>
          <el-table-column prop="操作类型名称" label="操作类型" width="80" align="center"/>
          <el-table-column prop="更换人" label="更换人" width="80" align="center"/>
          <el-table-column prop="更换时间" label="更换时间" width="140" align="center"/>
        </el-table>
        
        <div class="block" style="margin-top: 10px; ">
          <el-pagination
            v-if="!loading"
            :current-page="pageCurrent"
            :page-sizes="[15, 30, 50]"
            :page-size="pageSize"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询条件
      searchForm: {
        stationNumber: '', // 工位号
        engineNumber: '', // 发动机号
        materialBarcode: '', // 物料条码
        operationType: '', // 操作类型
        dateRange: [], // 日期范围
        carNumber: '' // 车号
      },
      // 下拉选项
      stationNumber: [], // 工位号选项
      
      // 表格数据
      tableData: [],
      loading: false,
      
      // 分页
      total: 0, // 总条数
      pageSize: 15, // 每页显示条数
      pageCurrent: 1 // 当前页码
    }
  },
  created() {
    // 初始化日期为今天
    const today = this.formatDate(new Date());
    this.searchForm.dateRange = [today, today];
    
    // 获取工位号列表
    this.getStationNumber();
  },
  mounted() {
    // 初始加载数据
    this.search();
  },
  methods: {
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 获取工位号列表
    getStationNumber() {
      var param = [];
      var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param);
      this.ExecDatabase(Data).then(response => {
        this.stationNumber = response.data.map(item => ({
          label: `${item.工位号}-${item.工位名称}`,
          value: item.工位号
        }));
      });
    },
    
    // 查询数据
    search() {
      if (!this.searchForm.dateRange || this.searchForm.dateRange.length < 2) {
        this.$message.warning('请选择日期范围');
        return;
      }
      
      this.loading = true;
      this.tableData = [];
      
      var param = [];
      param.push(['产品编号', this.searchForm.engineNumber || ''])
      param.push(['工位号', this.searchForm.stationNumber || ''])
      param.push(['开始日期', this.searchForm.dateRange[0]])
      param.push(['结束日期', this.searchForm.dateRange[1]])
      param.push(['车号', this.searchForm.carNumber || ''])
      param.push(['PageCurrent', this.pageCurrent])
      param.push(['PageSize', this.pageSize])
      param.push(['PageCount', '0', 'int', '1'])
      param.push(['ItemCount', '0', 'int', '1'])
      
      var Data = this.CreateData('11', 'MES_装配数据_零部件追溯_返修件_视图_分页查询', param);
      this.ExecDatabase(Data).then(response => {
        this.loading = false;
        if (response.data && response.data.result && response.data.result.length) {
          this.tableData = response.data.result;
          this.total = parseInt(response.data.output[0].ItemCount);
        } else {
          this.tableData = [];
          this.total = 0;
          this.$message.info('未查询到数据');
        }
      }).catch(() => {
        this.loading = false;
        this.$message.error('查询失败');
      });
    },
    
    // 导出Excel
    exportExcel() {
      if (this.tableData.length === 0) {
        this.$message.warning('暂无数据可导出');
        return;
      }
      
      if (!this.searchForm.dateRange || this.searchForm.dateRange.length < 2) {
        this.$message.warning('请选择日期范围');
        return;
      }
      
      var param = [];
      param.push(['产品编号', this.searchForm.engineNumber || ''])
      param.push(['工位号', this.searchForm.stationNumber || ''])
      param.push(['开始日期', this.searchForm.dateRange[0]])
      param.push(['结束日期', this.searchForm.dateRange[1]])
      param.push(['车号', this.searchForm.carNumber || ''])
      param.push(['PageCurrent', 1])
      param.push(['PageSize', 9999999])
      param.push(['PageCount', '0', 'int', '1'])
      param.push(['ItemCount', '0', 'int', '1'])
      var Data = this.CreateData('2001', 'MES_装配数据_零部件追溯_返修件_视图_分页查询', param);
      this.exportExcel_NPOI(Data);
    },
    
    // 分页方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageCurrent = 1;
      this.search();
    },
    handleCurrentChange(val) {
      this.pageCurrent = val;
      this.search();
    }
  }
}
</script>

<style>
.topCard {
  margin: 5px;
}
.topDiv {
  margin-bottom: 10px;
}
/* 多行文本显示样式 */
.multiline-cell {
  white-space: pre-line !important;
  line-height: 1.5;
  word-break: break-all;
  max-height: 100px;
  overflow-y: auto;
  padding: 5px 0;
}
/* 表格样式 */
.el-table .warning-row {
  background: #fdf6ec;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>