<template>
    <div class="page-bg-wrap">
        <div class="geg-flow-page">
            <div class="top-toolbar">
                <a-space :size="10" wrap>
                    <a-button style="margin-right: 10px">
                        <slot name="icon">
                            <close-outlined />
                        </slot>
                        关闭
                    </a-button>
                    <a-button type="primary" @click="onApproveClick">
                        <slot name="icon">
                            <check-circle-outlined />
                        </slot>
                        同意
                    </a-button>
                    <a-button @click="onDenyClick">
                        <slot name="icon">
                            <stop-outlined />
                        </slot>
                        拒绝
                    </a-button>
                    <a-dropdown>
                        <template #overlay>
                            <a-menu @click="onMoreClick">
                                <a-menu-item key="1">退回</a-menu-item>
                                <a-menu-item key="2">终止</a-menu-item>
                                <a-menu-item key="3">转办</a-menu-item>
                            </a-menu>
                        </template>
                        <a-button>
                            更多
                            <down-outlined />
                        </a-button>
                    </a-dropdown>
                </a-space>
            </div>
            <FormInformation
                :key="renderKey"
                ref="formInformation"
                :disabled="false"
                :formAssignmentData="data.formAssignmentData"
                :formInfos="data.formInfos"
                :opinions="data.opinions"
                :opinionsComponents="data.opinionsComponents"
                @get-form-configs="(config) => (formConfigs = config)"
            />
            <opinion-dialog ref="opinionDlg" />
        </div>
    </div>
</template>

<script setup>
    import { useRouter } from 'vue-router';
    import { onMounted, reactive, ref, unref } from 'vue';
    import FormInformation from '/@/views/secondDev/FormInformation.vue';
    import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
    import { getApprovalProcess } from '/@/api/workflow/task';
    import { ApproveCode, ApproveType } from '/@/enums/workflowEnum';
    import { CheckCircleOutlined, StopOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons-vue';
    import OpinionDialog from '/@/components/SecondDev/OpinionDialog.vue';

    const { data, initProcessData } = userTaskItem();

    const router = useRouter();
    const { currentRoute } = router;
    const rParams = currentRoute.value.query;
    //const schemaId = ref(rParams.schemaId);
    const taskId = ref(rParams.taskId);
    const processId = ref(rParams.processId);
    const renderKey = ref('');
    const formConfigs = ref();
    const opinionDlg = ref();

    let approvalData = reactive({
        isCountersign: false,
        isAddOrSubSign: false,
        stampInfo: {
            stampId: '',
            password: ''
        },
        buttonConfigs: [],
        approvedType: ApproveType.AGREE,
        approvedResult: ApproveCode.AGREE,
        approvedContent: '',
        rejectNodeActivityId: '',
        rejectNodeActivityIds: [],
        circulateConfigs: []
    });
    let approvedType = ref(ApproveType.AGREE);

    function onMoreClick() {}

    function onApproveClick() {
        opinionDlg.value.toggleDialog({
            action: 'approve'
        });
    }

    function onDenyClick() {
        opinionDlg.value.toggleDialog({
            action: 'deny'
        });
    }

    onMounted(async () => {
        if (unref(taskId)) {
            try {
                let res = await getApprovalProcess(unref(taskId), unref(processId));
                initProcessData(res);
                if (res.buttonConfigs) {
                    approvalData.buttonConfigs = res.buttonConfigs;
                }
                if (res.relationTasks) {
                    data.predecessorTasks = res.relationTasks;
                }
                if (res.isAddOrSubSign) {
                    approvalData.isAddOrSubSign = res.isAddOrSubSign;
                }

                approvalData.approvedType = ApproveType.AGREE;
                approvedType.value = ApproveType.AGREE;
                approvalData.approvedContent = '';
                approvalData.rejectNodeActivityId = '';
                approvalData.rejectNodeActivityIds = [];
                approvalData.circulateConfigs = [];

                renderKey.value = Math.random() + '';
            } catch (error) {}
        } else {
        }
    });
</script>
