<!--非先进先出看板-->
<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" label-width="60px" label-position="left">
                <el-row :gutter="24" class="form-row">
                    <el-col :span="4">
                        <el-form-item label="托盘号" prop="PALLETNO">
                            <el-Input v-model="queryParams.PALLETNO" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="批次" prop="CHARGE">
                            <el-Input v-model="queryParams.CHARGE" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="page-search-btns">
                <el-button type="primary" @click="handleQueryInfo">搜索</el-button>
                <el-button @click="resetQuery">重置</el-button>
            </div>
        </el-row>
        <div class="vue-element-page-table">
            <el-table border v-loading="loading" :data="list" highlight-current-row row-key="id" style="width: 100%" :height="tableHeight">
                <template v-for="(col, index) in column" :key="index">
                    <el-table-column v-if="!col.hide" :label="col.header" :width="col.width" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row[col.field] }}</span>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
            <pagination v-if="page.total" :total="page.total" v-model:pageNumTo="page.pageNum"
                        v-model:pageSizeTo="page.pageSize" @pagination="handleQuery" />
        </div>
    </div>
</template>
<script lang="ts">
    export default {
        name: "Palletizing"
    };
</script>
<script lang="ts" setup>
    import { reactive, ref, onMounted, toRefs, getCurrentInstance } from "vue";
    import { ElForm, ElMessageBox, ElTable } from 'element-plus';
    import { getQueryPageList, getQueryList } from '@/api/common';
    import { bTableHeight } from "../../../../composables/calcTableHeight";

const { tableContainer, tableHeight, updateTableHeight, handleResize } = bTableHeight(130);
    const { proxy }: any = getCurrentInstance();
    const queryFormRef = ref(ElForm);

    const state = reactive({
        queryParams: {
            PALLETNO: "",
            CHARGE: ""
        },
        page: {
            pageNum: 1,
            pageSize: 10,
            total: 0
        },
        loading: false,
        list: [],
        column: [] as any,
        multipleSelection : [] as any,
    });

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

    onMounted(() => {
        state.column = [
            { header: "托盘", field: "PALLETNO", hide: false,},
            { header: "标签编号", field: "MATERIALPACKINGNAME", hide: false,},
            { header: "批次", field: "CHARGE", hide: false, },
            { header: "修改时间", field: "UNBINDDATE", hide: false ,  },
            { header: "修改人", field: "UNBINDUSERID", hide: false, },
            { header: "创建时间", field: "MAKEDATE", hide: false , },
            { header: "创建人", field: "USERID", hide: false, },
        ]
        handleQuery()
        updateTableHeight();
        window.addEventListener('resize', handleResize);
    });
    function handleQueryInfo() {
        state.page.pageNum = 1
        handleQuery()
    }
    function handleQuery() {
        Object.keys(state.queryParams).forEach((key) => {
            if (state.queryParams[key] && state.queryParams[key].length === 0) {
                state.queryParams[key] = ''
            }
        });
        state.loading = true
        
        queryFormRef.value.validate((isValid: boolean) => {
            if (isValid) {
                state.list = []
                getQueryPageList({
                    queryId: "GetPackingPalletizing",
                    version: "00001",
                    params: {
                        userId: localStorage.getItem('userId'),
                        CHARGE : state.queryParams.CHARGE,
                        PALLETNO : state.queryParams.PALLETNO,
                    },
                    pageNum: state.page.pageNum,
                    pageSize: state.page.pageSize,
                }).then((res: any) => {
                    if(res.data.list.length == 0){
                        ElMessageBox.alert('查无数据', '提醒框', {
                            confirmButtonText: 'OK',
                        })
                        state.loading = false
                    } else {
                        state.list = res.data.list;
                        state.page.total = res.data.total;
                        state.loading = false
                    }
                });
            }
        });
    }

    const handleSelectionChange = (val: any) => {
        state.multipleSelection = val;

    };

    function resetQuery() {
        queryFormRef.value.resetFields();
        handleQuery();
    }


</script>

<style scoped lang="scss">
    .form-row {
        padding-right: 100px;
        margin-bottom: 7px;
    }

    .form-row2 {
        padding-right: 30px;
        margin-bottom: 30px;
    }
</style>