<template>
    <div class="ProductBadHead-container">
        <el-card shadow="hover"
            :body-style="{ padding: '20px 20px 16px 10px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
            <el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true"
                label-width="auto" style="flex: 1 1 0%" @submit.prevent="handleQuery">
                <el-row :gutter="10">
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" >
                        <el-form-item label="产品编码" prop="productCode">
                            <el-input v-model="state.queryParams.productCode" placeholder="请输入产品编码" clearable
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5">
						<el-form-item label="生成日期" prop="createDate">
							<el-date-picker type="daterange" v-model="state.queryParams.createDateRange"  value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" />
						</el-form-item>
					</el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI" clearable @keyup.enter.native="handleQuery" >
                        <el-form-item label="产品名称" prop="productName">
                            <el-input v-model="state.queryParams.productName" placeholder="请输入产品名称" clearable
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI" clearable @keyup.enter.native="handleQuery" >
                        <el-form-item label="产品ERP编码" prop="materialNo">
                            <el-input v-model="state.queryParams.materialNo" placeholder="请输入产品ERP编码" clearable
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-if="state.showAdvanceQueryUI" clearable @keyup.enter.native="handleQuery" >
                        <el-form-item label="规格型号" prop="specs">
                            <el-input v-model="state.queryParams.specs" placeholder="请输入规格型号" clearable
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <el-divider style="height: calc(100% - 5px); margin: 0 10px" direction="vertical" />

            <el-row>
                <el-col>
                    <el-button-group>
                        <el-button type="primary" icon="ele-Search" @click="handleQuery"
                             :loading="options.loading"> 查询 </el-button>
                        <el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
                        <el-button icon="ele-ZoomIn" @click="changeAdvanceQueryUI" v-if="!state.showAdvanceQueryUI"
                            style="margin-left: 5px"> 高级查询 </el-button>
                        <el-button icon="ele-ZoomOut" @click="changeAdvanceQueryUI" v-if="state.showAdvanceQueryUI"
                            style="margin-left: 5px"> 隐藏 </el-button>
                    </el-button-group>
                </el-col>
            </el-row>
        </el-card>

        <el-card class="full-table" shadow="hover" style="margin-top: 5px">
            <vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
                <template #toolbar_buttons>
                </template>
                <template #toolbar_tools> </template>
                <template #empty>
                    <el-empty :image-size="200" />
                </template>
                <template #expand_content="{ row }">
                    <div style="padding: 12px">
                        <el-tabs :model-value="'item'">
                            <el-tab-pane label="零件批次列表" name="item"></el-tab-pane>
                        </el-tabs>
                        <vxe-grid :ref="(el: any) => (xGridPart[row.id] = el)" class="xGrid-style" v-bind="optionsPart"
                            v-on="gridEventsPart">
                            <template #toolbar_buttons>

                            </template>
                            <template #toolbar_tools> </template>
                            <template #empty>
                                <el-empty :image-size="200" />
                            </template>
                           
                        </vxe-grid>
                    </div>
                </template>
            </vxe-grid>
        </el-card>

        <PrintDialog ref="printDialogRef" :title="state.title" @reloadTable="handleQuery" />
    </div>
</template>

<script lang="ts" setup name="workOrderDY">
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';

import { VxeGridInstance, VxeGridListeners, VxeGridPropTypes } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Local } from '/@/utils/storage';

import { formatDate } from '/@/utils/formatTime';

// 子窗口
import PrintDialog from '/@/views/system/print/component/hiprint/preview.vue';

//import { ProductBatchWorking, PartBatchWorking } from '/@/api/mes/report';
import { ProductBadHead, ProductBadDetial } from '/@/api/simple/mesVirtualPackLog';
// 子窗口对象
const xGrid = ref<VxeGridInstance>();
const printDialogRef = ref<InstanceType<typeof PrintDialog>>();
const xGridPart = ref<Record<string, VxeGridInstance | undefined>>({});
// 变量
const state = reactive({
    showAdvanceQueryUI: false,
    queryParams: {
        searchKey: undefined,
        productCode: undefined,
        productName: undefined,
        materialNo: undefined,
        specs: undefined,
        createDate:undefined,
    },
    localPageParam: {
        pageSize: 50 as number,
        defaultSort: { field: 'productCode', order: 'desc', descStr: 'desc' },
    },
    visible: false,
    title: '',
});

// 本地存储参数
const localPageParamKey = 'localPageParam:ProductBadHead';

// 改变高级查询的控件显示状态
const changeAdvanceQueryUI = () => {
    state.showAdvanceQueryUI = !state.showAdvanceQueryUI;
};


