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

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

import { userlevelPage, userlevelDelete, userlevelUpdate, userlevelAdd } from "@/services/user/grade"



export default () => {

    const actionRef = useRef<ActionType>();

    const initRow = {
        id: '',
        name: '',
        level: '',
        num: '',
        note: '',
        fee: '',
        team_prize: ''
    };

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

    const handleDelete = async (fields) => {

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

    };

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

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

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

    const handleUpdate = async (fields) => {

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

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

    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            search: false,
        },
        {
            title: '等级',
            dataIndex: 'level',
            search: false,
        },
        {
            title: '分成比例',
            dataIndex: 'ratio',
            search: false,
        },
        // {
        //     title: '服务费',
        //     dataIndex: 'fee',
        //     search: false,
        // },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (text, record, _, action) => [
                <Button
                    key="editable"
                    type="link"
                    onClick={() => {
                        setRow(record);
                        action?.startEditable?.(record.id);
                    }}
                >
                    编辑
                </Button>,
                <Popconfirm
                    title="确认删除？"
                    onConfirm={() => {
                        handleDelete([record.id]);
                    }}
                >
                    <Button
                        key="delete"
                        type="link"
                        danger
                    >
                        删除
                    </Button>
                </Popconfirm>
            ],
        },
    ];

    return (
        <PageContainer
            ghost
        >
            <>
                <EditableProTable
                    actionRef={actionRef}
                    rowKey="id"
                    search={false}
                    request={async (params, sorter, filter) => {
                        const { data, success } = await userlevelPage({
                            ...params
                        });
                        return {
                            data: data.records || [],
                            total: 0,
                            success,
                        };
                    }}
                    recordCreatorProps={
                        {
                            position: 'bottom',
                            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>
    );
};
