<template>
  <div class="app-container stock-layout">
    <!-- 左侧树结构 -->
    <div class="stock-tree-col">
      <el-card shadow="never" class="stock-tree-card">
        <div slot="header" class="stock-tree-title">
          <div style="display: flex; align-items: center; justify-content: space-between;">
            <span>
              仓库结构
            </span>

            <el-select v-model="warehouseType" placeholder="请选择仓库类别" style="width: 50%;">
              <el-option label="真实库区" value="real" />
              <el-option label="逻辑库位" value="virtual" />
            </el-select>
          </div>
        </div>
        <WarehouseTree @node-click="handleTreeSelect" :warehouseType="warehouseType" :showEmpty="true" />
      </el-card>
    </div>
    <!-- 右侧内容 -->
    <div class="stock-main-col">
      <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <MaterialSelect :itemType.sync="queryParams.itemType" :itemId.sync="queryParams.itemId" @change="getList" />
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form> -->
      <!-- 上方增加分组信息会影响下面的表格显示, 可以添加多级分组，例如按照itemType，按照itemName, 按照材质material, 按照规格specification, 按照厂家manufacturer -->
      <div class="group-controls">
        <el-form :model="groupForm" size="small" :inline="true">
          <el-form-item label="分组维度">
            <el-select v-model="groupForm.groupingCriteria" multiple placeholder="请选择分组维度" style="width: 300px;">
              <el-option label="物料类型" value="itemType" />
              <el-option label="物料名称" value="itemName" />
              <el-option label="材质" value="material" />
              <el-option label="规格" value="specification" />
              <el-option label="宽度" value="width" />
              <el-option label="厚度" value="thickness" />
              <el-option label="厂家" value="manufacturer" />
              <el-option label="镀层质量" value="zincLayer" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">应用分组</el-button>
            <el-button @click="resetGroup">重置分组</el-button>
          </el-form-item>
        </el-form>
      </div>

      <vxe-toolbar :refresh="{query: reload}" export custom>
        <template v-slot:buttons>
          <!-- 统计数据；共{{ total }}卷 -->
          <span style="margin-left: 10px; font-weight: bold;">统计数据：共{{ total }}卷，总重量{{ totalWeight.toFixed(2) }}吨</span>
          
          <!-- <vxe-input v-model.lazy="filterName" type="search" placeholder="全表搜索" style="width: 200px; margin-left: 10px;"></vxe-input> -->
          <!-- <vxe-button @click="$refs.xTree.setAllTreeExpand(true)">展开所有</vxe-button>
          <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button> -->
          <vxe-button @click="clearFilterEvent">清除所有筛选</vxe-button>
        </template>
      </vxe-toolbar>

      <div style="height: calc(100vh - 260px);">
        <vxe-table ref="xTree" :loading="loading" :data="list" size="mini" :tree-config="effectiveTreeConfig"
          max-height="100%" @row-click="handleTableRowClick" :export-config="{}" :scroll-y="{ enabled: true }">
          <vxe-table-column field="itemType" title="物料类型" align="center" :formatter="formatterItemType" tree-node sortable :filters="[{label: '产品', value: 'product'}, {label: '原料', value: 'raw_material'}]" :filter-method="filterItemTypeMethod">
            <template v-slot="{ row }">
              <span v-if="row.itemType">{{ formatterItemType(row.itemType) }}</span>
              <span v-else>{{ row.itemType || row.itemName || row.material || row.specification || row.manufacturer || row.zincLayer || 
                row.width ? ('宽度：' + row.width) : undefined || 
                row.thickness ? ('厚度：' + row.thickness) : undefined
                }}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column sortable field="itemName" title="物料名称" align="center" :filters="itemNameOptions" :filter-method="filterItemNameMethod">
          </vxe-table-column>
          <vxe-table-column sortable field="material" title="材质" align="center" :filters="materialOptions" :filter-method="filterMaterialMethod">
          </vxe-table-column>
          <vxe-table-column sortable field="specification" title="规格" align="center" :filters="specificationOptions" :filter-method="filterSpecificationMethod">  
          </vxe-table-column>
          <vxe-table-column sortable field="thickness" title="厚度" align="center" :filters="thicknessOptions" :filter-method="filterThicknessMethod">
          </vxe-table-column>
          <vxe-table-column sortable field="width" title="宽度" align="center" :filters="widthOptions" :filter-method="filterWidthMethod">
          </vxe-table-column>
          <vxe-table-column sortable field="manufacturer" title="厂家" align="center" :filters="manufacturerOptions" :filter-method="filterManufacturerMethod">
          </vxe-table-column>
          <vxe-table-column sortable field="zincLayer" title="镀层质量" align="center" :filters="zincLayerOptions" :filter-method="filterZincLayerMethod">  
          </vxe-table-column>
          <!-- <vxe-table-column sortable field="totalQuantity" title="库存数量" align="center">
          </vxe-table-column> -->
          <vxe-table-column sortable field="netWeight" title="重量" align="center">
          </vxe-table-column>
           <vxe-table-column sortable field="quantity" title="数量" align="center">
          </vxe-table-column>
          <!-- <vxe-table-column field="remark" title="备注" align="center" /> -->

        </vxe-table>
      </div>
    </div>
  </div>
