import React, { useState, useEffect } from 'react';
import { Form, Button, Switch, message } from 'antd';
import router from 'umi/router';
import BuildSelect from '@/components/SelectButton/BuildSelect2'
import ChannelSelect from '@/components/SelectButton/channelSelect'
import QrcodeType from '../../../components/SelectButton/QrcodeType'
import QrText from './components/qrText'
import apis from '../../../services/apis';
import request from '../../../utils/request';

const header = props => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [visible, setVisible] = useState(true)

    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [targetType, setTargetType] = useState()

    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [buildingId, setBuildingId] = useState()

    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [targetName, setTargetName] = useState()

    // eslint-disable-next-line react-hooks/rules-of-hooks
    useEffect(() => {

    }, [])

    function addQrcode(params) {
        request({ ...apis.qrcode.add, data: { ...params } }).then(() => {
            //   setData(data)
            router.go(-1)
        }).catch(err => {
            console.log(err)
            // message.info(err.msg || err.message)
        })
    }

    function handleSubmit(e) {
        e.preventDefault();
        props.form.validateFields((err, values) => {
            if (!err) {
                if (targetType === 'project') {
                    values.targetId = values.buildingId
                    values.targetName = targetName
                } else {
                    values.targetId = values.targetName.id
                    values.targetName = values.targetName.name
                }
                console.log(values)
                addQrcode(values)
            }
        },
        )
    }

    // switch
    function onChange(checked) {
        console.log(`switch to ${checked}`);
        setVisible(checked)
        props.form.resetFields(['targetName', 'targetType', []]);
        // props.form.resetFields([targetName, targetType])
        // props.form.setFieldsValue({
        //     targetName: '',
        //     targetType: '',
        // });
        setTargetType()
        // if()
        setBuildingId()

    }
    // QrcodeType
    function onTtypeChange(values) {
        console.log(`onTtypeChange to ${values}`);
        setTargetType(values)

        props.form.setFieldsValue({
            targetName: '',
        });
    }

    // BuildingChange
    function onBuildingChange(values, e) {
        console.log(`onBuildingChange to ${values}`, e);
        setBuildingId(values)
        setTargetName(e.buildingName)

        props.form.setFieldsValue({
            targetName: '',
        });
    }

    // BuildingChange
    function onTargetName(values) {
        console.log(`onTargetName to ${values}`);

    }


    const { getFieldDecorator } = props.form

    return (

        <>
            <Form labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
                <Form.Item label="是否关联项目">
                    {getFieldDecorator('a', {
                        initialValue: true,
                        rules: [{ required: true, message: '' }],
                    })(<Switch onChange={onChange} defaultChecked />)}
                </Form.Item>
                {visible && <Form.Item label="关联项目">
                    {getFieldDecorator('buildingId', {
                        rules: [{ required: true, message: '请选择关联项目' }],
                    })(<BuildSelect onChange={onBuildingChange} />)}
                </Form.Item>}
                <Form.Item label="二维码内容类型">
                    {getFieldDecorator('targetType', {
                        rules: [{ required: true, message: '请选择二维码内容类型' }],
                    })(<QrcodeType visible={visible} onChange={onTtypeChange}></QrcodeType>)}
                </Form.Item>
                {targetType !== 'project' && <Form.Item label="二维码内容">
                    {getFieldDecorator('targetName', {
                        rules: [{ required: true, message: '请选择二维码内容' }],
                    })(<QrText targetType={targetType} buildingId={buildingId} onChange={onTargetName} />)}
                </Form.Item>}
                {targetType === 'project' && <div>
                    {getFieldDecorator('targetName')}
                </div>}
                <Form.Item label="关联渠道">
                    {getFieldDecorator('channelId')(
                        <ChannelSelect />,
                    )}
                </Form.Item>

                <Form.Item wrapperCol={{ span: 15, offset: 8 }}>
                    <div style={{ width: '190px' }}>
                        <Button type="primary" style={{ marginRight: '20px' }} htmlType="submit">立即生成</Button>
                        <Button onClick={() => router.go(-1)} >取消</Button>
                    </div>
                </Form.Item>
            </Form>

        </>
    )
}


const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);
export default WrappedNormalLoginForm
