<template>
    <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
        <BasicTable @register="registerTable" :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:'删除',
                        color: 'error',
                        popConfirm: {
                            title: '是否确认删除',
                            confirm: () => {
                                handleDelete(record);
                            },
                          },
                      },
                    ]" />
                </template>
            </template>
        </BasicTable>
    </PageWrapper>
</template>

<script lang="ts" setup>
    import { reactive } from 'vue'
    import { BasicTable, useTable, TableAction } from '@/components/Table';
    import { PageWrapper } from '@/components/Page';
    import { getLoadMyDraftPage, deleteDraft } from '@/api/sys/WFProcess'
    import { Tag, Switch } from 'ant-design-vue';
    const searchInfo = reactive < Recordable > ({});
    import { useGo } from '@/hooks/web/usePage';
    const go = useGo();
    import { useMessage } from '/@/hooks/web/useMessage';
    const { createConfirm, createMessage } = useMessage();

    const [registerTable, { reload, expandAll, getSelectRows, clearSelectedRowKeys }] = useTable({
        api: getLoadMyDraftPage,
        columns: [
            {
                title: '标题',
                dataIndex: 'title',
            },
            {
                title: '流程模版',
                dataIndex: 'schemeName',
            },
            {
                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: 100,
            title: '操作',
            dataIndex: 'action',
            // slots: { customRender: 'action' },
        },
    });
    async function handleDelete(record) {
        var query = {
            id: record.id
        }
        const data = await deleteDraft(query)
        if (data) {
            reload()
            return createMessage.info('删除成功');
        }else{
            return createMessage.error('删除失败');
        }
    }
    function handleDetail(record) {
        go('/dashboard/task_preview/detail?id=' + record.id);
    }

</script>