<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.productCode" 
            placeholder="请输入产品编号" 
            clearable 
            size="small" 
            style="width: 240px;"/>

          <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-select
            v-model="searchForm.checkResult"
            placeholder="请选择检查结果"
            size="small"
            style="width: 120px">
            <el-option label="全部" :value="999"/>
            <el-option label="未确认" :value="0"/>
            <el-option label="OK" :value="1"/>
            <el-option label="NOK" :value="2"/>
          </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="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="180" align="center"/>
          <el-table-column prop="车号" label="车号" width="100" align="center"/>
          <el-table-column prop="排序" label="顺序" width="80" align="center"/>
          <el-table-column prop="检查内容" label="检查内容">
            <template slot-scope="scope">
              <div class="multiline-cell">{{ scope.row.检查内容 }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="检查要求" label="检查要求">
            <template slot-scope="scope">
              <div class="multiline-cell">{{ scope.row.检查要求 }}</div>
            </template>
          </el-table-column>
          <el-table-column label="检查结果" width="100" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.检查结果 === '0'" type="warning">未确认</el-tag>
              <el-tag v-else-if="scope.row.检查结果 === '1'" type="success">OK</el-tag>
              <el-tag v-else-if="scope.row.检查结果 === '2'" type="danger">NOK</el-tag>
              <span v-else>{{ scope.row.检查结果 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="检查备注" label="检查备注" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.检查备注 || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="操作时间" label="操作时间" width="170" align="center"/>
        </el-table>
        
        <div class="block" style="margin-top: 10px; text-align: right">
          <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: '', // 工位号
        productCode: '', // 产品编号
        checkResult: 999, // 检查结果，默认全部
        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[0] = ['产品编号', this.searchForm.productCode || ''];
      param[1] = ['确认状态', ''];
      param[2] = ['工位号', this.searchForm.stationNumber || ''];
      param[3] = ['开始日期', this.searchForm.dateRange[0]];
      param[4] = ['结束日期', this.searchForm.dateRange[1]];
      param[5] = ['检查结果', this.searchForm.checkResult];
      param[6] = ['PageCurrent', this.pageCurrent];
      param[7] = ['PageSize', this.pageSize];
      param[8] = ['PageCount', '0', 'int', '1'];
      param[9] = ['ItemCount', '0', 'int', '1'];
      param[10] = ['车号', this.searchForm.carNumber || ''];

      
      var Data = this.CreateData('11', 'CATL_工位检查项_记录表_查询_分页', 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[0] = ['产品编号', this.searchForm.productCode || ''];
      param[1] = ['确认状态', ''];
      param[2] = ['工位号', this.searchForm.stationNumber || ''];
      param[3] = ['开始日期', this.searchForm.dateRange[0]];
      param[4] = ['结束日期', this.searchForm.dateRange[1]];
      param[5] = ['检查结果', this.searchForm.checkResult];
      param[6] = ['PageCurrent', 1];
      param[7] = ['PageSize', 9999999];
      param[8] = ['PageCount', '0', 'int', '1'];
      param[9] = ['ItemCount', '0', 'int', '1'];
      param[10] = ['车号', this.searchForm.carNumber || ''];
      var Data = this.CreateData('2001', 'CATL_工位检查项_记录表_查询_分页', 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>