<template>
  <div>
    <el-form :inline="true" :model="filters" class="demo-form-inline">
      <el-form-item label="料号">
        <el-input v-model="filters.materialNumber" placeholder="请输入料号"></el-input>
      </el-form-item>
      <el-form-item label="仓库">
        <el-input v-model="filters.warehouse" placeholder="请输入仓库"></el-input>
      </el-form-item>
      <el-form-item label="货位">
        <el-input v-model="filters.location" placeholder="请输入货位"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="applyFilters">筛选</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="filteredData" style="width: 100%">
      <el-table-column
              v-for="(header, index) in tableHeaders"
              :key="index"
              :prop="header.prop"
              :label="header.label"
      ></el-table-column>
      <el-table-column label="汇总数量">
        <template slot-scope="scope">
          {{ scope.row.quantity }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { ref, computed } from 'vue';
  import { ElMessage } from 'element-plus';

  export default {
    name: 'SummaryBoard',
    data() {
      return {
        filters: {
          materialNumber: '',
          warehouse: '',
          location: '',
        },
        tableHeaders: [
          { label: '料号', prop: 'materialNumber' },
          { label: '仓库', prop: 'warehouse' },
          { label: '货位', prop: 'location' },
        ],
        rawData: [
          // 示例数据，请替换为实际数据
          { materialNumber: 'M001', warehouse: 'W001', location: 'L001', quantity: 10 },
          { materialNumber: 'M001', warehouse: 'W002', location: 'L002', quantity: 20 },
          { materialNumber: 'M002', warehouse: 'W001', location: 'L001', quantity: 30 },
          // 更多数据...
        ],
      };
    },
    computed: {
      filteredData() {
        const { materialNumber, warehouse, location } = this.filters;
        return this.rawData.filter(row => {
          return (
                  (!materialNumber || row.materialNumber === materialNumber) &&
                  (!warehouse || row.warehouse === warehouse) &&
                  (!location || row.location === location)
          );
        });
      },
      dynamicTableHeaders() {
        const { materialNumber, warehouse, location } = this.filters;
        let headers = [...this.tableHeaders];
        if (materialNumber && !warehouse && !location) {
          headers = [{ label: '料号', prop: 'materialNumber' }];
        } else if (materialNumber && warehouse && !location) {
          headers = [
            { label: '料号', prop: 'materialNumber' },
            { label: '仓库', prop: 'warehouse' },
          ];
        } else if (materialNumber && warehouse && location) {
          headers = [
            { label: '料号', prop: 'materialNumber' },
            { label: '仓库', prop: 'warehouse' },
            { label: '货位', prop: 'location' },
          ];
        } else if (!materialNumber && warehouse && !location) {
          headers = [{ label: '仓库', prop: 'warehouse' }];
        } else if (!materialNumber && warehouse && location) {
          headers = [
            { label: '仓库', prop: 'warehouse' },
            { label: '货位', prop: 'location' },
          ];
        }
        return headers;
      },
    },
    methods: {
      applyFilters() {
        this.tableHeaders = this.dynamicTableHeaders;
        ElMessage.success('筛选条件已应用');
      },
      resetFilters() {
        this.filters = {
          materialNumber: '',
          warehouse: '',
          location: '',
        };
        this.tableHeaders = [...this.tableHeaders];
        ElMessage.success('筛选条件已重置');
      },
    },
  };
</script>

<style scoped>
  .demo-form-inline {
    margin-bottom: 20px;
  }
</style>