<template>
    <div class="process-monitoring-page">
        <a-spin :spinning="spinning" tip="请稍后...">
            <a-tabs tab-position="top" v-model:activeKey="activeKey" type="card">
                <a-tab-pane :key="1" :tab="'表单信息'" force-render>
                </a-tab-pane>
                <a-tab-pane :key="2" :tab="'流程信息'">
                </a-tab-pane>
                <a-tab-pane :key="3" :tab="'流转记录'" style="overflow: auto">
                </a-tab-pane>
                <!-- <a-tab-pane :key="4" :tab="'附件汇总'">
                    <SummaryOfAttachments :processId="processId"/>
                </a-tab-pane> -->
                <a-tab-pane :key="5" :tab="'流程变更记录'">
                </a-tab-pane>
                <a-tab-pane :key="6" :tab="'审批记录'">
                </a-tab-pane>
                <a-tab-pane :key="7" :tab="'流程变量'">
                </a-tab-pane>
                <!-- <a-tab-pane :key="8 + index" v-for="(item, index) in predecessorTasks" :tab="item.schemaName">
                <LookRelationTask
                    v-show="activeKey === 8 + index"
                    :taskId="item.taskId"
                    :processId="item.processId"
                    position="left"
                />
                </a-tab-pane> -->
            </a-tabs>
            <div class="tab-content" v-if="dataComplete">
                <processMonitoringFlowPage :data="data" :flowData="flowData" v-show="activeKey == '1'"></processMonitoringFlowPage>
                <ProcessInformationWithInfo :process-id="processId" :data="data" :flowData="flowData" v-if="activeKey == '2'" :canClick="true" :key="ProcessInformationKey"/>
                <FlowRecord :list="data.taskRecords" :processId="processId" v-show="activeKey == '3'"/>
                <ChangeRecord v-if="activeKey == 5" :processId="processId" :formDataId="data.formInfos[0].formData.id" :formInfos="data.formInfos" />
                <AuditRecord :processId="processId" :schemaId="schemaId" :xml="xml" v-show="activeKey == '6'"/>
                <ProcVarPage :processId="processId" :schemaId="schemaId" :xml="xml" v-show="activeKey == '7'"/>
            </div>
            

        </a-spin>
    </div>
</template>

<script setup lang="ts">
    import { ref, onMounted, unref, provide } from 'vue';

    import FlowRecord from '/@/views/workflow/task/components/flow/FlowRecord.vue';
    import ProcessInformationWithInfo from '/@/views/workflow/task/components/flow/ProcessInformationWithInfo.vue';
    import SummaryOfAttachments from '/@/views/workflow/task/components/flow/SummaryOfAttachments.vue';
    import LookRelationTask from '/@/views/workflow/task/components/flow/LookRelationTask.vue';
    import { SchemaTaskItem } from '/@/model/workflow/bpmnConfig';
    import ChangeRecord from '/@/views/formChange/formChangeLog/index.vue';
    import AuditRecord from '/@/views/auditOpt/auditRecord/index.vue';
    import processMonitoringFlowPage from './processMonitoringFlowPage.vue'
    // import ProcVarPage from '/@/views/editProVar/procVarManage/index.vue';
    import { getApprovalProcess } from '/@/api/workflow/task';
    import { Modal } from 'ant-design-vue';


    import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
    const { data, initProcessData } = userTaskItem();
    
    import { useRouter } from 'vue-router';
    const router = useRouter();
    const currentRoute = router.currentRoute.value;
    const fullPath = currentRoute.fullPath;
    const rQuery = currentRoute.query;
    const rParams = currentRoute.params;
    const schemaId = ref(rParams.arg1);
    const processId = ref(rParams.arg2);
    const ProcessInformationKey = ref(0)

    const spinning = ref(false);
    const dataComplete = ref(false);

    const flowInfo = ref({
        schemaId: schemaId.value,
        processId: processId.value
    })
    const flowData = ref({})
    provide('flowInfo', flowInfo)
    provide('refreshApproveInfo', getApproveInfo)


    const activeKey = ref(1);

    onMounted(async () => {
        await getApproveInfo()
    });
    async function getApproveInfo() {
        try {
            spinning.value = true
            let res = await getApprovalProcess('', unref(processId.value));
            initProcessData(res);
            flowData.value = res
            spinning.value = false
            dataComplete.value = true
            ProcessInformationKey.value++
        } catch (error) {
            console.error('processMonitoringPage Error', error)
        }
    }
</script>
<style lang="less" scoped>
.process-monitoring-page {
    height: 100%;
    width: 100%;
    :deep(.ant-spin-nested-loading) {
        height: 100%;
        width: 100%;
        display: flex;
        .ant-spin-container {
            height: 100%;
            display: flex;
            flex-direction: column;
            flex: 1;
            padding: 20px;
            .ant-tabs-nav {
                margin: 0;
            }
            .top-toolbar {
                display: flex;
                border-bottom: none;
                padding: 16px 0;
            }
            .tab-content {
                flex: 1;
                min-height: 0;
                overflow: auto;
                box-sizing: border-box;
                display: flex;
                .process-information-with-info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    .flow-record-box {
                        flex: 1;
                    }
                }
            }
        }
    }
}

</style>
