<template>
    <BasicTable @register="registerTable" @row-dbClick="onRowDblClick"
                @selection-change="selectionChange">
        <template #toolbar>
            <BatchApprovalProcess
                v-if="showBatchApproval"
                :selectedRows="data.selectedRows"
                @close="BatchClearHandler"
            >
                <a-button v-auth="'processtasks:batchApproval'">{{ t('批量审批') }}</a-button>
            </BatchApprovalProcess>
            <ApprovalProcess
                v-else
                :processId="processId"
                :schemaId="schemaId"
                :taskId="taskId"
                :visible="false"
                @close="clearHandler"
            >
                <a-button v-auth="'processtasks:approve'">{{ t('审批') }}</a-button>
            </ApprovalProcess>
            <LookProcess :processId="processId" :taskId="taskId" @close="clearHandler">
                <a-button v-auth="'processtasks:view'">{{ t('查看') }}</a-button>
            </LookProcess>
        </template>

        <template #currentProgress="{ record }">
            <a-progress v-if="record.currentProgress" :percent="record.currentProgress"
                        size="small" />
        </template>
    </BasicTable>
    <InfoModal @register="registerModal" @success="reload" />
</template>

<script lang="ts" setup>
    import userTaskTable from "./../../hooks/userTaskTable";
    import { useModal } from "/@/components/Modal";
    import LookProcess from "./../LookProcess.vue";
    import ApprovalProcess from "./../ApprovalProcess.vue";
    import BatchApprovalProcess from "./../BatchApprovalProcess.vue";
    import InfoModal from "../BatchApprovalInfo.vue";
    import { BasicTable, useTable, BasicColumn } from "/@/components/Table";
    import { getSchemaTask } from "/@/api/workflow/process";
    import { TaskTypeUrl } from "/@/enums/workflowEnum";
    import { useI18n } from "/@/hooks/web/useI18n";
    import { unref, watch } from "vue";
    import { useRouter } from "vue-router";

    const { t } = useI18n();
    const configColumns: BasicColumn[] = [
        {
            title: t("流水号"),
            dataIndex: "serialNumber",
            width: 80,
            align: "left"
        },
        {
            title: t("流程名称"),
            dataIndex: "processName",
            width: "32%",
            align: "left"
        },
        {
            title: t("任务名称"),
            dataIndex: "taskName",
            width: "17%",
            align: "left"
        },
        {
            title: t("当前进度"),
            dataIndex: "currentProgress",
            width: "17%",
            align: "left",
            slots: { customRender: "currentProgress" }
        },
        {
            title: t("发起人"),
            dataIndex: "startUserName",
            width: 80,
            align: "left"
        },
        {
            title: t("发起时间"),
            width: 120,
            dataIndex: "startTime",
            align: "left"
        }
    ];
    const [registerModal, { openModal }] = useModal();
    const { formConfig, data, processId, taskId, schemaId, selectionChange, showBatchApproval } =
        userTaskTable();

    function BatchClearHandler(v) {
        if (v) {
            openModal(true, v);
        }
        clearSelectedRowKeys();
    }

    const clearHandler = () => {
        clearSelectedRowKeys();
        reload();
    };
    const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
        title: t("待办任务列表"),
        api: getSchemaTask,
        rowKey: "id",
        columns: configColumns,
        formConfig: formConfig(),
        beforeFetch: (params) => {
            return { data: params, taskUrl: TaskTypeUrl.PENDING_TASKS };
        },
        rowSelection: {
            type: "checkbox"
        },
        useSearchForm: true,
        showTableSetting: true,
        striped: false,
        pagination: {
            pageSize: 18
        },
        tableSetting: {
            size: false,
            setting: false
        }
    });
    const router = useRouter();
    const { currentRoute } = router;
    watch(
        () => unref(currentRoute),
        (val) => {
            if (val.name == "ProcessTasks") reload();
        },
        { deep: true }
    );
    const onRowDblClick = (record, index) => {
        const { processId, taskId, schemaId } = record;
        router.push({
            path: "/flow/approveFlow",
            query: {
                schemaId,
                taskId,
                processId,
                tabKey: "approve_" + taskId
            }
        });
    };
</script>

<style scoped></style>
