<!--
  功能：功能描述  出入库报表
  作者：陶庆峰
-->
<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="UNDOID">
                            <el-select multiple filterable v-model="queryParams.RECEIVEREQUESTNAMETYPE" placeholder="选择单据类型"
                                style="width: 240px" default-first-option>
                                <el-option v-for="item in state.ReceiveList" :key="item.VALUE" :label="item.LABEL"
                                    :value="item.VALUE" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="物料号" prop="MATERIALSPECNAME">
                            <el-Input v-model="queryParams.MATERIALSPECNAME" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="库位状态" prop="STOCKSTATE">
                            <el-Input v-model="queryParams.STOCKSTATE" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="仓库编码" prop="ERPLOCATION" label-width="65px">
                            <el-Input v-model="queryParams.ERPLOCATION" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="到货单号" prop="RECEIVEREQUESTNAME">
                            <el-Input v-model="queryParams.RECEIVEREQUESTNAME" clearable />
                        </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-row :gutter="24" class="form-row">
                    <el-col :span="4">
                        <el-form-item label="批次" prop="CHARGE">
                            <el-Input v-model="queryParams.CHARGE" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="开始时间" prop="FROMDATE">
                            <el-date-picker v-model="queryParams.FROMDATE" value-format="YYYY/MM/DD HH:mm:ss" type="datetime"
                                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="YYYY/MM/DD HH:mm:ss" type="datetime"
                                placeholder="Pick a day" />
                        </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">
            <div class="page-table-operate">
                <div class="page-table-title">
                    <div class="page-table-title-left">
                        <span>标签信息</span>
                    </div>
                </div>
                <div class="page-table-operateBtns">
                    <el-popover :persistent="false" placement="right" popper-class="config-table-wrap" trigger="click">
                        <template #reference>
                            <el-button class="operateBtns-setting">
                                <svg-icon icon-class="table_title" width="16px" height="16px" />
                            </el-button>
                        </template>
                        <ConfigTable :list="materialTableConfig.column" @updateList="updateList" />
                    </el-popover>
                </div>
            </div>
            <el-table border v-loading="loading" :data="list" highlight-current-row row-key="id"  show-summary style="width: 100%" :height="tableHeight">
                <el-table-column
                        type="index"
                        width="50"
                        label="序号"
                >
                </el-table-column>
                <template v-for="(col, index) in materialTableConfig.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>
                <el-row :gutter="24">
                    <el-col :span="5">
                        <el-form-item label="标签数量" >
                            <el-Input v-model="state.AllNumber" placeholder="标签数量总和" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="物料总和"  >
                            <el-Input v-model="state.UnitNumber" placeholder="标签数量总和"  autosize clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </div>

    </div>
</template>
<script lang="ts">
export default {
  name: "StockTransaction"
};
</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(155);
const { proxy }: any = getCurrentInstance();
const queryFormRef = ref(ElForm);
const materialTableConfig = ref({
    loading: false,
    column: [] as any,
    data: [],
})
const state = reactive({
    ERPFACTORY: '',
    AllNumber: 0,//标签总数量
    UnitNumber: 0,//各单位数量
    radio1: '出库',
    CHARGE: '',
    ReceiveList: [{ value: '', label: '' }, { value: '45', label: 'DH 到货单入库' }, { value: 'SC46', label: 'AC 生产入库' }, { value: 'ZK4A', label: 'SA 转库入库' },
    { value: '4C', label: 'DN 销售出库' }, { value: '4E', label: '4E 其他出库' }, { value: '4Y', label: 'TF 调拨出库' }
    ] as any,
    queryParams: {
        MATERIALSPECNAME: '',
        RECEIVEREQUESTNAMETYPE: '',
        UNDOID: '',
        STOCKSTATE: '',
        ERPLOCATION: '',
        FROMDATE: '',
        TODATE: '',
        CHARGE: '',
        SITENAME: '',
        ERPFACTORY: '',
        SHIPREQUESTNAME: '',
        RECEIVEREQUESTNAME: '',
        REQUESTNAME: '',
    },
    page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
    },

    loading: false,
    list: [],
    column: [] as any,
});

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

onMounted(() => {
    materialTableConfig.value.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: "MAKEDATE", hide: false, width: '150px' },
        // { header: "标签类型", field: "MATERIALPACKINGTYPE", hide: false },
        { header: "品质等级", field: "PACKINGGRADE", hide: false, width: '100px'  },
        { header: "到货单号", field: "RECEIVEREQUESTNAME", hide: false, width: '100px'  },
        { header: "出库单号", field: "SHIPREQUESTNAME", hide: false, width: '100px'  },
        // { header: "入库单", field: "RECEIVEACTNO", hide: false, width: '100px'  },
        { header: "最后操作时间", field: "LASTEVENTTIME", hide: false , width: '150px' },
        { header: "最后操作人员", field: "LASTEVENTUSER", hide: false, width: '120px' },
        { header: "供应商名称", field: "SUPPLIERNAME", hide: false , width: '120px'},
        { header: "客户", field: "CUSTOMERNAME", hide: false, width: '120px' },
        // { header: "关联客户", field: "", hide: false },
        { header: "最后操作名称", field: "DESCRIPTION", hide: false, width: '120px' },
        // { header: "SDK规格", field: "SPECNAME", hide: false },
        { header: "操作备注", field: "OPTREMARK", hide: false },
    ]
    getPRINTLIST()
    handleQuery()
     updateTableHeight();
    window.addEventListener('resize', handleResize);

    let orgNo: any = localStorage.getItem('orgNo');
  // state.orgNo = JSON.parse(pwd).orgNo;
  state.ERPFACTORY = JSON.parse(orgNo);
  console.log(11111111111,state.ERPFACTORY)
});
const updateList = (col: any) => {
    materialTableConfig.value.column = col
}

