import React, { useRef, useEffect, useState } from 'react';
import { InputNumber, Space, message, Popconfirm } from 'antd';
import {
    PageContainer,
    ProForm,
    ProFormText,
    ProFormDigit,
    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 { goodsCreate, goodsUpdate, goodsItem } = services.GoodsController;
const { goodsCategoryItems } = services.GoodsCategoryController;

export default () => {
    const params = useParams();


    const actionRef = useRef();

    const initRow = {
        id: '',
        name: '',
        original_price: '',
        cover: [],
        current_price: '',
        pre_price: '',
        integral: '',
        sales: '',
        stock: '',
        note: '',
        is_up: 1,
        type: 1
    };

    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(() => {
        goodsItem(params).then(({ data }) => {
            if (data) {
                setRow(data);
            }
        });
    }, []);

    const handleDelete = async (fields) => {

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

        }

    };

    const handleCreate = async (fields) => {
        setRow(fields);
        const { success } = await goodsCreate({ ...fields });

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

    const handleUpdate = async (fields) => {
        console.log(fields)
        const { success } = await goodsUpdate(fields);

        if (success) {
            setRow(initRow);
            history.back();
        }
    };


    return (
        <PageContainer
            header={{
                title: '商品编辑',
            }}
            ghost
        >
            <>
                <ProForm
                    initialValues={row}
                    request={async () => {
                        const { data, success } = await goodsItem(params);
                        if (success) {
                            setNote(data.note);
                            return data;
                        }
                    }}
                    onFinish={(values) => {
                        handleUpdate(values)
                    }}
                >
                    <ProFormText hidden={true} width="md" name="id" />
                    <ProFormSelect
                        rules={[{ required: true, message: '请输入' }]}
                        name="cid"
                        label="所属分类"
                        fieldProps={{
                            fieldNames: {
                                label: "name",
                                value: "id"
                            },
                        }}
                        request={async (param) => {
                            const { success, data } = await goodsCategoryItems();
                            return data;
                        }}
                        placeholder="请选择"
                    />
                    <ProForm.Group>
                        <ProFormText
                            rules={[{ required: true, message: '请输入' }]}
                            width="md"
                            name="name"
                            label="商品名称"
                            placeholder="请输入"
                        />
                        <ProFormRadio.Group
                            rules={[{ required: true, message: '请选择' }]}
                            name="type"
                            radioType="button"
                            label="商品类型"
                            options={[
                                {
                                    label: '充电桩',
                                    value: 1,
                                },
                                {
                                    label: '汽车',
                                    value: 2,
                                },
                                {
                                    label: '其它',
                                    value: 3,
                                },
                            ]}
                        />
                    </ProForm.Group>
                    <ProForm.Item
                        rules={[{ required: true, message: '请选择' }]}
                        label="轮播图" name="cover">
                        <FilesManager
                            fileType="image"
                            defaultValue={row?.cover}
                            count={10}
                            mode=""
                        />
                    </ProForm.Item>

                    <ProForm.Group>
                        <ProFormDigit
                            fieldProps={{
                                prefix: '￥',
                            }}
                            label="原价"
                            name="original_price"
                            min={0}
                        />
                        <ProFormDigit
                            rules={[{ required: true, message: '请输入' }]}
                            fieldProps={{
                                prefix: '￥',
                            }}
                            label="现价"
                            name="current_price"
                            min={0}
                        />
                        {/* <ProFormDigit
              rules={[{ required: true, message: '请输入' }]}
              fieldProps={{
                prefix: '￥',
              }}
              label="首付"
              name="pre_price"
              min={1}
            /> */}
                    </ProForm.Group>
                    <ProForm.Group>
                        <ProFormDigit
                            rules={[{ required: true, message: '请输入' }]}
                            fieldProps={{ precision: 0 }}
                            label="销量"
                            name="sales"
                            min={0}
                        />
                        <ProFormDigit
                            rules={[{ required: true, message: '请输入' }]}
                            fieldProps={{ precision: 0 }}
                            label="库存"
                            name="stock"
                            min={0}
                        />
                    </ProForm.Group>
                    <ProForm.Group>
                        <ProFormDigit
                            fieldProps={{ precision: 0 }}
                            label="赠送积分"
                            name="integral"
                            min={0}
                        />
                        <ProFormSwitch
                            rules={[{ required: true, message: '请输入' }]}
                            checkedChildren="上架"
                            unCheckedChildren="下架"
                            defaultChecked
                            name="is_up"
                            label="上架"
                        />
                    </ProForm.Group>
                    <ProForm.Item
                        label="详情" name="detail">
                        <FilesManager
                            fileType="image"
                            defaultValue={row?.detail}
                            count={10}
                            mode=""
                        />
                    </ProForm.Item>
                    {/* <ProForm.Item
            rules={[{ required: true, message: '请选择' }]}
            label="详情" name="note">
            <ReactQuill
              theme="snow"
              value={note}
              modules={modules}
              onChange={(val) => {
                setNote(val)
              }}
            />
          </ProForm.Item> */}
                </ProForm>
            </>
        </PageContainer >
    );
};
