import React, { useEffect, useState } from 'react'
import SiteModal from '@/components/Modal/SiteModa';
import { Checkbox, Input, Button, Card, InputNumber, Form, Radio, DatePicker, Switch, Select, message } from 'antd'
import HourOfDaySelect from './HourOfDaySelect'
import DayOfWeekSelect from './DayOfWeekSelect'
import styles from './VisibleIISAgentConfig.less'
import moment from 'moment'
import { tr } from 'voca';
import { EditOutlined, InfoCircleOutlined } from '@ant-design/icons';
const { Item } = Form;

const { TextArea } = Input;
let unitType = { Hour: '小时', Minute: '分钟', Second: '秒' }
const hours = { '1': '星期一', '2': '星期二', '3': '星期三', '4': '星期四', '5': '星期五', '6': '星期六', '7': '星期天' }
const VisibleIISAgentConfig = props => {

    const [loading, setLoading] = useState(false);
    const [previewVisible, setPreviewVisible] = useState(false)
    const [selectRole, setSelectRole] = useState([])
    const [isReentrant, setIsReentrant] = useState(false)
    const [postCheck, setPostCheck] = useState(false)
    const [reenCheck, setReenCheck] = useState(false)
    const [logCheck, setLogCheck] = useState(false)
    const [isEndTimeShow, setIsEndTimeShow] = useState(false)
    const [isLoopShow, setIsLoopShow] = useState(false)
    const [isDayLoopShow, setIsDayLoopShow] = useState(false)
    const [isWeekLoopShow, setIsWeekLoopShow] = useState(false)
    const [waitCheck, setWaitCheck] = useState(false)
    const [isUse, setIsUse] = useState(true)
    const [interval, setInterval] = useState(1)
    const [loop_unit, setLoop_unit] = useState('Hour')
    const [exeType, setExeType] = useState(true)
    const [isType, setIsType] = useState('重复执行')
    const [isTypeValue, setIsTypeValue] = useState('BYLOOP')
    const [time_out, setTime_out] = useState(30)
    const [weekData, setWeekData] = useState([])
    const [exeTime, setExeTime] = useState(moment().format('YYYY-MM-DD 00:00:00'))
    const [selectValues, setSelectValues] = useState([])
    const [form] = Form.useForm();
    const dateFormat = 'YYYY-MM-DD HH:mm:ss';
    const { agentConfig, value, onIISAgentSubmit } = props
    useEffect(() => {
        if (agentConfig) {
            let startTime = agentConfig.LoopMode === 'ByOnce' ? moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(1, 'days') : moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00')
            form.setFieldsValue({
                is_enable: agentConfig.Enabled,
                url_type: agentConfig.Absolute ? true : false,
                url_path: agentConfig.Url,
                request_header: agentConfig.CustomHeader,
                plan_type: agentConfig.LoopMode,
                start_time: agentConfig.StartFrom ? moment(agentConfig.StartFrom, dateFormat) : startTime,
                end_time: agentConfig.EndAt ? moment(agentConfig.EndAt, dateFormat) : '',
                loop_mode: agentConfig.LoopMode,
                interval: agentConfig.Interval,
                loop_unit: agentConfig.LoopUnit,
                hour_of_day: agentConfig.HourOfDay && agentConfig.HourOfDay.split(","),
                day_of_week: agentConfig.DayOfWeek,
                time_out: agentConfig.Timeout || 30,
                post_state: agentConfig.UsePostState,
                reentrant: agentConfig.AllowReentrant,
                enable_log: agentConfig.AllowLog,
            })
            let startTimeValue = agentConfig.LoopMode === 'ByOnce' ? moment().add(1, 'days').format('YYYY-MM-DD 00:00:00') : moment().format('YYYY-MM-DD 00:00:00')
            setExeTime(agentConfig.StartFrom ? agentConfig.StartFrom : startTimeValue)
            setIsUse(agentConfig.Enabled)
            changeLoopMode(agentConfig.LoopMode)
            setReenCheck(agentConfig.AllowReentrant)
            setPostCheck(agentConfig.UsePostState)
            setLogCheck(agentConfig.AllowLog)
            setInterval(agentConfig.Interval)
            setLoop_unit(agentConfig.LoopUnit)
            setWaitCheck(agentConfig.UseTimeout || false)
            setTime_out(agentConfig.Timeout)
            if (agentConfig.LoopMode === 'ByOnce') {
                setIsType('执行一次')
                form.setFieldsValue({
                    type: '执行一次'
                })
                setExeType(false)
            }
            else {
                setIsType('重复执行')
                form.setFieldsValue({
                    type: '重复执行'

                })
                if (agentConfig.LoopMode === 'ByDay') {
                    setSelectValues(agentConfig.HourOfDay.split(','))
                }
                else if (agentConfig.LoopMode === 'ByWeek') {
                    setWeekData(agentConfig.DayOfWeek.split(','))
                }
                setExeType(true)
            }

        } else {
            form.setFieldsValue({
                type: '重复执行',
                url_type: false,
                loop_mode: 'BYLOOP',
                start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00')
            })
            setExeTime(moment().format('YYYY-MM-DD 00:00:00'))
            setIsType('重复执行')
            changeLoopMode('BYLOOP')
            setIsUse(true)
            setInterval(1)
            setLoop_unit('Hour')
        }
    }, [agentConfig])

    useEffect(() => {
        if (value) {
            form.setFieldsValue({
                name: value
            })
            setSelectRole(props.value)
        }
    }, [props])
    const handleCancel = () => {
        setPreviewVisible(false)
    }
    const handleOk = async () => {
        let fv = form.getFieldValue()
        if ((fv.loop_mode === 'ByDay' && !selectValues.length) || (fv.loop_mode === 'ByWeek' && !weekData.length)) {
            message.warning('请选择计划执行日')
            return false
        }
        let data = {
            Url: fv.url_path,
            CustomHeader: fv.request_header || '',
            StartFrom: fv.start_time && fv.start_time.format(dateFormat),
            EndAt: fv.end_time && fv.end_time.format(dateFormat),
            LoopMode: fv.loop_mode === 'ByOnce' ? 'BYLOOP' : fv.loop_mode,
            LoopUnit: loop_unit,
            MonthOfYear: null,
            WeekOfMonth: null,
            DayOfWeek: fv.day_of_week ? fv.day_of_week.toString() : '',
            DayOfMonth: null,
            HourOfDay: fv.hour_of_day && fv.hour_of_day.toString(),
            Interval: interval.toString(),
            UsePostState: fv.post_state,
            AllowReentrant: fv.reentrant,
            AllowLog: fv.enable_log,
            Enabled: isUse,
            Timeout: fv.time_out ? parseInt(fv.time_out) : 30,
            Absolute: fv.url_type,
            SiteInfo: null,
            Name: fv.name,
            Tolerate: null,
            UseTimeout: waitCheck
        }
        fv.time_out ? data.MillisecondsTimeout = parseInt(fv.time_out) : ''
        setPreviewVisible(false)
        await onIISAgentSubmit && onIISAgentSubmit(
            data
        )

    }
    const handleClick = () => {
        if (value) {
            setPreviewVisible(true)
        } else {
            message.error("请先输入方案名称!")
        }


    }
    const onPostChange = (value) => {
        setIsReentrant(value)
        setPostCheck(value)
        form.setFieldsValue({
            post_state: value
        })
    }
    const onReenChange = (value) => {
        setReenCheck(value)
        form.setFieldsValue({
            reentrant: value
        })
    }
    const onLogChange = (value) => {
        setLogCheck(value)
        form.setFieldsValue({
            enable_log: value
        })
    }

    const changeLoopMode = (value) => {
        setIsTypeValue(value)
        switch (value) {
            case "ByOnce":
                setIsEndTimeShow(false)
                setIsLoopShow(true)
                setIsWeekLoopShow(false)
                setIsDayLoopShow(false)
                break
            case "BYLOOP":
                setIsEndTimeShow(true)
                setIsLoopShow(true)
                setIsWeekLoopShow(false)
                setIsDayLoopShow(false)
                break
            case "ByDay":
                setIsEndTimeShow(true)
                setIsLoopShow(false)
                setIsWeekLoopShow(false)
                setIsDayLoopShow(true)
                break
            case "ByWeek":
                setIsEndTimeShow(true)
                setIsLoopShow(false)
                setIsWeekLoopShow(true)
                setIsDayLoopShow(true)
                break

        }

    }
    const onLoopModeChange = (e) => {
        changeLoopMode(e.target.value)
        if (e.target.value === 'BYLOOP') {
            form.setFieldsValue({
                hour_of_day: '',
                day_of_week: ''
            })
        }
    }
    const onChange = (value) => {
        setIsUse(value)
    }
    const handleExe = (e) => {
        let obj = form.getFieldValue()
        let value = e.target.value
        setIsType(value)
        if (value === '执行一次') {
            changeLoopMode('ByOnce')
            setLoop_unit('Second')
            form.setFieldsValue({
                loop_mode: 'ByOnce',
                hour_of_day: '',
                day_of_week: '',
                end_time: obj.start_time
            })
            if (!agentConfig) {
                form.setFieldsValue({
                    start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(1, 'days'),
                    end_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(1, 'days')
                })
                setExeTime(moment().add(1, 'days').format('YYYY-MM-DD 00:00:00'))
            }
            setExeType(false)
        } else {
            changeLoopMode('BYLOOP')
            setExeType(true)
            form.setFieldsValue({
                loop_mode: 'BYLOOP',
                end_time: ''
            })
            if (!agentConfig) {
                form.setFieldsValue({
                    start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00'),
                    hour_of_day: '',
                    day_of_week: ''
                })
                setExeTime(moment().format('YYYY-MM-DD 00:00:00'))
            }
        }
    }
    const onWait = (e) => {
        setWaitCheck(e)
    }
    const changeUnit = (e) => {
        setLoop_unit(e)
    }
    const changeInterval = (e) => {
        setInterval(e)
    }
    const InputTimeOut = (e) => {
        setTime_out(e)
    }
    const changeStartTime = (e) => {
        setExeTime(moment(e).format('YYYY-MM-DD HH:mm:ss'))
        let obj = form.getFieldValue()
        if (obj.loop_mode === 'ByOnce')
            setLoop_unit('Second')
        form.setFieldsValue({
            end_time: moment(e).format('YYYY-MM-DD HH:mm:ss')
        })
    }
    const changeDay = (data) => {
        console.log('data', data);
        if (data) setSelectValues(data)
    }
    const changeWeek = (data) => {
        if (data) setWeekData(data)

    }
    return (
        <div className={styles.agent_container}>
            <Input value={selectRole} disabled={true} />
            <div className={styles.select_btn} onClick={handleClick}><EditOutlined style={{ fontSize: '18px' }} /></div>
            <SiteModal
                {...props}
                title="编辑定时任务"
                bodyStyle={{ width: '100%', minHeight: '100px' }}
                style={{ top: 100, borderRadius: '20px' }}
                width="800px"
                destroyOnClose
                cancelText="取消"
                okText="确认"
                forceRender
                visible={previewVisible}
                onOk={() => handleOk()}
                confirmLoading={loading}
                onCancel={handleCancel}

            >
                <div className={styles.IISAgent_container}>
                    <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
                        <Item
                            label="计划名称"
                            name="name"
                        >
                            <Input placeholder="请输入计划名称" disabled={true} />
                        </Item>

                        <Item
                            label="URL路径"
                        >
                            <Item
                                label=""
                                name="url_type"
                                style={{ marginBottom: '0.2rem' }}
                            >
                                <Radio.Group >
                                    <Radio value={false}>相对路径(便于配置迁移)</Radio>
                                    <Radio value={true}>绝对路径(用于外链)</Radio>
                                </Radio.Group>
                            </Item>
                            <Item
                                label=""
                                name="url_path"
                                style={{ marginBottom: '0' }}
                            >
                                <TextArea rows={3} placeholder="请输入URL名称" />
                            </Item>
                        </Item>

                        <Item
                            label="请求头"
                            name="request_header"
                        >
                            <Input placeholder="请求头,选填" />
                        </Item>
                        <Item
                            label="计划类型"
                            name="type"
                        >

                            <Radio.Group onChange={handleExe}>
                                <Radio.Button value="重复执行">重复执行</Radio.Button>
                                <Radio.Button value="执行一次">执行一次</Radio.Button>
                            </Radio.Group>
                        </Item>
                        {exeType && (<Item
                            label="执行方式"
                            name="loop_mode"
                        >
                            <Radio.Group onChange={onLoopModeChange}>
                                <Radio value={"BYLOOP"}>循环</Radio>
                                <Radio value={"ByDay"}>每天</Radio>
                                <Radio value={"ByWeek"}>每周</Radio>
                            </Radio.Group>
                        </Item>)}
                        <Item
                            label="开始时间"
                            wrapperCol={{ span: 28 }}
                            style={{ marginBottom: '0' }}
                        >
                            <div style={{ display: 'flex' }}>
                                <Item
                                    label=""
                                    name="start_time"
                                    style={{ marginRight: '1rem' }}
                                >
                                    <DatePicker showTime onChange={changeStartTime} />
                                </Item>
                                {
                                    isEndTimeShow && (
                                        <Item
                                            label="结束时间"
                                            name="end_time"
                                        >
                                            <DatePicker showTime />
                                        </Item>
                                    )
                                }
                            </div>

                        </Item>


                        {
                            isLoopShow && (isType === '重复执行') && (
                                <Card style={{ width: 600, margin: '0 0 1rem 3.6rem', height: '8rem' }}>
                                    <div className={styles.loopShow}>
                                        <span> 每</span>
                                        <InputNumber min={0} value={interval} style={{ margin: '0 0.5rem' }} onChange={changeInterval} placeholder="请输入循环周期" />
                                        <Select value={loop_unit} onChange={changeUnit} style={{ width: '8rem', margin: '0 0.5rem' }} >
                                            <Select.Option value="Hour">小时</Select.Option>
                                            <Select.Option value="Minute">分钟</Select.Option>
                                            <Select.Option value="Second">秒</Select.Option>
                                        </Select>
                                        <span> 执行一次</span>
                                    </div>
                                </Card>

                            )
                        }
                        {
                            isDayLoopShow && (
                                <Item
                                    label="日循环"
                                    name="hour_of_day"
                                >
                                    <HourOfDaySelect changeDay={changeDay} />
                                </Item>
                            )
                        }
                        {
                            isWeekLoopShow && (
                                <Item
                                    label="周循环"
                                    name="day_of_week"
                                >
                                    <DayOfWeekSelect changeWeek={changeWeek} />
                                </Item>
                            )
                        }
                        {isTypeValue === 'ByDay' ? !selectValues.length && (<span style={{ color: '#f00' }} className={styles.exeTime} ><InfoCircleOutlined style={{ marginRight: '0.2rem' }} />必须选择计划执行时刻</span>) : ''}

                        {isTypeValue === 'ByWeek' ? !weekData.length && (<span style={{ color: '#f00' }} className={styles.exeTime} ><InfoCircleOutlined style={{ marginRight: '0.2rem' }} />必须选择计划执行时刻</span>) : ''}
                        <Item
                            label="说明"
                        >
                            <div style={{ color: '#909EB6FF', fontSize: '12px' }}>
                                {isType === '执行一次' && (<span>
                                    在{exeTime}执行一次
                                </span>)}
                                {isType === '重复执行' && isTypeValue === 'ByDay' && (<span style={{ color: selectValues.length ? '#909EB6FF' : '#f00' }}>
                                    从{exeTime}开始{selectValues.length ? ',在每天' : ''}{selectValues.length ? selectValues.map((item, index) => {
                                        return item.length > 1 ? `${item}:00${index == selectValues.length - 1 ? '' : ','}` : `0${item}:00${index == selectValues.length - 1 ? '' : ','}`
                                    }) : ''}{selectValues.length ? '执行' : ''}
                                </span>)}
                                {isType === '重复执行' && isTypeValue === 'ByWeek' && (<span style={{ color: weekData.length ? '#909EB6FF' : '#f00' }}>
                                    从{exeTime}开始{weekData.length ? ',在每周' : ''}{weekData.length ? weekData.map((item, index) => {
                                        return `${hours[item]}${index == weekData.length - 1 ? '' : ','}`
                                    }) : ''}{weekData.length && selectValues.length ? selectValues.map((item, index) => {
                                        return item.length > 1 ? `${item}:00${index == selectValues.length - 1 ? '' : ','}` : `0${item}:00${index == selectValues.length - 1 ? '' : ','}`
                                    }) : ''} {weekData.length ? '执行' : ''}
                                </span>)}
                                {isType === '重复执行' && isTypeValue === 'BYLOOP' && (<span style={{ color: '#909EB6FF' }}>
                                    从{exeTime}开始,每{interval}{unitType[loop_unit]}执行一次。
                                </span>)}
                            </div>

                        </Item>
                        <Item
                            label="其他设置"
                            wrapperCol={{ span: 28 }}
                            style={{ marginBottom: '0' }}
                        >      <div style={{ display: 'flex' }}>
                                <div style={{ display: 'flex' }}>
                                    <Item
                                        name="wait"
                                        style={{ marginRight: '0.5rem' }}
                                    >
                                        <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onWait} checked={waitCheck} />
                                    </Item>
                                    <div style={{ paddingTop: '0.3rem' }}>请求等待时间(单位:秒)</div>
                                </div>

                                {waitCheck && (<Item
                                    name="time_out"
                                >
                                    <div>
                                        <InputNumber value={time_out} onChange={InputTimeOut} />
                                    </div>
                                </Item>)}

                            </div></Item>
                        <Item
                            label=" "
                            wrapperCol={{ span: 28 }}
                            colon={false}
                            style={{ marginBottom: '0' }}

                        >    <div style={{ display: 'flex' }}>
                                <Item
                                    name="post_state"
                                    style={{ marginRight: '0.5rem' }}
                                >
                                    <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onPostChange} checked={postCheck} />
                                </Item>
                                <div style={{ paddingTop: '0.3rem' }}>使用POST维持状态(上一次返回结果传入下一次请求)</div>
                            </div>
                        </Item>
                        <Item
                            label=" "
                            wrapperCol={{ span: 28 }}
                            colon={false}
                            style={{ marginBottom: '0' }}

                        >
                            <div style={{ display: 'flex' }}>
                                <Item
                                    style={{ marginRight: '0.5rem' }}
                                    name="reentrant"
                                >
                                    <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onReenChange} disabled={isReentrant} checked={reenCheck} />
                                </Item>
                                <div style={{ paddingTop: '0.3rem' }}>允许重入(上一次未执行完,也会执行下一次请求)</div>
                            </div>
                        </Item>
                        <Item
                            label=" "
                            wrapperCol={{ span: 28 }}
                            colon={false}
                            style={{ marginBottom: '0' }}

                        >
                            <div style={{ display: 'flex' }}>
                                <Item
                                    name="enable_log"
                                    style={{ marginRight: '0.5rem' }}
                                >
                                    <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onLogChange} checked={logCheck} />
                                </Item>
                                <div style={{ paddingTop: '0.3rem' }}>记录日志(小于每分钟一次的请求不会记录)</div>
                            </div>
                        </Item>
                        <Item
                            label="禁用计划"
                            style={{ color: '#f00' }}
                            name="is_enable"
                        >
                            <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={isUse} onChange={onChange} />
                        </Item>
                    </Form>
                </div>
            </SiteModal>
        </div>
    )
}
export default VisibleIISAgentConfig;