<template>
    <div class="partProcessWorking-container">

        <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>
                    <!--					<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'mesProduceWorkOrder/add'"> 新增 </el-button>-->
                </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) => (xGridProcess[row.id] = el)" class="xGrid-style"
                            v-bind="optionsProcess">
                            <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="partProcessWorking">
import { onMounted, reactive, ref } from 'vue';

import { VxeGridProps, 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 ModifyRecord from '/@/components/table/modifyRecord.vue';
import { PartProcessWorking, ProcessWorking } from '/@/api/mes/report';

// 子窗口对象
const xGrid = ref<VxeGridInstance>();
//const xGridProcess=ref<VxeGridProps>();
const printDialogRef = ref<InstanceType<typeof PrintDialog>>();
const xGridProcess = ref<Record<string, VxeGridInstance | undefined>>({});
// 变量
const state = reactive({
    showAdvanceQueryUI: false,
    queryParams: {
        producePlanNo: undefined,
        productCode: undefined,
    },
    localPageParam: {
        pageSize: 50 as number,
        defaultSort: { field: 'id', order: 'desc', descStr: 'desc' },
    },
    visible: false,
    title: '',
});

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


// 不同的工序展示不同的列
var props = defineProps({
    pCode: {
        type: String,
        default: '',
    },
    producePlanNo: {
        type: String,
        default: '',
    },
    productCode: {
        type: String,
        default: '',
    },
});

// 表格参数配置
const options = useVxeTable<any>(
    {
        id: 'PartProcessWorking',
        name: '零部件工序',
        columns: [
            { type: 'expand', width: 80, slots: { content: 'expand_content' } },
            { field: 'partCode', title: '零部件编码', width: 160, showOverflow: 'tooltip', sortable: false },
            { field: 'partName', title: '零部件名称', showOverflow: 'tooltip', sortable: false },
            { field: 'num7', title: '在制数量', width: 140, showOverflow: 'tooltip', sortable: false },
            { field: 'num1', title: '合格数量', width: 140, showOverflow: 'tooltip', sortable: false },
            { field: 'num4', title: '社投数量', width: 140, showOverflow: 'tooltip', sortable: false },
            { field: 'num5', title: '专卖数量', width: 140, showOverflow: 'tooltip', sortable: false },
            { field: 'num3', title: '返修数量', width: 140, showOverflow: 'tooltip', sortable: false },
            { field: 'num2', title: '报废数量', width: 140, 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 },
    }
);

const optionsProcess = useVxeTable<any>(
    {
        id: 'ProcessWorking',
        name: '工序',
        columns: [
            { field: 'processCode', title: '工序编码', width: 160, showOverflow: 'tooltip', sortable: false },
            { field: 'processName', title: '工序名称', showOverflow: 'tooltip', sortable: false },
            { field: 'num7', title: '在制数量', width: 140, showOverflow: 'tooltip', sortable: false },
            { field: 'num1', title: '合格数量', width: 140, showOverflow: 'tooltip', sortable: false },
            { field: 'num4', title: '社投数量', width: 140, showOverflow: 'tooltip', sortable: false },
            { field: 'num5', title: '专卖数量', width: 140, showOverflow: 'tooltip', sortable: false },
            { field: 'num3', title: '返修数量', width: 140, showOverflow: 'tooltip', sortable: false },
            { field: 'num2', title: '报废数量', width: 140, showOverflow: 'tooltip', sortable: false },
        ],

    },
    // vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
    {
        height: '400px',
        // 代理配置
        proxyConfig: { autoLoad: false },
        // 排序配置
        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(() => { });

// 查询api
const handleQueryApi = async (sort: VxeGridPropTypes.ProxyAjaxQuerySortCheckedParams) => {
    const params = Object.assign(state.queryParams) as any;
    params.producePlanNo = props.producePlanNo
    params.ProductCode = props.productCode
    return (await PartProcessWorking(params));
};

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

const processList = ref<any[]>([]);
//工序查询
const processData = async (producePlanNo: string = '', productCode: string = '') => {
    const result = await ProcessWorking({ producePlanNo, productCode });
    return result.data.result;
};
// 重置操作
const resetQuery = async () => {
    (state.queryParams.producePlanNo = undefined),
        (state.queryParams.productCode = undefined),
        await xGrid.value?.commitProxy('reload');
};

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

// 表格事件
const gridEvents: VxeGridListeners<any> = {
    async toggleRowExpand({ row, column }) {
        optionsProcess.loading = true;
        const result = await ProcessWorking({
            partCode: row.partCode,
        });
        xGridProcess.value[String(row.id)]?.loadData(result.data.result);
        optionsProcess.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);
    },
};
</script>

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