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 { articleItems, articleCreate, articleDelete, articleUpdate } = services.ArticleController;

export default () => {

    const actionRef = useRef();

    const initRow = {
        id: '',
        cid: 1,
        is_up: 1,
        title: '',
        cover: '',
        video: '',
        note: null
    };

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

    const handleDelete = async (fields) => {

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

    };





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

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

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

    const handleUpdate = async (fields) => {

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

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

            setUpdateFormModal(false);
        }
    };

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            search: false,
        },
        {
            title: '分类',
            dataIndex: 'c',
            search: false,
            render: (_, record) => {
                return record?.c ? record?.c?.name : '';
            },
        },
        {
            title: '标题',
            dataIndex: 'title',
            search: false,
        },
        {
            title: '封面图',
            dataIndex: 'cover',
            valueType: 'avatar',
            search: false,
            render: (_, record) => {
                return record?.cover ? <Image
                    width={100}
                    src={record?.cover}
                /> : '';
            },
        },
        {
            title: '视频',
            dataIndex: 'video',

            search: false,
            render: (_, record) => {
                return record?.video ? <video width="200px" controls="controls" src={record?.video} direction="90" />
                    : '';
            },
        },
        {
            title: '发布状态',
            dataIndex: 'is_up',
            search: false,
            render: (_, record) => {
                return <>
                    {config?.is_up[record?.is_up]}
                </>
            },
        },
        {
            title: '创建时间',
            dataIndex: 'created_at',
            search: false,
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (_, record) => (
                <Space>
                    <AuthConsumer action={'admin/article/update'} key="admin/article/update">
                        <Button
                            type="link"
                            onClick={() => {

                                history.push(`article/${record.id}/update`);
                            }}
                        >
                            编辑
                        </Button>
                    </AuthConsumer>
                    <AuthConsumer action={'admin/article/delete'} key="admin/article/delete">
                        <Popconfirm
                            title="确认删除？"
                            onConfirm={() => {
                                handleDelete({ id: record.id });
                            }}
                        >
                            <Button
                                type="link"
                                danger
                            >
                                删除
                            </Button>
                        </Popconfirm>
                    </AuthConsumer>
                </Space>
            ),
        },
    ];

    return (
        <PageContainer
            ghost
        >
            <>
                <ProTable
                    actionRef={actionRef}
                    rowKey="id"
                    search={{
                        defaultCollapsed: false,
                    }}
                    toolBarRender={() => [
                        <AuthConsumer action={'admin/article/create'} key="admin/article/create">
                            <Button
                                type="primary"
                                onClick={() => {
                                    history.push('article/0/create');
                                }}
                            >
                                添加
                            </Button>
                        </AuthConsumer>
                    ]}
                    request={async (params, sorter, filter) => {
                        const { data, success } = await articleItems({
                            ...params,
                            sorter,
                            filter,
                        });
                        setConfig(data?.config);
                        return {
                            data: data?.items?.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>
    );
};
