import { SuperTable } from '@/components';
import BaseSemesterController from '@/services/apis/BaseSemesterController';
import { PlusOutlined } from '@ant-design/icons';
import { ActionType, PageContainer, ProColumns } from '@ant-design/pro-components';
import { App, Button, Tag, theme } from 'antd';
import { useCallback, useRef } from 'react';

/** 学期列表 */
const SemesterList: React.FC = () => {
    const actionRef = useRef<ActionType>();

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

    /** 添加学期 */
    const handleAdd = useCallback(async () => {
        modal.confirm({
            title: '消息',
            content: '确定添加新的学期吗',
            okText: '确定',
            cancelText: '取消',
            centered: true,
            onOk: async () => {
                await BaseSemesterController.add();
                message.success('已添加');
                actionRef.current?.reload();
            },
        });
    }, []);

    /** 设置当前学期 */
    const handleSetCurrent = useCallback(async (id: number) => {
        modal.confirm({
            title: '消息',
            content: '确定立即设为当前学期吗',
            okText: '确定',
            cancelText: '取消',
            centered: true,
            onOk: async () => {
                await BaseSemesterController.setCurrent({ id });
                message.success('设置成功');
                actionRef.current?.reload();
            },
        });
    }, []);

    /** 列定义 */
    const columns: ProColumns<API.SemesterOutput>[] = [
        {
            title: 'ID',
            dataIndex: 'id',
            width: 80,
            align: 'center',
        },
        {
            title: '名称',
            dataIndex: 'name',
            align: 'center',
            width: 240,
        },
        {
            title: '简称',
            dataIndex: 'shortName',
            align: 'center',
            width: 120,
        },
        {
            title: '别称',
            dataIndex: 'nickName',
            align: 'center',
            width: 240,
        },
        {
            title: '别称简称',
            dataIndex: 'nickShortName',
            align: 'center',
            width: 120,
        },
        {
            title: '开始年份',
            dataIndex: 'beginYear',
            align: 'center',
            width: 80,
        },
        {
            title: '结束年份',
            dataIndex: 'endYear',
            align: 'center',
            width: 80,
        },
        {
            title: '当前学期',
            dataIndex: 'isCurrent',
            width: 160,
            // align: 'center',
            render: (v, r) => (
                <>
                    <Tag color={r.isCurrent ? token.colorSuccess : ''}>{v ? '是' : '否'}</Tag>
                    {!r.isCurrent && <a key="edit" onClick={() => handleSetCurrent(r.id)}>设为当前学期</a>}
                </>
            ),
        },
        {
            title: '备注',
            dataIndex: 'remark',
            className: 'minw-48',
        },
    ];

    return (
        <PageContainer title={false}>
            <SuperTable<API.SemesterOutput>
                headerTitle="学期列表"
                actionRef={actionRef}
                columns={columns}
                scroll={{ x: 'max-content' }}
                search={false}
                request={async () => {
                    const data = await BaseSemesterController.getAllList();
                    return {
                        data,
                        success: true,
                    };
                }}
                toolbar={{
                    actions: [
                        <Button
                            key="add"
                            type="primary"
                            icon={<PlusOutlined />}
                            onClick={() => handleAdd()}
                        >添加学期</Button>,
                    ],
                }}
            />
        </PageContainer>
    );
};

export default SemesterList;
