<template>
  <div class="container">
    <div class="header">
      <div class="search-box">
        <el-input
          class="search-input"
          v-model="searchKeyword"
          placeholder="请输入托盘编号"
          clearable
          @keyup.enter.native="searchTray"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchTray"
        >搜索</el-button>
      </div>
    </div>

    <div class="table-container">
      <el-table
        :data="filteredTrays"
        border
        style="width: 100%"
        @row-click="handleRowClick"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="trayId" label="托盘编号" width="200"></el-table-column>
        <el-table-column prop="status" label="状态" width="150">
          <template slot-scope="scope">
            <el-tag :type="statusTagType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="boardCount" label="主板数量" width="150"></el-table-column>
        <el-table-column prop="location" label="位置"></el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalTrays"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {queryByDepartmentId} from "@/api/storey/storey";
export default {
  name: "TrayInformation",
  data() {
    return {
      searchKeyword: '',
      trays: [],
      currentPage: 1,
      pageSize: 10
    };
  },
  created() {
    this.fetchTrays();
  },
  computed: {
    // 计算过滤后的托盘数据
    filteredTrays() {
      let filtered = this.trays;
      if (this.searchKeyword) {
        filtered = filtered.filter(tray =>
          tray.trayId.includes(this.searchKeyword)
        );
      }
      // 分页处理
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return filtered.slice(start, end);
    },
    totalTrays() {
      if (this.searchKeyword) {
        return this.trays.filter(tray =>
          tray.trayId.includes(this.searchKeyword)
        ).length;
      }
      return this.trays.length;
    }
  },
  methods: {
    // 模拟API请求
    fetchTrays() {
      // 实际项目中替换为真实的API请求
      setTimeout(() => {
        this.trays = [
          {trayId: 'TP20240001', status: '空闲', boardCount: 0, location: 'A区-1号架'},
          {trayId: 'TP20240002', status: '使用中', boardCount: 8, location: 'B区-3号架'},
          {trayId: 'TP20240003', status: '满载', boardCount: 12, location: 'C区-2号架'},
          {trayId: 'TP20240004', status: '维护中', boardCount: 0, location: '维修区'},
          {trayId: 'TP20240005', status: '空闲', boardCount: 0, location: 'D区-4号架'},
          {trayId: 'TP20240006', status: '使用中', boardCount: 5, location: 'E区-1号架'},
          {trayId: 'TP20240007', status: '满载', boardCount: 12, location: 'F区-2号架'},
          {trayId: 'TP20240008', status: '空闲', boardCount: 0, location: 'G区-5号架'},
          {trayId: 'TP20240009', status: '使用中', boardCount: 10, location: 'H区-3号架'},
          {trayId: 'TP20240110', status: '满载', boardCount: 12, location: 'I区-1号架'}
        ];
      }, 500);
    },

    // 搜索托盘
    searchTray() {
      this.currentPage = 1;
    },

    // 处理行点击
    handleRowClick(row) {
      this.$router.push({name: 'TrayConfig', params: {id: row.trayId}});
    },

    // 设置行样式
    tableRowClassName() {
      return 'clickable-row';
    },

    // 状态标签类型
    statusTagType(status) {
      const statusMap = {
        '空闲': 'success',
        '使用中': 'primary',
        '满载': 'warning',
        '维护中': 'danger'
      };
      return statusMap[status] || 'info';
    },

    // 分页处理
    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1;
    },

    handleCurrentChange(page) {
      this.currentPage = page;
    }
  }
}
</script>

<style scoped>

.container {
  padding: 20px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
}
.search-box {
  display: flex;
  margin-bottom: 20px;
  max-width: 400px;
}
.search-input {
  flex: 1;
  margin-right: 10px;
}
.table-container {
  margin-top: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
.clickable-row {
  cursor: pointer;
}
.clickable-row:hover {
  background-color: #f5f7fa;
}
</style>
