import { CardStepTitle } from "@/components";
import ExamDataPublishController from "@/services/apis/ExamDataPublishController";
import { ExamStatus, PublishStatus } from "@/services/enums";
import { ActionType, ProTable } from "@ant-design/pro-components";
import { history, useModel } from "@umijs/max";
import { App, Button, theme } from "antd";
import { useCallback, useRef, useState } from "react";
import ExamDataPublishEditModal from "./ExamDataPublishEditModal";

/** 监测发布内容管理 */
const ExamDataPublishList: React.FC<{ examPlanId: number, examPlanStatus?: ExamStatus }> = ({ examPlanId }) => {
    const { token } = theme.useToken();

    const actionRef = useRef<ActionType>();
    const dataRef = useRef<API.ExamDataPublishOutput[]>();
    const currentRef = useRef<Partial<API.ExamDataPublishOutput>>();

    const [editOpen, setEditOpen] = useState(false);

    const { getDictValueEnum } = useModel('useDict');

    const { message, modal } = App.useApp();

    // 移出
    const handleRemove = useCallback(async (id: number) => {
        modal.confirm({
            title: '警告',
            content: '确定立即移出吗',
            okText: '确定',
            cancelText: '取消',
            centered: true,
            onOk: async () => {
                await ExamDataPublishController.del({ id });
                message.success('已移出');
                actionRef.current?.reload();
            },
        });
    }, []);

    // 发布
    const handlePublish = useCallback(async (id: number) => {
        modal.confirm({
            title: '提示',
            content: '确定立即发布吗',
            okText: '确定',
            cancelText: '取消',
            centered: true,
            onOk: async () => {
                await ExamDataPublishController.publish({ id });
                message.success('已发布');
                actionRef.current?.reload();
            },
        });
    }, []);

    // 取消发布
    const handleUnpublish = useCallback(async (id: number) => {
        modal.confirm({
            title: '提示',
            content: '确定立即取消发布吗',
            okText: '确定',
            cancelText: '取消',
            centered: true,
            onOk: async () => {
                await ExamDataPublishController.unpublish({ id });
                message.success('已取消');
                actionRef.current?.reload();
            },
        });
    }, []);

    return (
        <>
            <ProTable<API.ExamDataPublishOutput>
                headerTitle={<CardStepTitle>结果反馈</CardStepTitle>}
                style={{ marginTop: token.margin }}
                search={false}
                size="small"
                bordered
                scroll={{ x: '100%' }}
                sticky={{ offsetHeader: 56 }}
                actionRef={actionRef}
                options={{ density: false, fullScreen: false, setting: false }}
                pagination={false}
                columns={[
                    {
                        title: '序',
                        valueType: 'option',
                        fixed: 'left',
                        width: 32,
                        align: 'center',
                        render: (_, r, index) => {
                            return index + 1;
                        },
                    },
                    {
                        title: '发布类型',
                        dataIndex: 'type',
                        valueEnum: getDictValueEnum('data_publish_type'),
                        width: 96,
                        align: 'center',
                        fixed: 'left',
                    },
                    {
                        title: '发布名称',
                        dataIndex: 'name',
                        width: 180,
                    },
                    {
                        title: '发布内容',
                        valueType: 'option',
                        width: 80,
                        align: 'center',
                        render: (_, r) => {
                            return (
                                <Button
                                    type="link"
                                    size="small"
                                    onClick={() => history.push(`/exam-c/plan/result/${examPlanId}/${r.id}`)}
                                >管理</Button>
                            );
                        },
                    },
                    {
                        title: '备注说明',
                        dataIndex: 'remark',
                        ellipsis: true,
                        width: 400,
                    },
                    {
                        title: '发布状态',
                        dataIndex: 'status',
                        valueEnum: getDictValueEnum('publish_status', true),
                        width: 88,
                        align: 'center',
                    },
                    {
                        title: '发布时间',
                        dataIndex: 'beginTime',
                        width: 144,
                        align: 'center',
                    },
                    {
                        title: '操作',
                        valueType: 'option',
                        width: 196,
                        align: 'center',
                        fixed: 'right',
                        render: (_, r) => {
                            return (
                                <>
                                    <Button
                                        type="link"
                                        size="small"
                                        disabled={r.status === PublishStatus.PUBLISHED}
                                        onClick={() => handleRemove(r.id)}
                                    >移出</Button>
                                    <Button
                                        type="link"
                                        size="small"
                                        disabled={r.status === PublishStatus.PUBLISHED}
                                        onClick={() => {
                                            currentRef.current = r;
                                            setEditOpen(true);
                                        }}
                                    >修改</Button>
                                    <Button
                                        type="link"
                                        size="small"
                                        disabled={r.status === PublishStatus.PUBLISHED}
                                        onClick={() => handlePublish(r.id)}
                                    >发布</Button>
                                    <Button
                                        type="link"
                                        size="small"
                                        disabled={r.status !== PublishStatus.PUBLISHED}
                                        onClick={() => handleUnpublish(r.id)}
                                    >取消</Button>
                                </>
                            );
                        },
                    }
                ]}
                rowKey="id"
                toolbar={{
                    actions: [
                        <Button
                            key="add"
                            type="primary"
                            // disabled={examPlanStatus !== ExamStatus.READY}
                            onClick={() => {
                                currentRef.current = { id: 0, examPlanId };
                                setEditOpen(true);
                            }}
                        >添加内容</Button>,
                    ],
                }}
                request={async () => {
                    const res = await ExamDataPublishController.getListByExamPlanId({ examplanid: examPlanId });
                    dataRef.current = res ?? [];
                    return {
                        data: res,
                        success: true,
                    };
                }}
            />
            {editOpen && currentRef.current &&
                <ExamDataPublishEditModal
                    data={currentRef.current}
                    onClose={() => setEditOpen(false)}
                    onFinish={() => actionRef.current?.reload()}
                />
            }
        </>
    );
}

export default ExamDataPublishList;
