import { Button } from 'antd';
import React, { useRef } from 'react';
import { XForm } from '../packages/react/src/index';
import { ISchema } from '../packages/types/src/index';

const schema: ISchema = [
    {
        key: 'array1',
        type: 'Array',
        ui: { label: 'Table' },
        props: {
            type: 'Table'
        },
        children: [
            {
                key: 'name',
                type: 'Input',
                ui: {
                    label: '姓名'
                }
            },
            {
                key: 'age',
                type: 'InputNumber',
                ui: {
                    label: '年龄'
                }
            },
            {
                key: 'sex',
                type: 'Radio',
                ui: {
                    label: '性别'
                },
                options: [
                    {
                        name: '男',
                        value: 'male'
                    },
                    {
                        name: '女',
                        value: 'female'
                    }
                ]
            }
        ],
        rules: [
            {
                type: 'array',
                required: true,
                defaultField: {
                    type: 'object',
                    fields: {
                        name: { type: 'string', required: true },
                        age: { type: 'number', required: true },
                        sex: { type: 'string', required: true }
                    }
                },
                trigger: 'change'
            }
        ]
    },
    {
        key: 'array2',
        type: 'Array',
        ui: { label: 'Card' },
        props: {
            type: 'Card'
        },
        children: [
            {
                key: 'input111',
                type: 'Input',
                ui: {
                    label: '姓名'
                }
            },
            {
                key: 'input222',
                type: 'Input',
                ui: {
                    label: '年龄'
                }
            },
            {
                key: 'input333',
                type: 'Select',
                value: 1,
                ui: {
                    label: '性别'
                },
                options: [
                    {
                        name: '男',
                        value: 1
                    },
                    {
                        name: '女',
                        value: 0
                    }
                ]
            }
        ],
        rules: [
            {
                type: 'array',
                required: true,
                defaultField: {
                    type: 'object',
                    fields: {
                        name: { type: 'string', required: true },
                        age: { type: 'number', required: true },
                        sex: { type: 'string', required: true }
                    }
                },
                trigger: 'change'
            }
        ]
    },
    {
        key: 'hint',
        type: 'Input',
        status: 'preview',
        ui: {
            label: '以下都是展平的嵌套对象'
        }
    },
    {
        key: 'group1',
        type: 'Object',
        ui: {
            label: '嵌套'
        },
        children: [
            {
                key: 'input1.1',
                type: 'Input',
                value: '111',
                ui: {
                    label: '姓名'
                }
            },
            {
                key: 'group1.1',
                type: 'Object',
                ui: {
                    label: '成绩'
                },
                children: [
                    {
                        key: 'input1.1.1',
                        type: 'Input',
                        value: '111',
                        ui: {
                            label: '体育'
                        }
                    },
                    {
                        key: 'group1.1.1',
                        type: 'Object',
                        ui: {
                            label: '主科'
                        },
                        children: [
                            {
                                key: 'input1.1.1.1',
                                type: 'Input',
                                value: '111',
                                ui: {
                                    label: '语文'
                                }
                            }
                        ]
                    }
                ]
            },
            {
                key: 'input1.2',
                type: 'Input',
                value: '111',
                ui: {
                    label: '身高'
                }
            }
        ]
    },
    {
        key: 'activityName',
        type: 'Input',
        ui: {
            label: '活动名称'
        },
        props: {
            placeholder: '不能超过三十个字'
        }
    },
    {
        key: 'ranks',
        type: 'Array',
        ui: { label: '榜单配置', required: true },
        props: {
            type: 'Card',
            max: 10,
            min: 1
        },
        children: [
            {
                key: 'liveType',
                type: 'Radio',
                value: 0,
                ui: {
                    label: '榜单分区',
                    required: true,
                    labelCol: { span: 6 },
                    wrapperCol: { span: 18 }
                },
                options: [
                    { name: '全区', value: 0 },
                    { name: '视频', value: 1 },
                    { name: '音频', value: 2 }
                ]
            },
            {
                key: 'rankMemberType',
                type: 'Radio',
                value: 1,
                ui: {
                    label: '榜单类型',
                    required: true,
                    labelCol: { span: 6 },
                    wrapperCol: { span: 18 }
                },
                options: [
                    { name: '主播榜', value: 1 },
                    { name: '用户榜', value: 2 }
                ]
            },
            {
                key: 'rankGiftType',
                type: 'Radio',
                value: 1,
                ui: {
                    label: '统计内容',
                    required: true,
                    labelCol: { span: 6 },
                    wrapperCol: { span: 18 }
                },
                options: [
                    { name: '音符榜（统计所有礼物）', value: 1 },
                    { name: '道具榜（统计特定礼物）', value: 2 }
                ]
            },
            {
                key: 'giftIntegralRatio',
                type: 'InputNumber',
                value: 1,
                ui: {
                    label: '积分计算',
                    tooltip: '1音符等于多少积分',
                    required: true,
                    labelCol: { span: 6 },
                    wrapperCol: { span: 18 }
                },
                props: {
                    placeholder: '>0两位小数',
                    min: 0.01,
                    step: 0.01
                },
                listeners: [
                    {
                        watch: ['rankGiftType'],
                        condition: 'rankGiftType.value != 1',
                        set: {
                            status: 'hidden'
                        }
                    }
                ],
                rules: [
                    {
                        required: true,
                        message: '请填写积分计算'
                    }
                ]
            },
            {
                key: 'notScoreFreeGift',
                type: 'Switch',
                value: false,
                ui: {
                    label: '免费礼物不计入积分',
                    tooltip: '不勾选此项，免费礼物会按照比例计入积分',
                    required: true,
                    labelCol: { span: 6 },
                    wrapperCol: { span: 18 }
                },
                listeners: [
                    {
                        watch: ['rankGiftType'],
                        condition: 'rankGiftType.value != 1',
                        set: {
                            status: 'hidden'
                        }
                    }
                ]
            },
            {
                key: 'specifyGifts',
                type: 'Array',
                status: 'edit',
                ui: {
                    label: '积分计算',
                    tooltip:
                        '最多添加 10 个礼物',
                    required: true,
                    labelCol: { span: 6 },
                    wrapperCol: { span: 18 }
                },
                props: {
                    type: 'Table',
                    max: 10,
                    min: 1
                },
                children: [
                    {
                        key: 'giftId',
                        type: 'InputNumber',
                        ui: {
                            label: '礼物Id',
                            required: true
                        },
                        props: {
                            placeholder: '背包Id',
                            min: 1,
                            step: 1
                        },
                        rules: [
                            {
                                required: true,
                                message: '请填写礼物Id'
                            }
                        ]
                    },
                    {
                        key: 'giftName',
                        type: 'Input',
                        status: 'preview',
                        ui: {
                            label: '礼物名称'
                        },
                        listeners: [
                            {
                                watch: ['giftId'],
                                set: (_valid, field, form) => {
                                    const id = form.getValue('giftId');
                                    if (!id) {
                                        return;
                                    }
                                    field.setValue(id);
                                }
                            }
                        ]
                    },
                    {
                        key: 'ratio',
                        type: 'InputNumber',
                        value: 1,
                        ui: {
                            label: '对应积分',
                            required: true
                        },
                        props: {
                            placeholder: '>=1整数',
                            min: 1,
                            step: 1
                        },
                        rules: [
                            {
                                required: true,
                                message: '请填写对应积分'
                            }
                        ]
                    }
                ],
                listeners: [
                    {
                        watch: ['rankGiftType'],
                        condition: 'rankGiftType.value != 2',
                        set: {
                            status: 'hidden'
                        }
                    }
                ],
                rules: [
                    {
                        type: 'array',
                        required: true,
                        message: '请添加至少一个礼物'
                    }
                ]
            },
            {
                key: 'topLimit',
                type: 'InputNumber',
                value: 200,
                ui: {
                    label: '榜单显示个数',
                    required: true,
                    labelCol: { span: 6 },
                    wrapperCol: { span: 18 }
                },
                props: {
                    placeholder: '>=1整数',
                    min: 1,
                    step: 1
                },
                rules: [
                    {
                        required: true,
                        message: '请填写榜单显示个数'
                    }
                ]
            },
            {
                key: 'userIdsType',
                type: 'Radio',
                value: 0,
                ui: {
                    label: '参与活动UID',
                    required: true,
                    labelCol: { span: 6 },
                    wrapperCol: { span: 18 }
                },
                options: [
                    { name: '全区', value: 0 },
                    { name: '黑名单', value: 1 },
                    { name: '白名单', value: 2 }
                ]
            },
            {
                key: 'blackUserIds',
                type: 'TextArea',
                ui: {
                    label: '黑名单',
                    labelCol: { span: 6 },
                    wrapperCol: { span: 18 }
                },
                props: {
                    placeholder: '请输入UID，多个UID请用英文逗号或换行分隔',
                    autoSize: true
                },
                listeners: [
                    {
                        watch: ['userIdsType'],
                        condition: 'userIdsType.value != 2',
                        set: {
                            status: 'hidden'
                        }
                    }
                ],
                rules: [
                    {
                        required: true,
                        message: '请填写黑名单'
                    }
                ]
            },
            {
                key: 'whiteUserIds',
                type: 'TextArea',
                ui: {
                    label: '白名单',
                    labelCol: { span: 6 },
                    wrapperCol: { span: 18 }
                },
                props: {
                    placeholder: '请输入UID，多个UID请用英文逗号或换行分隔',
                    autoSize: true
                },
                listeners: [
                    {
                        watch: ['userIdsType'],
                        condition: 'userIdsType.value != 3',
                        set: {
                            status: 'hidden'
                        }
                    }
                ],
                rules: [
                    {
                        required: true,
                        message: '请填写白名单'
                    }
                ]
            }
        ],
        rules: [
            {
                type: 'array',
                required: true,
                message: '请添加至少一个榜单'
            }
        ]
    }
];

export default function() {
    const formRef = useRef(null);

    const onSubmit = () => {
        formRef.current.submit().then((data: any) => {
            console.log(data);
        });
    };

    const onReset = () => {
        formRef.current.reset();
    };

    const onEmpty = () => {
        formRef.current.empty();
    };

    return (
        <>
            <XForm
                ref={formRef}
                schema={schema}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 12 }}
            />
            <div style={{ display: 'flex', justifyContent: 'center' }}>
                <Button type="primary" onClick={onSubmit}>
                    提交
                </Button>
                <Button style={{ marginLeft: '10px' }} onClick={onReset}>重置</Button>
                <Button style={{ marginLeft: '10px' }} onClick={onEmpty}>清空</Button>
            </div>
        </>
    );
}
