<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;" @click="handlePrint">打印</el-button>
        </div>
      </div>
      <div class="left-form-container">
        <el-input v-model="state.boxIds" :rows="20" type="textarea" 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="boxList" 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";
import { getQueryList } from '@/api/common';

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({
  boxIds: "",
  queryParams: {
    queryId: "GetBoxList",
    version: "10042",
    params: {
      MATERIALPACKINGNAME: "",
      SITENAME: "",
    }
  },
  boxList: [] as any,
  
  column: [] as any,
  selectItem: undefined as any, // 选中的页面项
  currentTime: "",
});
const { queryParams, boxList, 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 },
  ];
});

function handlePrint() {
  if (checkPrint()){
    printBox();
  }
}

function checkPrint() {
  let boxStr = state.boxIds.replace('\r\n', ',');
  let resData: any = [];
  state.queryParams.params.MATERIALPACKINGNAME = boxStr;
  state.queryParams.params.SITENAME = localStorage.getItem('siteName') || '';
  getQueryList(state.queryParams).then((res:any) => {
    resData = res.data;
  })
  resData.forEach((item: any) => {
    if (item.MATERIALPACKINGNAME == null){
      proxy.$ElMessage.warning('Not exist Box Information');
      state.boxList = [];
      return false;
    }else if (item.MATERIALQUANTITY == '0' || item.MATERIALQUANTITY == null) {
      proxy.$ElMessage.warning('This Box is Empty;');
      state.boxList = [];
      return false;
    }
  })
  state.boxList = resData;
  return true;
}

function printBox(){

}

</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