// 表格参数配置
const options = useVxeTable<any>(
    {
        id: 'MesProducePlan',
        name: '产品零件',
        columns: [
            { type: 'expand', width: 80, slots: { content: 'expand_content' } },
            { type: 'seq', title: '序号', width: 60 },
            { field: 'productCode', title: '产品编码', minWidth: 110, showOverflow: 'tooltip', sortable: false },
            { field: 'productName', title: '产品名称', minWidth: 110, showOverflow: 'tooltip', sortable: false },
            { field: 'materialNo', title: '产品ERP编码', minWidth: 160, showOverflow: 'tooltip', sortable: false },
            { field: 'partCode', title: '零件编码', minWidth: 160, showOverflow: 'tooltip', sortable: false },
            { field: 'partName', title: '零件名称', minWidth: 160, showOverflow: 'tooltip', sortable: false },
            { field: 'specs', title: '规格', minWidth: 150, showOverflow: 'tooltip', sortable: false },
            { field: 'sumNumber', title: '总数量', width: 100, showOverflow: 'tooltip', sortable: false },
            { field: 'num1', title: '合格总数量', width: 100, showOverflow: 'tooltip', sortable: false },
            { field: 'num2', title: '报废总数量', width: 100, showOverflow: 'tooltip', sortable: false },
            { field: 'num3', title: '社投总数量', width: 100, showOverflow: 'tooltip', sortable: false },
            { field: 'num4', title: '专卖总数量', width: 100, showOverflow: 'tooltip', sortable: false },
            { field: 'num5', title: '返修总数量', width: 100, showOverflow: 'tooltip', sortable: false },
        ],
    },
    // vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
    {
        // 代理配置
        proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
        // 排序配置
        sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
        // 分页配置
        pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
        // 工具栏配置
        toolbarConfig: { export: false ,enabled:false },
        // 行设置
        // rowConfig: { height: 80 },
    }
);
const optionsPart = useVxeTable<any>(
    {
        id: 'MesProducePlan',
        name: '零件批次',
        columns: [
            //{ type: 'expand', width: 80, slots: { content: 'expand_content' } },
            { type: 'seq', title: '序号', width: 60 },
            { field: 'partCode', title: '零部件编码', width: 160, showOverflow: 'tooltip', sortable: false },
            { field: 'partName', title: '零部件名称', width: 160,showOverflow: 'tooltip', sortable: false },
            { field: 'batch', title: '生产批次',width: 210, showOverflow: 'tooltip', sortable: false },
            { field: 'planNum', title: '批次数量', width: 100, showOverflow: 'tooltip', sortable: false },
            { field: 'num1', title: '合格数量', width: 100, showOverflow: 'tooltip', sortable: false },
            { field: 'num2', title: '报废数量', width: 100, showOverflow: 'tooltip', sortable: false },
            { field: 'scrap', title: '报废率',width: 100,  showOverflow: 'tooltip', sortable: false },
            { field: 'num3', title: '社投数量', width: 100, showOverflow: 'tooltip', sortable: false },
            { field: 'num4', title: '专卖数量', width: 100, showOverflow: 'tooltip', sortable: false },
            { field: 'num5', title: '返修数量', width: 100, showOverflow: 'tooltip', sortable: false },
            { field: 'createTime', title: '创建时间',width: 130,  showOverflow: 'tooltip', sortable: false },
        ],
    },
    // vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
    {
        height: '400px',
        // 代理配置
        proxyConfig: { autoLoad: true, ajax: { query: ({ sort }) => handleQueryApi(sort) } },
        // 排序配置
        sortConfig: { defaultSort: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
        // 分页配置
        pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
        // 工具栏配置
        toolbarConfig: { export: false ,enabled:false },
        // 行设置
        // rowConfig: { height: 80 },
    }
);


// 页面初始化
onMounted(() => { 
    const start = new Date().getFullYear()+"-"+('0' + (new Date().getMonth() + 1)).slice(-2)+"-01 00:00:00";//开始时间
    const end = new Date().getFullYear()+"-"+('0' + (new Date().getMonth() + 1)).slice(-2)+"-"+new Date().getDate().toString().padStart(2, '0')+" 23:59:59";//结束时间
	state.queryParams.createDateRange=[start, end];
    //console.log(state.queryParams.createDateRange);
});

// 查询api
const handleQueryApi = async (page: VxeGridPropTypes.ProxyAjaxQueryPageParams, sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
    // if (pCode.value != 'all') state.queryParams.processCode = pCode.value;
    const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: 'desc' }) as any;
    return ProductBadHead(params);
};

// 查询操作
const handleQuery = async (reset = false) => {
    options.loading = true;
    await xGrid.value?.commitProxy('query');
    console.log(xGrid.value);
    options.loading = false;
};

// 重置操作
const resetQuery = async () => {
    (state.queryParams.searchKey = undefined),
        (state.queryParams.productCode = undefined),
        (state.queryParams.productName = undefined),
        (state.queryParams.materialNo = undefined),
        (state.queryParams.specs = undefined),
        await xGrid.value?.commitProxy('reload');
};


// 打开打印页面
const handlePrint = async (row: any) => {
    state.title = '打印生产工单';
};



// 表格事件
const gridEvents: VxeGridListeners<any> = {
    async toggleRowExpand({ row, column }) {
        optionsPart.loading = true;
        console.log(state.queryParams.createDateRange[0]);
        const result = await ProductBadDetial({
            createDateBegen: state.queryParams.createDateRange[0],
            createDateEnd: state.queryParams.createDateRange[1],
            partCode: row.partCode
        });
        xGridPart.value[String(row.id)]?.loadData(result.data.result.items);
        optionsPart.loading = false;
    },
    // 只对 pager-config 配置时有效，分页发生改变时会触发该事件
    async pageChange({ pageSize }) {
        state.localPageParam.pageSize = pageSize;
        Local.set(localPageParamKey, state.localPageParam);
    },
    // 当排序条件发生变化时会触发该事件
    async sortChange({ field, order }) {
        state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
        Local.set(localPageParamKey, state.localPageParam);
    },
};
const gridEventsPart: VxeGridListeners<any> = {
    // 只对 pager-config 配置时有效，分页发生改变时会触发该事件
    async pageChange({ pageSize }) {
        state.localPageParam.pageSize = pageSize;
        Local.set(localPageParamKey, state.localPageParam);
    },
    // 当排序条件发生变化时会触发该事件
    async sortChange({ field, order }) {
        state.localPageParam.defaultSort = { field: field, order: order!, descStr: 'desc' };
        Local.set(localPageParamKey, state.localPageParam);
    },
};
</script>

<style lang="scss" scoped>
:deep(.el-input),
:deep(.el-select),
:deep(.el-input-number) {
    width: 100%;
}
</style>
