<template>
  <div class="app-container" v-loading="loading">
    <!-- 查询条件设置 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
      <el-form-item label="入场钢卷号" prop="enterCoilNo">
        <el-input v-model="queryParams.enterCoilNo" placeholder="请输入入场钢卷号" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="当前钢卷号" prop="currentCoilNo">
        <el-input v-model="queryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="逻辑库位" prop="warehouseId">
        <warehouse-select v-model="queryParams.warehouseId" placeholder="请选择仓库/库区/库位"
          style="width: 100%; display: inline-block;" clearable />
      </el-form-item>

      <el-form-item label="实际库区" prop="actualWarehouseId">
        <actual-warehouse-select v-model="queryParams.actualWarehouseId" placeholder="请选择仓库/库区/库位"
          style="width: 100%; display: inline-block;" clearable :canSelectDisabled="true" :canSelectLevel2="true"
          :clearInput="false" :showEmpty="true" />
      </el-form-item>

      <el-form-item label="规格" prop="itemSpecification">
        <memo-input v-model="queryParams.itemSpecification" storageKey="coilSpec" placeholder="请选择规格" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="材质" prop="itemMaterial">
        <muti-select v-model="queryParams.itemMaterial" :options="dict.type.coil_material" placeholder="请选择材质" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="厂家" prop="itemManufacturer">
        <muti-select v-model="queryParams.itemManufacturer" :options="dict.type.coil_manufacturer" placeholder="请选择厂家"
          clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据汇总 -->
    <el-descriptions title="统计数据" :column="3" border>
      <el-descriptions-item label="总长度 (米)">{{ summaryData.totalLength }}</el-descriptions-item>
      <el-descriptions-item label="总重量 (吨)">{{ summaryData.totalNetWeight }}</el-descriptions-item>
      <el-descriptions-item label="平均重量 (吨)">{{ summaryData.avgNetWeight }}</el-descriptions-item>
    </el-descriptions>

    <!-- 本地筛选 -->
    <!-- <el-tabs v-model="filters.itemType" type="border-card">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="产品" name="product"></el-tab-pane>
      <el-tab-pane label="原材料" name="raw_material"></el-tab-pane>
    </el-tabs>
    <el-tabs v-model="filters.itemManufacturer" type="border-card">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane v-for="item in dict.type.coil_manufacturer" :label="item.label" :name="item.value"></el-tab-pane>
    </el-tabs> -->

    <!-- 数据明细展示 -->
    <el-table v-loading="filterLoading" :data="filteredList" height="calc(100vh - 300px)">
      <el-table-column label="入场钢卷号" align="center" prop="enterCoilNo">
        <template slot-scope="scope">
          <coil-no :coil-no="scope.row.enterCoilNo"></coil-no>
        </template>
      </el-table-column>
      <el-table-column label="当前钢卷号" align="center" prop="currentCoilNo">
        <template slot-scope="scope">
          <current-coil-no :current-coil-no="scope.row.currentCoilNo"></current-coil-no>
        </template>
      </el-table-column>
      <!-- <el-table-column label="厂家卷号" align="center" prop="supplierCoilNo" /> -->
      <el-table-column label="逻辑库位" align="center" prop="warehouseName" />
      <el-table-column label="实际库区" align="center" prop="actualWarehouseName" />
      <el-table-column label="物料类型" align="center" prop="materialType" />
      <el-table-column label="产品类型" align="center" width="250">
        <template slot-scope="scope">
          <ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row" />
          <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row" />
        </template>
      </el-table-column>
      <el-table-column label="长度 (米)" align="center" prop="length" />
      <el-table-column label="重量 (吨)" align="center" prop="netWeight" />
      <el-table-column label="更新时间" align="center" prop="updateTime" />
      <el-table-column label="更新人" align="center" prop="updateByName" />

      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />

      <el-table-column label="发货状态" align="center" prop="status" width="150">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" type="success" size="mini">已发货</el-tag>
          <el-tag v-else type="info" size="mini">未发货</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { listMaterialCoil } from "@/api/wms/coil";
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";
import MemoInput from "@/components/MemoInput";
import MutiSelect from "@/components/MutiSelect";
import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect";
import WarehouseSelect from "@/components/KLPService/WarehouseSelect";

export default {
  name: 'ByName',
  props: {
    itemName: {
      type: String,
      default: ''
    }
  },
  dicts: ['coil_material', 'coil_manufacturer'],
  created() {
    this.fetchData();
  },
  components: {
    ProductInfo,
    RawMaterialInfo,
    CoilNo,
    MemoInput,
    MutiSelect,
    ActualWarehouseSelect,
    WarehouseSelect,
  },
  data() {
    return {
      queryParams: {
        dataType: 1,
        status: 0,
        pageNum: 1,
        pageSize: 5000,
        itemName: this.itemName,
        enterCoilNo: '',
        currentCoilNo: '',
        warehouseId: '',
        actualWarehouseId: '',
        itemSpecification: '',
        itemMaterial: '',
        itemManufacturer: '',
      },
      list: [],
      loading: false,
      filters: {
        itemType: 'all',
        itemManufacturer: 'all',
      },
      filterLoading: false,
      // 汇总维度
      // filterDimension: ['itemType'],
      // filterConfig: {

      // }
    }
  },
  computed: {
    summaryData() {
      // 总数量，总重量，平均重量
      const total = this.list.reduce((acc, cur) => {
        acc.length += 1;
        acc.netWeight += parseFloat(cur.netWeight);
        return acc;
      }, { length: 0, netWeight: 0 });
      return {
        totalLength: total.length,
        totalNetWeight: total.netWeight.toFixed(2),
        avgNetWeight: (total.netWeight / this.list.length).toFixed(2)
      };
    },
    filteredList() {
      this.filterLoading = true;
      const filteredList = this.list.filter(item => {
        if (this.filters.itemType !== 'all' && item.itemType !== this.filters.itemType) {
          return false;
        }
        if (this.filters.itemManufacturer !== 'all' && item.itemManufacturer !== this.filters.itemManufacturer) {
          return false;
        }
        return true;
      });
      this.filterLoading = false;
      return filteredList;
    }
  },
  methods: {
    async fetchData() {
      this.loading = true;
      try {
        const res1 = await listMaterialCoil({...this.queryParams, itemType: 'product', materialType: '成品', selectType: 'product'});
        const res2 = await listMaterialCoil({...this.queryParams, itemType: 'raw_material', materialType: '原料', selectType: 'raw_material'});
        const res = [...res1.rows, ...res2.rows];
        this.list = res || [];
      } catch (err) {
        this.$message.error("获取数据失败：" + err.message);
      } finally {
        this.loading = false;
      }
    },
    handleQuery() {
      this.fetchData();
    },
    resetQuery() {
      this.queryParams = {
        dataType: 1,
        status: 0,
        pageNum: 1,
        pageSize: 5000,
        itemName: this.itemName,
      };
      this.fetchData();
    },
  }
}
</script>

<style scoped>
  /* 样式穿透 */
  ::v-deep .el-tabs .el-tabs__content {
    padding: 0;
  }
</style>
