<!--
  功能：功能描述  组托
  作者：陶庆峰
-->
<template>
    <div class="vue-element-page-wrap" ref="tableContainer">
        <el-row class="page-search" justify="space-between" align="bottom">
            <el-form ref="queryFormRef" :model="queryParams" :rules="rules" :inline="true" label-width="80px"
                label-position="left">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="Box ID" prop="MATERIALPACKINGNAME">
                            <el-Input v-model="queryParams.MATERIALPACKINGNAME" clearable
                                @keydown.enter="handleEnter" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="卷芯号" prop="DURABLENAME">
                            <el-Input v-model="queryParams.DURABLENAME" clearable @keydown.enter="handleEnter" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="page-search-btns">
                <el-button type="primary" @click="handleEnter">搜索</el-button>
                <el-button type="primary" @click="Palletizing">组托</el-button>
                <el-button @click="resetList">重置</el-button>
            </div>
        </el-row>
        <div class="vue-element-page-table">
            <!-- <div class="page-table-operate">
                <div class="page-table-title">
                    <div class="page-table-title-left">
                        <span>PanelListForPalletizing</span>
                    </div>
                </div>
            </div> -->
            <el-table border v-loading="loading" :data="list" 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>
            </el-table>
        </div>

    </div>
</template>

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

<script lang="ts" setup>
import { reactive, ref, onMounted, toRefs, getCurrentInstance } from "vue";
import { ElForm, ElMessageBox, ElTable } from "element-plus";
import { getQueryList, BpelEvent } from '@/api/common';

const queryFormRef = ref(ElForm);
const formDataRef = ref(ElForm);

const { proxy }: any = getCurrentInstance();


const state = reactive({
    queryParams: {
        MATERIALPACKINGNAME: '',
        DURABLENAME: '',
    },
    loading: false,
    list: [] as any,
    column: [] as any,
    rules: {
        // MATERIALPACKINGNAME: [{ required: true, message: "请输入盘点计划名", trigger: "blur" }],
        // DURABLENAME: [{ required: true, message: "请输入盘点计划名", trigger: "blur" }],
    },
});

const { loading, list, column, queryParams, rules } = toRefs(state)

onMounted(() => {
    state.column = [
        { header: "Box ID", field: "MATERIALPACKINGNAME", hide: false },
        { header: "库区", field: "AREANAME", hide: false },
        { header: "ERP工厂", field: "ERPFACTORY", hide: false },
        { header: "ERP库位", field: "ERPLOCATION", hide: false },
        { header: "最后操作名称", field: "LASTEVENTNAME", hide: false },
        { header: "最后操作时间", field: "LASTEVENTTIME", hide: false },
        { header: "物料编号", field: "MATERIALSPECNAME", hide: false }
    ]

});
/**
 * 扫码枪输入事件
 * */
function handleEnter() {
    if (!state.queryParams.MATERIALPACKINGNAME) return
    let param = {
        queryId: "GetDurable",
        version: "00003",
        params: {
            userId: localStorage.getItem('userId'),
            MATERIALPACKINGNAME: queryParams.value.MATERIALPACKINGNAME
        },
    }
    getQueryList(param).then((res) => {
        if (res.data.length > 0) {
            const flag = state.list.find(item => item.MATERIALPACKINGNAME === res.data[0].MATERIALPACKINGNAME);
            if (flag) return
            state.list.push(res.data[0])
        }
    })


}

/**
 * 组托
 * */
function Palletizing() {

    if (state.list.length < 1) {
        proxy.$ElMessage.warning('请先扫描箱号')
        return
    }
    if (!state.queryParams.DURABLENAME) {
        proxy.$ElMessage.warning('请输入托盘号')
        return
    }
    let boxList = state.list.map((item: any) => {
        return {
            "MATERIALPACKINGNAME": item.MATERIALPACKINGNAME,
        }
    })
    let query = {
        header: {
            MESSAGENAME: "AssignBoxByTray",
            LANGUAGE: "Chinese"
        },
        body: {
            BOXLIST: boxList,
            SITENAME: "SDK",
            DURABLENAME: state.queryParams.DURABLENAME
        }
    }

    BpelEvent(query).then((res: any) => {
        proxy.$ElMessage.success('组托成功')
        // 合并成功后清空数组
        state.list = []
        queryFormRef.value.resetFields()
    })

}

/**
 * 重置
 * */
function resetList() {
    state.list = []
    queryFormRef.value.resetFields()
}


</script>

<style scoped lang="scss"></style>