<template>
  <div class="app-container">
    <el-space style="margin-bottom: 20px">
      <el-select v-model="selectListValue" class="m-2" placeholder="请选择">
        <el-option
          v-for="item in selectList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input v-model="inputValue" :placeholder="placeholder" />
      <el-button type="primary" @click="handleFilter">筛选</el-button>
    </el-space>
    <el-button type="primary" @click="exportExcelAll">导出全部Excel</el-button>
    <el-button type="primary" @click="exportExcelList"
      >导出当前页Excel</el-button
    >
    <el-table :data="tableData" border script>
      <el-table-column prop="org_name" label="组织名称" />
      <el-table-column prop="org_id" label="组织编码" />
      <el-table-column prop="mtrl_code" label="物料编码" />
      <el-table-column prop="mtrl_name" label="物料名称" />
      <el-table-column prop="prop_id" label="辅助属性" />
      <el-table-column prop="stock_code" label="仓库编码" />
      <el-table-column prop="stock_name" label="仓库名称" />
      <el-table-column prop="produce_date" label="生产日期" />
      <el-table-column prop="period" label="保质期" />
      <el-table-column prop="period_unit" label="保质期单位" />
      <el-table-column prop="lot" label="批次号" />
      <el-table-column prop="qty" label="库存量" />
      <el-table-column prop="f_qty" label="可用量" />
      <el-table-column prop="unit" label="库存单位" />
    </el-table>

    <pagination
      :page-data="listQuery"
      :total="total"
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { v4 } from "uuid";
import pagination from "@/components/pagination/index.vue";

const listQuery = ref({
  docType: "INVENTORY",
  queueId: "",
  data: {} as any,
  pageNo: 1,
  pageSize: 10,
});

const selectList = [
  { label: "名称", value: "FMaterialName" },
  { label: "规格", value: "FModel" },
  { label: "仓库", value: "FStockName" },
  { label: "仓位", value: "FStockLocId" },
  { label: "编码", value: "FMaterialId.Fnumber" },
];

const selectListValue = ref();

const tableData = ref();
const total = ref(0);
const inputValue = ref();

const placeholder = computed(() => {
  let str: any;
  selectList.map((item: any) => {
    if (item.value == selectListValue.value) {
      str = item.label;
    }
  });
  return selectListValue.value ? str : "请选择下拉菜单";
});

const sizeChange = (val: number) => {
  listQuery.value.pageSize = val;
  init();
};

const currentChange = (val: number) => {
  listQuery.value.pageNo = val;
  init();
};

const handleFilter = () => {
  if (inputValue.value)
    listQuery.value.data[selectListValue.value] = inputValue.value;
  else listQuery.value.data = {};
  init();
};
const headers: any = { Authorization: sessionStorage.getItem("token") };

const exportExcelAll = () => {};

const exportExcelList = () => {};

const init = async () => {
  let newUuid = v4();
};
init();
</script>
