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 { adminUpdate, adminItem } = services.AdminController;


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


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

    const params = useParams();
    const restFormRef = useRef(initRow);
    const [checkedKeys, setCheckedKeys] = useState();
    const actionRef = useRef();

    const initRow = {
        id: '',
        nickname: '',
        username: '',
        email: '',
        avatar: '',
        status: 0,
        password: '',
        permission_ids: [],
        authority_note: undefined
    };

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

    useEffect(() => {
        adminItem(params).then(({ data }) => {
            if (data) {
                restFormRef.current.setFieldsValue(data);
                restFormRef.current.setFieldsValue({ permission_ids: data.auth });
                setCheckedKeys(data.auth);
                setRow(data);
            }
        });
    }, []);


    const handleCreate = async (fields) => {
        setRow(fields);
        const { success } = await adminUpdate({ ...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)
                    }}

                >
                    <ProFormText hidden={true} width="md" name="id" />
                    <ProForm.Group>
                        <ProFormText
                            rules={[{ required: true, message: '请输入' }]}
                            width="md"
                            name="mobile"
                            label="手机号"
                            placeholder="请输入"
                        />
                        <ProFormText.Password
                            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
                                checkedKeys={checkedKeys}
                                onCheck={(check) => {
                                    setCheckedKeys(check)
                                    restFormRef.current.setFieldsValue({ permission_ids: check });
                                }}
                                fieldNames={{
                                    title: 'name',
                                    key: 'id',
                                }}
                                treeData={permissionTreeData}
                            />
                        }
                    </ProForm.Item>
                </ProForm>
            </>
        </PageContainer>
    );
};
