<template>
  <div class="page-horizontal-wrap">
    <div class="page-left-container">
      <div class="page-left-container-head">
        <div class="page-form-title">
          <span>批次信息</span>
        </div>
      </div>

      <div class="left-form-container">
        <el-form ref="formDataRef" :model="formData" :rules="rules" label-position="left" label-width="120px">
          <el-form-item label="批次号" prop="state.queryParams.params">
            <el-input v-model="state.queryParams.params.MATERIALPACKINGNAME" placeholder="请输入批次号，按Enter继续" @keyup.enter.native="handleQuery()"/>
          </el-form-item>
          <el-form-item label="物料号" prop="state.queryParams.params">
            <el-input v-model="state.formData.MATERIALSPECNAME" disabled/>
          </el-form-item>
          <el-form-item label="物料描述" prop="state.queryParams.params">
            <el-input v-model="state.formData.DESC_CN" disabled/>
          </el-form-item>
          <el-form-item label="生产日期" prop="state.queryParams.params">
            <el-input v-model="state.formData.MAKEDATE" disabled/>
          </el-form-item>
          <el-form-item label="物料总数" prop="state.queryParams.params">
            <el-input v-model="state.formData.MATERIALQUANTITY" disabled/>
          </el-form-item>
          <el-form-item label="供应商名称" prop="state.queryParams.params">
            <el-input v-model="state.formData.SUPPLIERNAME" disabled/>
          </el-form-item>
          <el-form-item style="margin-top: 80px" label="子批次数量" prop="email">
            <el-input v-model="state.BOXQUANTITY"/>
          </el-form-item>
        </el-form>
      </div>
      <div class="left-form-operateBtns">
        <el-button type="primary" @click = "generateBoxList">平均拆分</el-button>
        <el-button type="primary">自定义拆分</el-button>
      </div>
    </div>
    <div class="vue-element-page-wrap" ref="tableContainer">
      <div class="vue-element-page-table">
        <div class="page-table-operate">
          <div class="page-table-title">
            <div class="page-table-title-left">
              <span>分离箱信息列表</span>
            </div>
            <div class="page-table-title-check">
              <el-checkbox label="打印" name="type" />
            </div>
          </div>
        </div>
        <el-table border v-loading="loading" :data="pageList" highlight-current-row row-key="id">
          <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>
      <el-row class="page-search" justify="end" align="middle">
        <div class="page-search-btns">
          <el-button type="primary" @click="handleQuery">清空</el-button>
          <el-button type="primary" @click="splitBox">确认</el-button>
        </div>
      </el-row>
    </div>
  </div>
</template>

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

<script lang="ts" setup>
import { reactive, ref, onMounted, toRefs, getCurrentInstance } from "vue";
import { ElForm, ElMessageBox, ElTree } from "element-plus";
import { getQueryPageList, BpelEvent } from "@/api/common";
import { addSite, updateSite, deleteSite } from "@/api/site";

const queryFormRef = ref(ElForm);
const formDataRef = ref(ElForm);
const { proxy }: any = getCurrentInstance();

interface Tree {
  id: number;
  label: string;
  children?: Tree[];
}

const defaultProps = {
  children: "children",
  label: "label",
};
const treeRef = ref<InstanceType<typeof ElTree>>();

const state = reactive({
  queryParams: {
    queryId: "GetSplitPackingInfo",
    version: "00001",
    params: {
      SITENAME: "SDK",
      MATERIALPACKINGNAME: "",
    },
    pageNum: 1,
    pageSize: 10,
  },
  changeParams1: {
    header: {
        MESSAGENAME: "GenerateBoxList",
        LANGUAGE: "Chinese"
    },
    body: {
        SITENAME:"SDK",
        BOXQUANTITY:"",
        MAKEDATE: ""
    }
  },
  changeParams2: {
    header: {
        MESSAGENAME: "SplitBox",
        LANGUAGE: "Chinese"
    },
    body: {
      BOXLIST: []  as any,
      SITENAME:"",
      MATERIALPACKINGNAME:"",
      MATERIALQUANTITY:""
    }
  },
  total: 0,
  loading: false,
  pageList: [] as any,
  selectItem: undefined as any,
  formData: {
    SITENAME: "",
    MATERIALSPECNAME: "", // 物料号
    MAKEDATE: "", // 生产日期
    EXPIRINGDATE: "", // 到日期
    MATERIALQUANTITY: "", // 物料总数
    SUPPLIERNAME: "", // 供应商名称
    DESC_CN: "", //  描述
  },
  BOXQUANTITY: "",
  rules: {
    siteName: [{ required: true, message: "请输入工厂编码", trigger: "blur" }],
    description: [{ required: true, message: "请输入工厂名称", trigger: "blur" }],
  },
  column: [] as any,
  currentTime: "",
});
const { queryParams, total, loading, pageList, formData, selectItem, rules, column, currentTime } = toRefs(state);

onMounted(() => {
  state.column = [
    { header: "工厂", field: "SITENAME", hide: false },
    { header: "批次号", field: "MATERIALPACKINGNAME", hide: false },
    { header: "物料描述", field: "DESCRIPTION", hide: false },
    { header: "物料编号", field: "MATERIALSPECNAME", hide: false },
    { header: "物料总数量", field: "MATERIALQUANTITY", hide: false },
    { header: "生产日期", field: "MAKEDATE", hide: false },

  ];
});
// 更新列
function updateList(col: any) {
  state.column = col;
}
function handleQuery() {
  getQueryPageList(state.queryParams)
    .then((res: any) => {
      if(res.data.list.length == 0){
        alert("该批次号不存在！");
        return
      }
      const packingInfo = res.data.list[0];
      state.formData = packingInfo;
      showCurrentTime();
    })
    .catch(() => {});
}

function generateBoxList(){

  state.changeParams1.body.BOXQUANTITY = state.BOXQUANTITY;
  state.changeParams1.body.MAKEDATE = state.formData.MAKEDATE;
  BpelEvent(state.changeParams1)
    .then((res: any) => {
      if(res.success){
        state.pageList = res;
      } 
    })
    .catch(() => {});
}
function splitBox(){

  state.changeParams2.body.MATERIALPACKINGNAME = state.queryParams.params.MATERIALPACKINGNAME;
  state.changeParams2.body.MATERIALQUANTITY = state.formData.MATERIALQUANTITY;
  state.changeParams2.body.BOXLIST=[];
  for (let k = 0; k < state.pageList.length; k++) {  
    // 将 BOX 对象推送到 state.changeParams.body.BOXLIST 数组中  
    state.changeParams2.body.BOXLIST.push({  
        MATERIALPACKINGNAME: state.pageList[k].MATERIALPACKINGNAME, 
        MATERIALQUANTITY: state.pageList[k].MATERIALQUANTITY, 
    });
  }
  BpelEvent(state.changeParams2)
    .then((res: any) => {
      if(res.success){
        alert("拆分成功！")
      } 
    })
    .catch(() => {});

}
function resetQuery() {
  queryFormRef.value.resetFields();
  handleQuery();
}
function showCurrentTime() {
  let date = new Date();
  state.currentTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":" + (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
}

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