import React, { useState, useEffect } from 'react';
import { Form, Slider, Row, Col, Button, InputNumber, message } from 'antd';
import router from 'umi/router';
import apis from '../../../../services/apis';
import request from '../../../../utils/request';
import ImageUploader from './ImageUpload';
import Styles from './styles.less';
import BuildSelect from '../../../../components/SelectButton/BuildSelect2'
import CheckboxGroup from './CheckboxGroup';

function Basic(props) {

    const { id, name } = props

    const [data, setData] = useState({})
    useEffect(() => {
        getList();
    }, [])
    // 查询列表

    const getList = () => {
        request({ ...apis.redPacket.detail, urlData: { id } }).then(data => {
            setData(data)
        })
    }

    const updateRedPacket = data => {
        request({ ...apis.redPacket.update, data: { ...data } }).then(data => {
            // setData(data)
            message.success('操作成功')
        }).catch(() => {
            message.error('操作失败')
        })
    }


    function handleSubmit(e) {
        e.preventDefault();
        props.form.validateFields((err, values) => {
            if (!err) {
                values.activityId = id
                updateRedPacket(values)
            }
        },
        )
    }

    const { getFieldDecorator } = props.form

    return (

        <>
            <Form labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
                <Form.Item label="活动名称">
                    <span>{data.name}</span>
                </Form.Item>
                <Form.Item label="扫码查看" >
                    <img src={data.qrcode || ''} alt="" style={{ width: '100px' }} />
                </Form.Item>
                <Form.Item label="首页背景图" help="建议尺寸：640*1234px，格式:jpg；内容区大小：640*1040px（画面最上和最下部分分别预留640*97px的空间不要放置文字、logo等关键性内容，小屏手机该部分的画面会被遮挡）">
                    {getFieldDecorator('indexBackgroundImg',
                        {
                            initialValue: data.indexBackgroundImg,
                        })(
                            <ImageUploader />,
                        )}
                </Form.Item>
                <Form.Item label="分享海报图" help="建议尺寸：750*1206px，格式:jpg；内容区大小：750*1150">
                    {getFieldDecorator('sharePosterImg',
                        {
                            initialValue: data.sharePosterImg,
                        })(
                            <ImageUploader />,
                        )}
                </Form.Item>
                <Form.Item label="活动规则图" help="建议尺寸：640*1234px，格式:jpg；内容区大小：640*1040px（画面最上和最下部分分别预留640*97px的空间不要放置文字、logo等关键性内容，小屏手机该部分的画面会被遮挡）">
                    {getFieldDecorator('activityRulesImg',
                        {
                            initialValue: data.activityRulesImg,
                        })(
                            <ImageUploader />,
                        )}
                </Form.Item>
                <Form.Item label="助力页背景图" help="建议尺寸：640*1234px，格式:jpg；内容区大小：640*1040px（画面最上和最下部分分别预留640*97px的空间不要放置文字、logo等关键性内容，小屏手机该部分的画面会被遮挡）">
                    {getFieldDecorator('helpBackgroundImg',
                        {
                            initialValue: data.helpBackgroundImg,
                        })(
                            <ImageUploader />,
                        )}
                </Form.Item>
                <Form.Item label="排行榜背景图" help="建议尺寸：640*1234px，格式:jpg；内容区大小：640*1040px（画面最上和最下部分分别预留640*97px的空间不要放置文字、logo等关键性内容，小屏手机该部分的画面会被遮挡）">
                    {getFieldDecorator('rankingBackgroundImg',
                        {
                            initialValue: data.rankingBackgroundImg,
                        })(
                            <ImageUploader />,
                        )}
                </Form.Item>
                
                
                <Form.Item label="邀请好友按钮图" help="尺寸: 191*47px，格式:png, 背景透明, 图片上需带有 邀请好友 字样">
                    {getFieldDecorator('inviteBtnImg',
                        {
                            initialValue: data.inviteBtnImg,
                        })(
                            <ImageUploader width="191" height="47" />,
                        )}
                </Form.Item>
                
                <Form.Item label="活动规则按钮图" help="尺寸: 191*47px，格式:png, 背景透明, 图片上需带有 活动规则 字样">
                    {getFieldDecorator('ruleBtnImg',
                        {
                            initialValue: data.ruleBtnImg,
                        })(
                            <ImageUploader width="191" height="47" />,
                        )}
                </Form.Item>
                
                <Form.Item label="我要参加按钮图" help="尺寸: 191*47px，格式:png, 背景透明, 图片上需带有 我要参加 字样">
                    {getFieldDecorator('joinBtnImg',
                        {
                            initialValue: data.joinBtnImg,
                        })(
                            <ImageUploader width="191" height="47" />,
                        )}
                </Form.Item>
                
                <Form.Item label="查看排名按钮图" help="尺寸: 191*47px，格式:png, 背景透明, 图片上需带有 查看排名 字样">
                    {getFieldDecorator('topBtnImg',
                        {
                            initialValue: data.topBtnImg,
                        })(
                            <ImageUploader width="191" height="47" />,
                        )}
                </Form.Item>
                
                <Form.Item label="返回首页按钮图" help="尺寸: 191*47px，格式:png, 背景透明, 图片上需带有 返回首页 字样">
                    {getFieldDecorator('homeBtnImg',
                        {
                            initialValue: data.homeBtnImg,
                        })(
                            <ImageUploader width="191" height="47" />,
                        )}
                </Form.Item>
                
                <Form.Item label="帮他助力按钮图" help="尺寸: 191*47px，格式:png, 背景透明, 图片上需带有 帮他助力 字样">
                    {getFieldDecorator('helpBtnImg',
                        {
                            initialValue: data.helpBtnImg,
                        })(
                            <ImageUploader width="191" height="47" />,
                        )}
                </Form.Item>
                
                <Form.Item label="返回按钮图" help="尺寸: 191*47px，格式:png, 背景透明, 图片上需带有 返回 字样">
                    {getFieldDecorator('backBtnImg',
                        {
                            initialValue: data.backBtnImg,
                        })(
                            <ImageUploader width="191" height="47" />,
                        )}
                </Form.Item>
                
                <Form.Item label="生成海报按钮图" help="尺寸: 60*60px，格式:png, 背景透明, 图片上需带有 生成海报 字样">
                    {getFieldDecorator('posterBtnImg',
                        {
                            initialValue: data.posterBtnImg,
                        })(
                            <ImageUploader width="60" height="60" />,
                        )}
                </Form.Item>
                
                <Form.Item label="项目详情按钮图" help="尺寸: 60*60px，格式:png, 背景透明, 图片上需带有 项目详情 字样">
                    {getFieldDecorator('buildingBtnImg',
                        {
                            initialValue: data.buildingBtnImg,
                        })(
                            <ImageUploader width="60" height="60" />,
                        )}
                </Form.Item>

                <Form.Item label="上榜人数限制">
                    <Row>
                        <Col span={6}>
                            {getFieldDecorator('topLimitPersons',
                                {
                                    initialValue: typeof data.topLimitPersons === 'number' ? data.topLimitPersons : 0,
                                })(
                                    <Slider
                                        min={5}
                                        max={100}
                                        step={1}
                                    />,
                                )}
                        </Col>
                        <Col span={6}>
                            {getFieldDecorator('topLimitPersons',
                                {
                                })(
                                    <InputNumber
                                        min={5}
                                        max={100}
                                        style={{ marginLeft: 16 }}

                                    />,
                                )}
                        </Col>
                    </Row>
                </Form.Item>
                <Form.Item label="查看楼盘按钮">
                    {getFieldDecorator('buildingShowPos',
                        {
                            initialValue: data.buildingShowPos || 'index',
                        })(<CheckboxGroup />)}
                </Form.Item>
                <Form.Item label="关联楼盘">
                    {getFieldDecorator('buildingId',
                        {
                            initialValue: data.buildingId,
                        })(
                            <BuildSelect />,
                        )}
                </Form.Item>
                <Form.Item label="生成海报按钮">
                    {getFieldDecorator('posterShowPos', {
                        initialValue: data.posterShowPos || 'index',
                    })(<CheckboxGroup />)}
                </Form.Item>
                <Form.Item wrapperCol={{ span: 15, offset: 8 }}>
                    <div style={{ width: '190px' }}>
                        <Button type="primary" style={{ marginRight: '20px' }} htmlType="submit">保存</Button>
                    </div>
                </Form.Item>
            </Form>
        </>

    )
}

const WrappedBasic = Form.create({ name: 'Basic' })(Basic);

export default WrappedBasic
