import React, { useRef, useEffect, useState } from 'react';
import { history } from '@umijs/max';

import { Button, Space, Image, Popconfirm } from 'antd';
import {
    PageContainer,
    ProTable,
    EditableProTable
} from '@ant-design/pro-components';

import AuthConsumer from '@/components/Authority';

import services from '@/services/admin';

const { articleCategoryItems, articleCategoryCreate, articleCategoryDelete, articleCategoryUpdate } = services.ArticleCategoryController;

export default () => {

    const actionRef = useRef();

    const initRow = {
        id: '',
        name: '',
        sort: 100,
    };

    const [row, setRow] = useState(initRow);
    const [editableKeys, setEditableRowKeys] = useState([]);

    const handleDelete = async (fields) => {

        const { success } = await articleCategoryDelete(fields);
        if (success) {
            actionRef.current.clearSelected();
            actionRef.current?.reload();
        }

    };

    const handleCreate = async (fields) => {
        setRow(fields);

        const { success } = await articleCategoryCreate({ ...fields });

        if (success) {
            setRow(initRow);
            actionRef.current?.reload();
        }
    };

    const handleUpdate = async (fields) => {

        const { success } = await articleCategoryUpdate({ ...fields });

        if (success) {
            actionRef.current?.reload();
        }
    };

    const columns = [
        {
            title: '栏目名称',
            dataIndex: 'name',
            search: false,
        },
        {
            title: '排序',
            dataIndex: 'sort',
            search: false,
        },
        {
            title: '创建时间',
            dataIndex: 'created_at',
            search: false,
            editable: false,
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (text, record, _, action) => [
                <AuthConsumer action={'admin/article_category/update'} key="admin/article_category/update">
                    <Button
                        key="editable"
                        type="link"
                        onClick={() => {
                            setRow(record);
                            action?.startEditable?.(record.id);
                        }}
                    >
                        编辑
                    </Button>
                </AuthConsumer>,
                <AuthConsumer action={'admin/article_category/delete'} key="admin/article_category/delete">
                    <Popconfirm
                        title="确认删除？"
                        onConfirm={() => {
                            handleDelete({ id: [record.id] });
                        }}
                    >
                        <Button
                            key="delete"
                            type="link"
                            danger
                        >
                            删除
                        </Button>
                    </Popconfirm>
                </AuthConsumer>
            ],
        },
    ];

    return (
        <PageContainer
            ghost
        >
            <>
                <EditableProTable
                    actionRef={actionRef}
                    rowKey="id"
                    search={false}
                    request={async (params, sorter, filter) => {
                        const { data, success } = await articleCategoryItems({
                            ...params,
                            sorter,
                            filter,
                        });
                        return {
                            data: data || [],
                            total: 0,
                            success,
                        };
                    }}
                    recordCreatorProps={
                        {
                            position: 'top',
                            record: () => ({ id: 0 }),
                        }
                    }
                    editable={{
                        type: 'multiple',
                        editableKeys,
                        onSave: async (rowKey, data, row) => {
                            if (rowKey) {
                                handleUpdate(data)
                            } else {
                                handleCreate(data)
                            }

                        },
                        onChange: setEditableRowKeys,
                    }}
                    columns={columns}
                    pagination={false}
                />
            </>
        </PageContainer>
    );
};
