<template>
  <div class="page-horizontal-wrap">
    <div class="page-left-container">
      <div class="page-left-container-head">
        <div class="page-form-title">
          <span>Box信息</span>
        </div>
        <div class="page-form-button">
          <el-button type="primary" style="width: 60px;">打印</el-button>
        </div>
      </div>
      <div class="left-form-container">
        <el-input v-model="state.boxId" placeholder="请扫描BoxID" />
      </div>
    </div>
    <div class="vue-element-page-wrap" ref="tableContainer">
      <div class="vue-element-page-table">
        <div class="page-table-operate">
          <span>已打印Box信息列表</span>
        </div>
        <el-table border :data="pageList" highlight-current-row row-key="id" style="width: 100%">
          <template v-for="(col, index) in column" :key="index">
            <el-table-column v-if="!col.hide" :label="col.header" show-overflow-tooltip>
              <template #default="scope">
                <span>{{ scope.row[col.field] }}</span>
              </template>
            </el-table-column>
          </template>
          <template v-slot:empty>
            <svg-icon icon-class="noData" width="160px" height="160px" />
          </template>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "resource",
};
</script>

<script lang="ts" setup>
import { reactive, ref, onMounted, toRefs, getCurrentInstance, watch, computed } from "vue";
import { ElForm, ElMessageBox, ElTree } from "element-plus";

import useStore from "@/store";

const formDataRef = ref(ElForm);

const { proxy }: any = getCurrentInstance();
const { app } = useStore();
interface Tree {
  catalogId: number;
  label: string;
  children?: Tree[];
}

const defaultProps = {
  children: "children",
  label: "label",
};
const state = reactive({
  boxId: "",
  queryParams: {
    queryId: "getAllMenuInfo",
    version: "00001",
    params: {
      FORMNAME: "",
      DESCRIPTION: "",
    },
    pageNum: 1,
    pageSize: 10,
  },
  total: 0,
  pageList: [] as any,
  formData: {
    type: 1,
    name: "",
    url: "",
    catalogId: "" as any,
    seq: 1,
  } as any,
  rules: {
    type: [{ required: true, message: "请选择页面类型", trigger: "blur" }],
    name: [{ required: true, message: "请输入页面名称", trigger: "blur" }],
    url: [{ required: true, message: "请输入页面地址", trigger: "blur" }],
    catalogId: [{ required: true, message: "请输入选择所属目录", trigger: "blur" }],
    seq: [{ required: true, message: "请输入排序号", trigger: "blur" }],
  },
  column: [] as any,
  selectItem: undefined as any, // 选中的页面项
  currentTime: "",
});
const { queryParams, total, pageList, column } = toRefs(state);


onMounted(() => {
  state.column = [
    { header: "BoxID", field: "MATERIALPACKING", hide: false },
    { header: "Box类型", field: "MATERIALPACKINGTYPE", hide: false },
    { header: "生成时间", field: "POSITIONATSUPERMENU", hide: false },
    { header: "物料编号", field: "STATUS", hide: false },
    { header: "物料类型", field: "CREATEUSER", hide: false },
    { header: "生产日期", field: "CREATETIME", hide: false },
    { header: "到期日", field: "LASTUPDATEUSER", hide: false },
    { header: "保质期", field: "LASTUPDATETIME", hide: false },
    { header: "物料描述", field: "LASTUPDATETIME", hide: false },
    { header: "物料数量", field: "LASTUPDATETIME", hide: false },
    { header: "移动原因", field: "LASTUPDATETIME", hide: false },
  ];
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
