"use client"
import { Button, Card, Image, Popconfirm, Space, Table } from "antd";
import '@ant-design/v5-patch-for-react-19';
import { useRouter } from "next/navigation";
import { useAntdTable } from "ahooks";
import { deleteArticle, getArticleList } from "@/app/_lib/data/article";
import { PICTURE_PREFIX } from "@/app/_lib/utils";

export default function Page() {
    const router = useRouter()
    const { tableProps, refresh } = useAntdTable(({ current, pageSize }) => {
        return getArticleList({ page: current, pageSize })
    })
    return (
        <Card title="文章管理" extra={
            <Space>
                <Button onClick={() => refresh()}>刷新</Button>
                <Button type="primary" onClick={() => {
                    router.push("/admin/dashboard/article/detail")
                }} >
                    新增文章
                </Button>
            </Space>
        }>
            <Table
                {...tableProps}
                rowKey="_id"
                columns={[
                    {
                        title: '标题',
                        dataIndex: 'title',
                    },
                    {
                        title: '副标题',
                        dataIndex: 'description',
                    },

                    {
                        title: "封面",
                        dataIndex: "cover",
                        render: (_, item) => (
                            <>
                                <Image src={item.cover.startsWith('http') ? item.cover : PICTURE_PREFIX + item.cover} width={70} alt="" ></Image>
                            </>
                        )
                    },
                    {
                        title: '网址',
                        dataIndex: 'link',
                        width: 100
                    },
                    {
                        title: '操作',
                        render: (_, row) => (
                            <Space>
                                <Button type="primary" onClick={() => {
                                    router.push(`/admin/dashboard/article/detail/${row._id}`)
                                }} >修改</Button>

                                <Popconfirm
                                    title="确认删除？"
                                    okText="Yes"
                                    cancelText="No"
                                    onConfirm={() => {
                                        deleteArticle(row._id).then(() => {
                                            refresh()
                                        })
                                    }}

                                >
                                    <Button type="primary" danger
                                    >删除</Button>
                                </Popconfirm>
                            </Space>
                        )
                    }
                ]}

            ></Table >
        </Card >
    )
}