<template>
    <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
        <BasicTable @register="registerTable" @fetch-success="onFetchSuccess" :searchInfo="searchInfo">
            <template #toolbar>
                <!-- <a-button type="primary" @click="handleCreate"> 新增 </a-button> -->
                <PermissionBtn @btnEvent="onBtnClicked"></PermissionBtn>
            </template>
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'action'">
                    <TableAction :actions="[
                      {
                        label:'详情',
                        onClick: handleDetail.bind(null, record),
                      },
                      {
                        label:'催办',
                        onClick: handleUrge.bind(null, record),
                      },
                      {
                        label:'撤销',
                        popConfirm: {
                            title: '是否撤销流程',
                            confirm: () => {
                                handleRevocation(record);
                            },
                          },
                      }
                    ]" />
                </template>
            </template>
        </BasicTable>
    </PageWrapper>
</template>

<script lang="ts" setup>
    import { reactive, h } from 'vue'
    import { BasicTable, useTable, TableAction } from '@/components/Table';
    import { PageWrapper } from '@/components/Page';
    import { getLoadMyPage, urge, revoke, revokeAudit } from '@/api/sys/WFProcess'
    import { Tag, Switch } from 'ant-design-vue';
    import { useMessage } from '/@/hooks/web/useMessage';
    const { createConfirm, createMessage } = useMessage();
    const searchInfo = reactive < Recordable > ({});
    import { useGo } from '@/hooks/web/usePage';
    const go = useGo();
    const [registerTable, { reload, expandAll, getSelectRows, clearSelectedRowKeys }] = useTable({
        api: getLoadMyPage,
        columns: [
            {
                title: '标题',
                dataIndex: 'title',
            },
            {
                title: '流程模版',
                dataIndex: 'schemeName',
            },
            {
                title: '状态',
                dataIndex: 'isFinished',
                width: 80,
                customRender: ({ record }) => {
                    if (record.isFinished == '1') {
                        const color = 'ref';
                        const text = '结束';
                        return h(Tag, { color: color }, () => text);
                    } else if (record.isAgain == '1') {
                        const color = 'orange';
                        const text = '重新提交';
                        return h(Tag, { color: color }, () => text);
                    } else {
                        const color = 'green';
                        const text = '审批中';
                        return h(Tag, { color: color }, () => text);
                    }


                },
            },
            {
                title: '提交人',
                dataIndex: 'createUserName',
            },
            {
                title: '创建时间',
                dataIndex: 'createDate',
            },

        ],
        rowKey: 'id',
        formConfig: {
            labelWidth: 120,
            schemas: [
                {
                    field: '[StartDate, EndDate]',
                    label: '日期范围',
                    component: 'RangePicker',
                    componentProps: {
                        format: 'YYYY-MM-DD',
                        placeholder: ['开始日期', '结束日期'],
                    },
                    colProps: { span: 8 },
                },
                {
                    field: 'keyWord',
                    label: '关键字',
                    component: 'Input',
                    colProps: { span: 8 },
                },
            ],
        },
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        handleSearchInfoFn(info) {
            return info;
        },
        actionColumn: {
            width: 200,
            title: '操作',
            dataIndex: 'action',
            // slots: { customRender: 'action' },
        },
    });
    function handleDetail(record) {
        go('/dashboard/task_preview/detail?id=' + record.id);
    }
    async function handleUrge(record) {
        var query = {
            id: record.id
        }
        const data = await urge(query)
        if (data) {
            reload()
            return createMessage.info('催办成功');
        } else {
            return createMessage.error('催办失败');
        }
    }
    async function handleRevocation(record) {
        var query = {
            id: record.id
        }
        if (record.isStart == 0) {
            const data = await revoke(query)
            if (data) {
                reload()
                return createMessage.info('撤销成功');
            } else {
                return createMessage.error('撤销失败');
            }
        }
        else if (record.isCancel == 1) {
            const data = await revokeAudit(query)
            if (data) {
                reload()
                return createMessage.info('撤销成功');
            } else {
                return createMessage.error('撤销失败');
            }
        }
    }



</script>