</template>

<script>
import { listMaterialCoil } from "@/api/wms/coil";
import WarehouseSelect from "@/components/WarehouseSelect";
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import WarehouseTree from "@/components/KLPService/WarehouseTree/index.vue";
import MaterialSelect from "@/components/KLPService/MaterialSelect";

export default {
  name: "Stock",
  dicts: ['stock_item_type'],
  components: {
    WarehouseSelect,
    RawMaterialInfo,
    ProductInfo,
    WarehouseTree,
    MaterialSelect,
  },
  data() {
    return {
      // 库存分析对话框显示状态
      stockBoxVisible: false,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      totalQuantity: 0,
      totalWeight: 0,
      // 宽度和厚度汇总
      widths: [],
      thicknesses: [],
      // 库存：原材料/产品与库区/库位的存放关系表格数据
      stockList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 99,
        status: 0,
        dateType: 1,
        warehouseId: undefined,
      },
      warehouseType: 'virtual',
      // 表单参数
      form: {},

      // 分组相关数据
      groupForm: {
        groupingCriteria: []
      },
      // vxe-table树配置
      tableTreeConfig: {
        children: 'children',
        accordion: true,
        expandAll: false,
        line: true,
      },
      // 搜索关键字
      filterName: '',
      // 筛选选项数组
      itemNameOptions: [],
      materialOptions: [],
      specificationOptions: [],
      manufacturerOptions: [],
      zincLayerOptions: [],
      thicknessOptions: [],
      widthOptions: []
    };
  },
  computed: {
    list() {
      const filterName = this.filterName.trim().toLowerCase();
      if (!filterName) {
        return this.stockList;
      }
      
      const searchProps = ['itemType', 'itemName', 'material', 'specification', 'manufacturer', 'totalQuantity', 'remark'];
      
      const filterData = (data) => {
        return data.filter(item => {
          if (item.children) {
            item.children = filterData(item.children);
            return item.children.length > 0 || searchProps.some(key => {
              return String(item[key] || '').toLowerCase().includes(filterName);
            });
          }
          return searchProps.some(key => {
            return String(item[key] || '').toLowerCase().includes(filterName);
          });
        });
      };
      
      return filterData([...this.stockList]);
    },
    // 控制是否启用树形数据配置
    effectiveTreeConfig() {
      // 当没有分组条件时，不启用树形数据
      return this.groupForm.groupingCriteria && this.groupForm.groupingCriteria.length > 0 ? this.tableTreeConfig : undefined;
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询库存列表 */
    getList() {
      this.loading = true;
      if (this.warehouseType === 'real') {
        listMaterialCoil(this.queryParams).then(res => {
          let list = res.rows
          // 处理数据，添加宽度、厚度和数量字段
          list = list.map(item => {
            const parts = item.specification ? item.specification.split('*') : [];
            return {
              ...item,
              thickness: parts[0] || '',
              width: parts[1] || '',
              quantity: 1 // 数量字段设为1
            };
          });
          this.stockList = this.groupData(list, this.groupForm.groupingCriteria);
          this.extractOptions(list);
          // 计算总数量和总重量
          this.calculateTotals(list);
          this.loading = false;
        })
      } else {
        listMaterialCoil(this.queryParams).then(res => {
          let list = res.rows
          // 处理数据，添加宽度、厚度和数量字段
          list = list.map(item => {
            const parts = item.specification ? item.specification.split('*') : [];
            return {
              ...item,
              thickness: parts[0] || '',
              width: parts[1] || '',
              quantity: 1 // 数量字段设为1
            };
          });
          this.stockList = this.groupData(list, this.groupForm.groupingCriteria);
          this.extractOptions(list);
          // 计算总数量和总重量
          this.calculateTotals(list);
          this.loading = false;
        })
      }
    },
    /** 提取筛选选项值 */
    extractOptions(data) {
      // 提取唯一值
      const itemNames = new Set();
      const materials = new Set();
      const specifications = new Set();
      const manufacturers = new Set();
      const zincLayers = new Set();
      const thicknesses = new Set();
      const widths = new Set();
      
      data.forEach(item => {
        if (item.itemName) itemNames.add(item.itemName);
        if (item.material) materials.add(item.material);
        if (item.specification) specifications.add(item.specification);
        if (item.manufacturer) manufacturers.add(item.manufacturer);
        if (item.zincLayer) zincLayers.add(item.zincLayer);
        if (item.thickness) thicknesses.add(item.thickness);
        if (item.width) widths.add(item.width);
      });
      
      // 转换为数组并排序
      this.itemNameOptions = Array.from(itemNames).sort();
      this.materialOptions = Array.from(materials).sort();
      this.specificationOptions = Array.from(specifications).sort();
      this.manufacturerOptions = Array.from(manufacturers).sort();
      this.zincLayerOptions = Array.from(zincLayers).sort();
      this.thicknessOptions = Array.from(thicknesses).sort();
      this.widthOptions = Array.from(widths).sort();

      this.updateManufacturerFilterEvent();
      this.updateZincLayerFilterEvent();
      this.updateSpecificationFilterEvent();
      this.updateMaterialFilterEvent();
      this.updateNameFilterEvent();
      this.updateThicknessFilterEvent();
      this.updateWidthFilterEvent();

      console.log(this.itemNameOptions, itemNames, data);
    },
    formatterItemType(itemType) {
      return itemType === 'raw_material' ? '原材料' : '产品';
    },
    /** 格式化厚度 */
    formatterThickness(row) {
      if (!row.specification) return '';
      const parts = row.specification.split('*');
      return parts[0] || '';
    },
    /** 格式化宽度 */
    formatterWidth(row) {
      if (!row.specification) return '';
      const parts = row.specification.split('*');
      return parts[1] || '';
    },
    /** 计算总数量和总重量 */
    calculateTotals(data) {
      // 计算总数量（求和）
      this.total = data.length;
      
      // 计算总重量（求和并保留两位小数）
      this.totalWeight = parseFloat(data.reduce((sum, item) => {
        return sum + (parseFloat(item.netWeight) || 0);
      }, 0).toFixed(2));
      
      // 汇总宽度和厚度（提取唯一值）
      this.widths = [...new Set(data.map(item => item.width).filter(w => w))].sort();
      this.thicknesses = [...new Set(data.map(item => item.thickness).filter(t => t))].sort();
    },
    // 树节点点击
    handleTreeSelect(node) {
      if (this.warehouseType === 'real') {
        this.queryParams.actualWarehouseId = node.actualWarehouseId;
        this.queryParams.warehouseId = '';
      } else {
        this.queryParams.warehouseId = node.warehouseId;
        this.queryParams.actualWarehouseId = '';
      }
      
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('wms/stock/export', {
        ...this.queryParams
      }, `stock_${new Date().getTime()}.xlsx`)
    },

    /** 重置分组 */
    resetGroup() {
      this.groupForm.groupingCriteria = [];
      this.getList();
    },
    /** 分组数据处理 */
    groupData(data, criteria) {
      if (!criteria || criteria.length === 0) {
        return data;
      }
      
      const groupBy = (arr, key) => {
        return arr.reduce((groups, item) => {
          const value = item[key] || '未知';
          if (!groups[value]) {
            groups[value] = [];
          }
          groups[value].push(item);
          return groups;
        }, {});
      };
      
      const buildTree = (items, level) => {
        if (level >= criteria.length) {
          return items;
        }
        
        const currentCriteria = criteria[level];
        const grouped = groupBy(items, currentCriteria);
        
        return Object.keys(grouped).map(key => {
          const children = buildTree(grouped[key], level + 1);
          const totalQuantity = children.reduce((sum, child) => {
            return sum + (parseInt(child.quantity) || 0);
          }, 0);
          
          const totalWeight = parseFloat(children.reduce((sum, child) => {
            return sum + (parseFloat(child.netWeight) || 0);
          }, 0).toFixed(2));
          
          return {
            [currentCriteria]: key,
            quantity: totalQuantity,
            netWeight: totalWeight,
            children,
            hasChildren: children.length > 0
          };
        });
      };
      
      return buildTree(data, 0);
    },
    /** 物料类型筛选 */
    filterItemTypeMethod({ cellValue, option }) {
      return cellValue === option.value;
    },
    /** 物料名称筛选 */
    filterItemNameMethod({ cellValue, option }) {
      return option.value ? cellValue === option.value : true;
    },
    /** 材质筛选 */
    filterMaterialMethod({ cellValue, option }) {
      return option.value ? cellValue === option.value : true;
    },
    /** 规格筛选 */
    filterSpecificationMethod({ cellValue, option }) {
      return option.value ? cellValue === option.value : true;
    },
    /** 厂家筛选 */
    filterManufacturerMethod({ cellValue, option }) {
      return option.value ? cellValue === option.value : true;
    },
    /** 镀层质量筛选 */
    filterZincLayerMethod({ cellValue, option }) {
      return option.value ? cellValue === option.value : true;
    },
    /** 厚度筛选 */
    filterThicknessMethod({ cellValue, option }) {
      return option.value ? cellValue === option.value : true;
    },
    /** 宽度筛选 */
    filterWidthMethod({ cellValue, option }) {
      return option.value ? cellValue === option.value : true;
    },
    /** 库存数量筛选 */
    filterTotalQuantityMethod({ cellValue, option }) {
      const value = Number(cellValue || 0);
      const filterValue = Number(option.value || 0);
      
      switch (option.operator || option.value) {
        case 'gt':
          return value > filterValue;
        case 'gte':
          return value >= filterValue;
        case 'lt':
          return value < filterValue;
        case 'lte':
          return value <= filterValue;
        case 'eq':
          return value === filterValue;
        default:
          return true;
      }
    },
    /** 更改物料名称筛选条件 */
    updateNameFilterEvent() {
      const xTable = this.$refs.xTree;
      const column = xTable.getColumnByField('itemName');
      // 使用从数据中汇总的实际选项
      const options = this.itemNameOptions.map(item => ({
        label: item,
        value: item
      }));
      // 修改筛选列表
      xTable.setFilter(column, options);
      // 修改条件之后，需要手动调用 updateData 处理表格数据
      xTable.updateData();
    },
    /** 更改材质筛选条件 */
    updateMaterialFilterEvent() {
      const xTable = this.$refs.xTree;
      const column = xTable.getColumnByField('material');
      // 使用从数据中汇总的实际选项
      const options = this.materialOptions.map(item => ({
        label: item,
        value: item
      }));
      // 修改筛选列表
      xTable.setFilter(column, options);
      // 修改条件之后，需要手动调用 updateData 处理表格数据
      xTable.updateData();
    },
    /** 更改规格筛选条件 */
    updateSpecificationFilterEvent() {
      const xTable = this.$refs.xTree;
      const column = xTable.getColumnByField('specification');
      // 使用从数据中汇总的实际选项
      const options = this.specificationOptions.map(item => ({
        label: item,
        value: item
      }));
      // 修改筛选列表
      xTable.setFilter(column, options);
      // 修改条件之后，需要手动调用 updateData 处理表格数据
      xTable.updateData();
    },
    /** 更改厂家筛选条件 */
    updateManufacturerFilterEvent() {
      const xTable = this.$refs.xTree;
      const column = xTable.getColumnByField('manufacturer');
      // 使用从数据中汇总的实际选项
      const options = this.manufacturerOptions.map(item => ({
        label: item,
        value: item
      }));
      // 修改筛选列表
      xTable.setFilter(column, options);
      // 修改条件之后，需要手动调用 updateData 处理表格数据
      xTable.updateData();
    },
    /** 更改镀层质量筛选条件 */
    updateZincLayerFilterEvent() {
      const xTable = this.$refs.xTree;
      const column = xTable.getColumnByField('zincLayer');
      // 使用从数据中汇总的实际选项
      const options = this.zincLayerOptions.map(item => ({
        label: item,
        value: item
      }));
      // 修改筛选列表
      xTable.setFilter(column, options);
      // 修改条件之后，需要手动调用 updateData 处理表格数据
      xTable.updateData();
    },
    /** 更改厚度筛选条件 */
    updateThicknessFilterEvent() {
      const xTable = this.$refs.xTree;
      const column = xTable.getColumnByField('thickness');
      // 使用从数据中汇总的实际选项
      const options = this.thicknessOptions.map(item => ({
        label: item,
        value: item
      }));
      // 修改筛选列表
      xTable.setFilter(column, options);
      // 修改条件之后，需要手动调用 updateData 处理表格数据
      xTable.updateData();
    },
    /** 更改宽度筛选条件 */
    updateWidthFilterEvent() {
      const xTable = this.$refs.xTree;
      const column = xTable.getColumnByField('width');
      // 使用从数据中汇总的实际选项
      const options = this.widthOptions.map(item => ({
        label: item,
        value: item
      }));
      // 修改筛选列表
      xTable.setFilter(column, options);
      // 修改条件之后，需要手动调用 updateData 处理表格数据
      xTable.updateData();
    },
    /** 清除筛选条件 */
    clearFilterEvent() {
      const xTable = this.$refs.xTree;
      xTable.clearFilter();
      xTable.updateData();
    },
    /** 刷新数据 */
    reload() {
      this.getList();
    }
  }
};
</script>

