import React, { Component } from 'react'
import { Row, Col, Form, Input, Spin, Radio, Switch } from 'antd'
import { AntIcon } from 'components'
import { cloneDeep } from 'lodash'
import { api } from 'common/api'

const initialValues = { requestType: 2, startNow: 0, doOnce: 1, timerType: 1, executeType: 1 }

export default class form extends Component {
    state = {
        // 加载状态
        loading: true,
        timerType: 1,
        requestType: 2,
    }
    // 表单实例
    form = React.createRef()

    // 初始化数据
    record = {}

    /**
     * mount后回调
     */
    componentDidMount() {
        this.props.created && this.props.created(this)
    }

    /**
     * 填充数据
     * 可以在设置this.record之后对其作出数据结构调整
     * [异步,必要]
     * @param {*} params
     */
    async fillData(params) {
        if (params.id) {
            this.record = (await api.sysTimersDetail({ id: params.id })).data
        }
        this.record = {
            ...this.record,
        }
        //#region 从后端转换成前段所需格式
        //#endregion
        this.form.current && this.form.current.setFieldsValue(this.record)

        this.setState({
            loading: false,
        })
    }

    /**
     * 获取数据
     * 可以对postData进行数据结构调整
     * [异步,必要]
     * @returns
     */
    async getData() {
        const form = this.form.current

        const valid = await form.validateFields()
        if (valid) {
            const postData = form.getFieldsValue()
            if (this.record) {
                postData.id = this.record.id
            }
            //#region 从前段转换后端所需格式
            //#endregion
            return postData
        }
    }

    render() {
        const { requestType, timerType } = this.state
        return (
            <Spin spinning={this.state.loading} indicator={<AntIcon type="loading" />}>
                <Form initialValues={initialValues} ref={this.form} className="yo-form">
                    <div className="yo-form-group">
                        <Row gutter={24}>
                            <Col span={12}>
                                <Form.Item
                                    name="jobName"
                                    label="任务名称"
                                    rules={[{ required: true, message: '请选择任务名称' }]}
                                >
                                    <Input autoComplete="off" placeholder="请输入任务名称" />
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item
                                    label="请求地址"
                                    name="requestUrl"
                                    rules={[{ required: true, message: '请输入请求地址' }]}
                                >
                                    <Input autoComplete="off" placeholder="请输入请求地址" />
                                </Form.Item>
                            </Col>
                        </Row>
                        <Form.Item
                            label="请求类型"
                            name="requestType"
                            rules={[{ required: true, message: '请选择请求类型' }]}
                        >
                            <Radio.Group
                                // disabled={this.state.exist}
                                // buttonStyle="solid"
                                onChange={e => this.setState({ requestType: e.target.value })}
                            >
                                {/* <Radio value={0}>
                                    <span>Run</span>
                                </Radio> */}
                                <Radio value={1}>
                                    <span>Get</span>
                                </Radio>
                                <Radio value={2}>
                                    <span>Post</span>
                                </Radio>
                                <Radio value={3}>
                                    <span>Put</span>
                                </Radio>
                                <Radio value={4}>
                                    <span>Delete</span>
                                </Radio>
                            </Radio.Group>
                        </Form.Item>
                        {requestType != 0 && (
                            <Form.Item name="requestHeader" label="请求头">
                                <Input autoComplete="off" placeholder="请输入请求头" />
                            </Form.Item>
                        )}
                        <Form.Item
                            name="requestParameters"
                            label={requestType == 0 ? '配置项参数' : '请求参数'}
                        >
                            <Input
                                autoComplete="off"
                                placeholder={
                                    requestType == 0 ? '请输入配置项参数' : '请输入请求参数'
                                }
                            />
                        </Form.Item>

                        <Row gutter={24}>
                            <Col span={12}>
                                <Form.Item
                                    name="timerType"
                                    label="定时器类型"
                                    rules={[{ required: true, message: '请选择定时器类型' }]}
                                >
                                    <Radio.Group
                                        buttonStyle="solid"
                                        onChange={e => this.setState({ timerType: e.target.value })}
                                    >
                                        <Radio.Button value={1}>
                                            <span>间隔方式</span>
                                        </Radio.Button>
                                        <Radio.Button value={2}>
                                            <span>Cron表达式</span>
                                        </Radio.Button>
                                    </Radio.Group>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                {timerType == 1 && (
                                    <Form.Item
                                        label="执行间隔（秒）"
                                        name="interval"
                                        rules={[
                                            { required: true, message: '请输入执行间隔（秒）' },
                                        ]}
                                    >
                                        <Input
                                            autoComplete="off"
                                            placeholder="请输入执行间隔（秒）"
                                        />
                                    </Form.Item>
                                )}
                                {timerType == 2 && (
                                    <Form.Item
                                        label="任务表达式"
                                        name="cron"
                                        rules={[{ required: true, message: '请输入任务表达式' }]}
                                    >
                                        <Input
                                            autoComplete="off"
                                            placeholder="请输入任务表达式"
                                            addonAfter={
                                                <a
                                                    href="https://www.bejson.com/othertools/cron/"
                                                    target="_Blank"
                                                    rel="noreferrer"
                                                >
                                                    参考
                                                </a>
                                            }
                                        />
                                    </Form.Item>
                                )}
                            </Col>
                        </Row>
                        <Row gutter={24}>
                            <Col span={12}>
                                <Form.Item name="startNow" label="立即执行">
                                    <Switch checkedChildren="是" unCheckedChildren="否" />
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item name="doOnce" label="只执行一次">
                                    <Switch checkedChildren="是" unCheckedChildren="否" />
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={24}>
                            <Col span={12}>
                                <Form.Item
                                    name="executeType"
                                    label="执行类型"
                                    rules={[{ required: true, message: '请选择执行类型' }]}
                                >
                                    <Radio.Group
                                        buttonStyle="solid"
                                        // onChange={e => this.onHouseTypeChange(e)}
                                    >
                                        <Radio.Button value={1}>
                                            <span>并行方式</span>
                                        </Radio.Button>
                                        <Radio.Button value={2}>
                                            <span>串行方式</span>
                                        </Radio.Button>
                                    </Radio.Group>
                                </Form.Item>
                            </Col>
                            <Col span={12}>
                                <Form.Item label="备注" name="remark">
                                    <Input autoComplete="off" placeholder="请输入备注" />
                                </Form.Item>
                            </Col>
                        </Row>
                    </div>
                </Form>
            </Spin>
        )
    }
}
