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

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

import AuthConsumer from '@/components/Authority';

import services from '@/services/admin';

const { goodsItems, goodsCreate, goodsDelete, goodsUpdate } = services.GoodsController;

export default () => {

    const actionRef = useRef();

    const initRow = {
        id: '',
        type: 1,
        cover: null,
        detail: null
    };

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

    const handleDelete = async (fields) => {

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

    };

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

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

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

    const handleUpdate = async (fields) => {

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

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

            setUpdateFormModal(false);
        }
    };

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            search: false,
        },
        {
            title: '商品名',
            dataIndex: 'name',
            search: true,
        },
        {
            title: '封面图',
            dataIndex: 'cover',
            valueType: 'avatar',
            search: false,
            render: (_, record) => {
                return <Image
                    width={100}
                    src={record.cover[0]}
                />;
            },
        },
        {
            title: '原价',
            dataIndex: 'original_price',
            search: false,
        },
        {
            title: '现价',
            dataIndex: 'current_price',
            search: false,
        },
        {
            title: '赠送积分',
            dataIndex: 'integral',
            search: false,
        },
        {
            title: '库存',
            dataIndex: 'stock',
            search: false,
        },
        {
            title: '销量',
            dataIndex: 'sales',
            search: false,
        },
        {
            title: '创建时间',
            dataIndex: 'created_at',
            search: false,
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (_, record) => (
                <Space>
                    <AuthConsumer action={'admin/goods/update'} key="admin/goods/update">
                        <Button
                            type="link"
                            onClick={() => {

                                history.push(`goods/${record.id}/update`);
                            }}
                        >
                            编辑
                        </Button>
                    </AuthConsumer>

                </Space>
            ),
        },
    ];

    return (
        <PageContainer
            ghost
        >
            <>
                <ProTable
                    actionRef={actionRef}
                    rowKey="id"
                    search={{
                        defaultCollapsed: false,
                    }}
                    toolBarRender={() => [
                        <AuthConsumer action={'admin/goods/create'} key="admin/goods/create">
                            <Button
                                type="primary"
                                onClick={() => {
                                    history.push('goods/0/create');
                                }}
                            >
                                添加
                            </Button>
                        </AuthConsumer>
                    ]}
                    request={async (params, sorter, filter) => {
                        const { data, success } = await goodsItems({
                            ...params,
                            sorter,
                            filter,
                        });
                        return {
                            data: data?.data || [],
                            total: data?.total,
                            success,
                        };
                    }}
                    columns={columns}
                    tableAlertRender={({
                        selectedRowKeys,
                        selectedRows,
                        onCleanSelected,
                    }) => {
                        return (
                            <Space size={24}>
                                <span>已选 {selectedRowKeys.length} 项</span>
                                <span>
                                    <a style={{ marginInlineStart: 8 }} onClick={onCleanSelected}>
                                        取消选择
                                    </a>
                                </span>
                            </Space>
                        );
                    }}
                    tableAlertOptionRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => {

                    }}
                    pagination={{
                        showSizeChanger: true,
                    }}
                />
            </>
        </PageContainer>
    );
};
