<template>
  <div class="app-container">
    <el-card class="topCard">
      <div class="topDiv">
        <div style="margin-top: 10px">
          <span style="margin-left: 10px">产品编号：</span>
          <el-input 
            v-model="searchForm.productNumber" 
            placeholder="请输入产品编号" 
            clearable 
            size="small" 
            style="width: 200px"/>

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

          <span style="margin-left: 10px">电池仓编号：</span>
          <el-input 
            v-model="searchForm.batteryNumber" 
            placeholder="请输入电池仓编号" 
            clearable 
            size="small" 
            style="width: 200px"/>

          <span style="margin-left: 10px">上线编号：</span>
          <el-input 
            v-model="searchForm.onlineNumber" 
            placeholder="请输入上线编号" 
            clearable 
            size="small" 
            style="width: 200px"/>
            
          <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="120" align="center"/>
          <el-table-column prop="订单号" label="订单号" width="120" align="center"/>
          <el-table-column prop="执行状态" label="执行状态" width="100" align="center"/>
          <el-table-column prop="产品编号" label="产品编号"  align="center"/>
          <el-table-column prop="电池仓编号" label="电池仓编号" align="center"/>
          <el-table-column prop="上线时间" label="上线时间" width="160" align="center"/>
          <el-table-column prop="下线时间" label="下线时间" width="160" align="center"/>
          <el-table-column prop="版本号" label="版本号" width="100" align="center"/>
          <el-table-column prop="上线编号" label="上线编号" width="120" 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: {
        productNumber: '', // 产品编号
        orderNumber: '', // 订单号
        batteryNumber: '', // 电池仓编号
        onlineNumber: '', // 上线编号
        dateRange: [] // 日期范围
      },
      
      // 表格数据
      tableData: [],
      loading: false,
      
      // 分页
      total: 0, // 总条数
      pageSize: 15, // 每页显示条数
      pageCurrent: 1 // 当前页码
    }
  },
  created() {
    // 初始化日期为今天
    const today = this.formatDate(new Date());
    this.searchForm.dateRange = [today, today];
  },
  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}`;
    },
    
    // 查询数据
    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.productNumber || ''])
      param.push(['订单号', this.searchForm.orderNumber || ''])
      param.push(['电池仓编号', this.searchForm.batteryNumber || ''])
      param.push(['上线编号', this.searchForm.onlineNumber || ''])
      param.push(['开始日期', this.searchForm.dateRange[0]])
      param.push(['结束日期', this.searchForm.dateRange[1]])
      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', '计划_接口_生产计划_执行计划_分页查询', 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.productNumber || ''])
      param.push(['订单号', this.searchForm.orderNumber || ''])
      param.push(['电池仓编号', this.searchForm.batteryNumber || ''])
      param.push(['上线编号', this.searchForm.onlineNumber || ''])
      param.push(['开始日期', this.searchForm.dateRange[0]])
      param.push(['结束日期', this.searchForm.dateRange[1]])
      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', '计划_接口_生产计划_执行计划_分页查询', 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>