<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: handleRevocation.bind(null, 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 { getLoadMyReadPage } from '@/api/sys/WFTask'
    import { Tag, Switch } from 'ant-design-vue';
    const searchInfo = reactive < Recordable > ({});
    import { useGo } from '@/hooks/web/usePage';
    const go = useGo();
    const [registerTable, { reload, expandAll, getSelectRows, clearSelectedRowKeys }] = useTable({
        api: getLoadMyReadPage,
        columns: [
            {
                title: '任务',
                dataIndex: 'unitName',
            },
            {
                title: '标题',
                dataIndex: 'processTitle',
            },
            {
                title: '状态',
                dataIndex: 'state',
                width: 80,
                customRender: ({ record }) => {
                    if (record.state == '1') {
                        const color = 'ref';
                        const text = '未阅';
                        return h(Tag, { color: color }, () => text);
                    } else {
                        const color = 'green';
                        const text = '已阅';
                        return h(Tag, { color: color }, () => text);
                    }


                },
            },
            {
                title: '提交人',
                dataIndex: 'processUserName',
            },
            {
                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' },
        },
    });
    function handleDetail(record){
        go('/dashboard/task_preview/detail?id=' + record.id);
    }
    function handleRevocation(record){
        console.log(record)
    }
    


</script>