import React, { useRef, useEffect, useState } from 'react';
import { InputNumber, Space, message, Popconfirm, Tree } from 'antd';
import {
    PageContainer,
    ProForm,
    ProFormText,
    ProFormTextArea,
    ProFormSwitch,
    ProFormSelect,
    ProFormRadio
} from '@ant-design/pro-components';

import { useParams } from 'umi';

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

import AuthConsumer from '@/components/Authority';
import FilesManager from '@/components/FilesManage/index';

import services from '@/services/admin';
const { permissionTree } = services.PermissionController;

const { articleCreate, articleUpdate, articleItem } = services.ArticleController;
const { articleCategoryItems } = services.ArticleCategoryController;
const { adminCreate, adminUpdate } = services.AdminController;


export default () => {
    const [permissionTreeData, setPermissionTreeData] = useState([]);


    useEffect(() => {
        permissionTree().then(({ data }) => {
            setPermissionTreeData(data);
        });
    }, []);

    const params = useParams();
    const restFormRef = useRef();

    const actionRef = useRef();

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

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

    const modules = {
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],
            ['link', 'image'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction

            // [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'align': [] }],

            ['clean']                                         // remove formatting button
        ]
    }

    useEffect(() => {
        articleItem(params).then(({ data }) => {
            if (data) {
                setRow(data);
            }
        });
    }, []);


    const handleCreate = async (fields) => {
        console.log(fields);
        setRow(fields);
        const { success } = await adminCreate({ ...fields });

        if (success) {
            setRow(initRow);
            //history.push('article/0/create');
            history.back();
        }
    };

    const handleUpdate = async (fields) => {

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

        if (success) {

        }
    };


    return (
        <PageContainer
            header={{
                title: '管理员添加',
            }}
            ghost
        >
            <>
                <ProForm
                    initialValues={row}
                    formRef={restFormRef}
                    onFinish={(values) => {
                        handleCreate(values)
                    }}
                >
                    <ProForm.Group>
                        <ProFormText
                            rules={[{ required: true, message: '请输入' }]}
                            width="md"
                            name="mobile"
                            label="手机号"
                            placeholder="请输入"
                        />
                        <ProFormText.Password
                            rules={[{ required: true, message: '请输入' }]}
                            width="md"
                            name="password"
                            label="密码"
                            placeholder="请输入"
                        />
                    </ProForm.Group>
                    <ProForm.Group>
                        <ProFormText
                            rules={[{ required: true, message: '请输入' }]}
                            width="md"
                            name="nickname"
                            label="昵称"
                            placeholder="请输入"
                        />
                        <ProForm.Item label="头像" name="avatar">
                            <FilesManager fileType="image" defaultValue={''} count={1} mode="" />
                        </ProForm.Item>
                    </ProForm.Group>
                    <ProFormRadio.Group
                        name="status"
                        radioType="button"
                        label="状态"
                        options={[
                            {
                                label: '正常',
                                value: 0,
                            },
                            {
                                label: '冻结',
                                value: 1,
                            },
                            {
                                label: '禁用',
                                value: 2,
                            },
                        ]}
                    />
                    <ProForm.Item label="设置权限" name="permission_ids">
                        {
                            permissionTreeData?.length > 0 && <Tree

                                checkable
                                multiple
                                showLine={true}
                                showIcon={false}
                                defaultExpandAll
                                name="permission_ids"
                                onCheck={(check) => {
                                    console.log(check);
                                    restFormRef.current.setFieldsValue({ permission_ids: check });
                                }}
                                onSelect={(selectedKeys, e) => {
                                    console.log(selectedKeys);
                                    console.log(e);
                                }}
                                fieldNames={{
                                    title: 'name',
                                    key: 'id',
                                }}
                                treeData={permissionTreeData}
                            />
                        }
                    </ProForm.Item>
                </ProForm>
            </>
        </PageContainer>
    );
};