<style scoped>
.stock-layout {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.stock-tree-col {
  width: 260px;
  max-width: 300px;
  background: #fff;
  border-right: 1px solid #f0f0f0;
  height: 100%;
  padding-right: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.stock-tree-card {
  height: 100%;
  border: none;
  box-shadow: none;
}

.stock-tree-title {
  font-weight: bold;
  font-size: 16px;
  padding: 8px 0;
}

.stock-tree {
  min-height: 500px;
  max-height: 80vh;
  overflow-y: auto;
}

.stock-main-col {
  flex: 1;
  padding-left: 24px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.group-controls {
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 4px;
  border: 1px solid #eaeaea;
}

.group-controls .el-form {
  margin-bottom: 0;
}

/* 分组行样式 */
.el-table__row.group-row {
  background-color: #f5f7fa;
}

/* 叶子节点样式 */
.el-table__row.leaf-row {
  background-color: #ffffff;
}

/* 筛选输入框样式 */
.my-input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 12px;
  outline: none;
  transition: border-color 0.3s;
}

.my-input:focus {
  border-color: #409eff;
}

/* 筛选下拉选择框样式 */
.my-select {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 12px;
  outline: none;
  transition: border-color 0.3s;
  background-color: #fff;
}

.my-select:focus {
  border-color: #409eff;
}

/* 库存数量筛选样式 */
.quantity-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quantity-filter .my-select {
  width: 100%;
}

.quantity-filter .my-input {
  width: 100%;
}
</style>