import {ChangeEvent, Component} from "react";
import {Input, InputNumber, Switch} from "antd";
import style from "./Http.module.less"
const defaultData:OptionsData = {
    code: "UTF-8",
    redirect: false,
    requestSwitch: true,
    timeout: 5000,
    uploadType: "HttpClient4"

}

class Options extends Component<HttpProps<OptionsData>,HttpState<OptionsData>>{
    constructor(props:HttpProps<OptionsData>) {
        super(props);
        this.state = {
            options:Object.assign({},defaultData,this.props.data)
        }
    }
    domChange(e:ChangeEvent<HTMLInputElement>,key:OptionsDataType){
        const value = e.target.value
        const options = this.state.options
        options[key] =value
        this.setState({options:Object.assign({},{...this.state.options},options)})
        this.change()
    }
    valueChange(value:string|number|boolean,key:string){
        const options = this.state.options
        options[key] =value
        this.setState({options:Object.assign({},{...this.state.options},options)})
        this.change()
    }
    change(){
        this.props.onchange("options",this.state.options)
    }
    render() {
        return <div className={style.HttpContentFlex}>
                <div className={style.HttpOptionFlex}>
                    <div>
                        <div className={style.HttpTitle}>内容编码</div>
                        <p>通常用于在发送请求时对指定内容的字符集，以防止请求出现乱码或服务器无法正确处理请求</p>
                    </div>
                    <div>
                        <Input value={this.state.options.code} onChange={(e)=>this.domChange(e,"code")} defaultValue="UTF-8" />
                    </div>
                </div>
            <div className={style.HttpOptionFlex}>
                <div>
                    <div className={style.HttpTitle}>上传类型</div>
                    <p>所上传文件的文件类型</p>
                </div>
                <div>
                    <Input value={this.state.options.uploadType} onChange={(e)=>this.domChange(e,"uploadType")}  defaultValue="HttpClient4" />
                </div>
            </div>
            <div className={style.HttpOptionFlex}>
                <div>
                    <div className={style.HttpTitle}>请求开关</div>
                    <p>对POST使用multipart/from-data</p>
                </div>
                <div>
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={(e)=>this.valueChange(e,"requestSwitch")} defaultChecked checked={this.state.options.requestSwitch} />
                </div>
            </div>
            <div className={style.HttpOptionFlex}>
                <div>
                    <div className={style.HttpTitle}>超时时间</div>
                    <p>所上传文件的文件类型</p>
                </div>
                <div>
                    <InputNumber  addonAfter="ms" defaultValue={5000} onChange={(e)=>this.valueChange(e,"timeout")} value={this.state.options.timeout} />
                </div>
            </div>
            <div className={style.HttpOptionFlex}>
                <div>
                    <div className={style.HttpTitle}>跟随重定向</div>
                    <p>跟随重定向，会详细记录重定向的过程，可以卡电脑多个重定向的请求</p>
                </div>
                <div>
                    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked checked={this.state.options.redirect} />
                </div>
            </div>
            </div>;
    }
}
export default Options