<!--非先进先出看板-->
<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="FROMDATE">
                            <el-date-picker v-model="queryParams.FROMDATE" value-format="YYYYMMDD" type="date"
                                            placeholder="Pick a day" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="结束时间" prop="TODATE">
                            <el-date-picker v-model="queryParams.TODATE" value-format="YYYYMMDD" type="date"
                                            placeholder="Pick a day" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="出库单号" prop="SHIPREQUESTNAME">
                            <el-Input v-model="queryParams.SHIPREQUESTNAME" 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 type="primary" @click="exportExcel">导出</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"  show-summary style="width: 100%" :height="tableHeight"  @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <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: "UnFIFO"
    };
</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 exportDataToExcel from '@/utils/export-excel';
    import { bTableHeight } from "../../../../composables/calcTableHeight";

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

    const state = reactive({
        queryParams: {
            FROMDATE: '',
            TODATE: '',
            SHIPREQUESTNAME : ''
        },
        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: "MATERIALPACKINGNAME", hide: false, width: '320px' },
            { header: "批次", field: "CHARGE", hide: false, width: '200px' },
            { header: "组织", field: "ERPFACTORYDESC", hide: false, width: '250px' },
            { header: "仓库", field: "LOCATIONDESC", hide: false, width: '200px' },
            { header: "物料", field: "MATERIALSPECNAME", hide: false , width: '100px'},
            { header: "数量", field: "MATERIALQUANTITY", hide: false, width: '100px' },
            { header: "物料凭证", field: "UNDOID", hide: false, width: '120px' },
            { header: "凭证日期", field: "UNDODATE", hide: false, width: '100px' },
            { header: "制造日期", field: "MAKEDATE", hide: false, width: '150px' },
            { header: "品质等级", field: "PACKINGGRADE", hide: false, width: '100px'  },
            { header: "出库单号", field: "SHIPREQUESTNAME", hide: false, width: '100px'  },
            { header: "先进先出标识", field: "FIFOFLAG", hide: false, width: '100px'  },
            { header: "先进先出原因", field: "FIFOREASON", hide: false, width: '300px'  },
            { header: "最后操作时间", field: "LASTEVENTTIME", hide: false , width: '150px' },
            { header: "最后操作人员", field: "LASTEVENTUSER", hide: false, width: '120px' },
        ]
        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: "GetFIFOStockOutList",
                    version: "00001",
                    params: {
                        userId: localStorage.getItem('userId'),
                        FROMDATE: state.queryParams.FROMDATE,
                        TODATE: state.queryParams.TODATE,
                        ERPFACTORY: '',
                        SHIPREQUESTNAME : state.queryParams.SHIPREQUESTNAME
                    },
                    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
                    }
                });
            }
        });
    }

    function exportExcel() {
        Object.keys(state.queryParams).forEach((key) => {
            if (state.queryParams[key] && state.queryParams[key].length === 0) {
                state.queryParams[key] = ''
            }
        });
        state.loading = true
        getQueryList({
            queryId: "GetFIFOStockOutList",
            version: "00002",
            params: {
                userId: localStorage.getItem('userId'),
                FROMDATE: state.queryParams.FROMDATE,
                TODATE: state.queryParams.TODATE,
                SHIPREQUESTNAME : state.queryParams.SHIPREQUESTNAME
            }
        }).then((res: any) => {
            if (res.data.length > 0) {
                state.loading = false
                exportDataToExcel(res.data, '非先进先出报表')
            } else {
                state.loading = false
                proxy.$ElMessage.warning('当前查询没有数据可以导出');
            }
        });
    }

    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>