function getPRINTLIST() {
    getQueryList({
        queryId: "getInvoiceLIST",
        version: "00001",
        params: {
        },
    }).then((res: any) => {
        state.ReceiveList = res.data
    })
}
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.list = [];
    state.page.total = 0;
    let loactionString = ''
    for (let i = 0; i < state.queryParams.RECEIVEREQUESTNAMETYPE.length; i++) {
        loactionString = loactionString + state.queryParams.RECEIVEREQUESTNAMETYPE[i] + ','
    }
    state.loading = true
    queryFormRef.value.validate((isValid: boolean) => {
        if (isValid) {
            getQueryPageList({
                queryId: "GetMaterialBoxInformationRow",
                version: "WEB0004",
                params: {
                    userId: localStorage.getItem('userId'),
                    // ...state.queryParams
                    MATERIALSPECNAME: state.queryParams.MATERIALSPECNAME ? state.queryParams.MATERIALSPECNAME.split(',') : '',
                    UNDOID: state.queryParams.UNDOID,
                    STOCKSTATE: state.queryParams.STOCKSTATE,
                    ERPLOCATION: state.queryParams.ERPLOCATION,
                    FROMDATE: state.queryParams.FROMDATE,
                    TODATE: state.queryParams.TODATE,
                    SITENAME: '',
                    ERPFACTORY: state.ERPFACTORY,
                    CHARGE: state.queryParams.CHARGE,
                    RECEIVEREQUESTNAMETYPE: loactionString,
                    // CHARGE: state.CHARGE,
                    RECEIVEREQUESTNAME: state.queryParams.RECEIVEREQUESTNAME,
                    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.AllNumber = 0
                    state.UnitNumber = 0
                    getQueryList({
                        queryId: "GetMaterialBoxInformationRow",
                        version: "WEB00041",
                        params: {
                            userId: localStorage.getItem('userId'),
                            // ...state.queryParams
                            MATERIALSPECNAME: state.queryParams.MATERIALSPECNAME ? state.queryParams.MATERIALSPECNAME.split(',') : '',
                            UNDOID: state.queryParams.UNDOID,
                            STOCKSTATE: state.queryParams.STOCKSTATE,
                            ERPLOCATION: state.queryParams.ERPLOCATION,
                            FROMDATE: state.queryParams.FROMDATE,
                            TODATE: state.queryParams.TODATE,
                            SITENAME: '',
                            ERPFACTORY: '',
                            CHARGE: state.queryParams.CHARGE,
                            RECEIVEREQUESTNAMETYPE: loactionString,
                            // CHARGE: state.CHARGE,
                            RECEIVEREQUESTNAME: state.queryParams.RECEIVEREQUESTNAME,
                            SHIPREQUESTNAME: state.queryParams.SHIPREQUESTNAME,
                        },
                    })
                        .then((res: any) => {
                            for (let i = 0; i < res.data.length; i++) {
                                let number = res.data[i].PACKINGNUMBER == null ? 0 : res.data[i].PACKINGNUMBER
                                let Qty = res.data[i].UNITNUMBER == null ? 0 : res.data[i].UNITNUMBER
                                state.AllNumber = state.AllNumber + parseFloat(number)
                                state.UnitNumber = state.UnitNumber + Qty
                            }

                        })
                state.loading = false
              }
            });
        }
    });
}

function exportExcel() {
    Object.keys(state.queryParams).forEach((key) => {
        if (state.queryParams[key] && state.queryParams[key].length === 0) {
            state.queryParams[key] = ''
        }
    });
    let loactionString = ''
    for (let i = 0; i < state.queryParams.RECEIVEREQUESTNAMETYPE.length; i++) {
        loactionString = loactionString + state.queryParams.RECEIVEREQUESTNAMETYPE[i] + ','
    }
    state.loading = true
    getQueryList({
        queryId: "GetMaterialBoxInformationRow",
        version: "00022",
        params: {
            userId: localStorage.getItem('userId'),
            // ...state.queryParams
            MATERIALSPECNAME: state.queryParams.MATERIALSPECNAME ? state.queryParams.MATERIALSPECNAME.split(',') : '',
            UNDOID: state.queryParams.UNDOID,
            STOCKSTATE: state.queryParams.STOCKSTATE,
            ERPLOCATION: state.queryParams.ERPLOCATION,
            FROMDATE: state.queryParams.FROMDATE,
            TODATE: state.queryParams.TODATE,
            SITENAME: '',
            ERPFACTORY: '',
            CHARGE: state.queryParams.CHARGE,
            RECEIVEREQUESTNAMETYPE: loactionString,
            // CHARGE: state.CHARGE,
            RECEIVEREQUESTNAME: state.queryParams.RECEIVEREQUESTNAME,
            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('当前查询没有数据可以导出');
        }
    });
}

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>