/* eslint-disable default-case */
import React, { useEffect, useState } from 'react';
import SiteModal from '@/components/Modal/SiteModa';
import { AddIISAgentConfig } from '@/services/scheduledTasks/api';

import {
  Input,
  Card,
  InputNumber,
  Form,
  Radio,
  DatePicker,
  Switch,
  Select,
  message,
  notification,
  Checkbox,
} from 'antd';
import { EditOutlined, InfoCircleOutlined } from '@ant-design/icons';
import moment from 'moment';
import HourOfDaySelect from './HourOfDaySelect';
import DayOfWeekSelect from './DayOfWeekSelect';
import styles from './AddModal.less';

const { Item } = Form;

const { TextArea } = Input;
let unitType = { Hour: '小时', Minute: '分钟', Second: '秒' };
const hours = {
  '1': '星期一',
  '2': '星期二',
  '3': '星期三',
  '4': '星期四',
  '5': '星期五',
  '6': '星期六',
  '7': '星期天',
};
const AddModal = props => {
  const { submitCallback, visible, onCancel, type, record } = props;
  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(false);
  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';

  useEffect(() => {
    if (visible) {
      if (type === 'edit') {
        let startTime =
          record.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({
          name: record.Name,
          is_enable: record.Enabled,
          url_type: record.Absolute ? true : false,
          url_path: record.Url,
          request_header: record.CustomHeader,
          plan_type: record.LoopMode,
          start_time: record.StartFrom ? moment(record.StartFrom, dateFormat) : startTime,
          end_time: record.EndAt ? moment(record.EndAt, dateFormat) : null,
          loop_mode: record.LoopMode,
          interval: record.Interval,
          loop_unit: record.LoopUnit,
          hour_of_day: record.HourOfDay && record.HourOfDay.split(','),
          day_of_week: record.DayOfWeek,
          time_out: (record.Timeout !== -1 && record.Timeout / 1000) || 30,
          post_state: record.UsePostState,
          reentrant: record.AllowReentrant,
          enable_log: record.AllowLog,
        });
        if (record.UsePostState) {
          setIsReentrant(true);
        }
        let startTimeValue =
          record.LoopMode === 'ByOnce'
            ? moment()
                .add(1, 'days')
                .format('YYYY-MM-DD 00:00:00')
            : moment().format('YYYY-MM-DD 00:00:00');
        setExeTime(record.StartFrom ? record.StartFrom : startTimeValue);
        setIsUse(record.Enabled);
        changeLoopMode(record.LoopMode);
        setReenCheck(record.AllowReentrant);
        setPostCheck(record.UsePostState);
        setLogCheck(record.AllowLog);
        setInterval(record.Interval);
        setLoop_unit(record.LoopUnit);
        setWaitCheck(record.UseTimeout || false);
        setTime_out((record.Timeout !== -1 && record.Timeout / 1000) || 30);
        if (record.Timeout !== -1) {
          setWaitCheck(true);
        }
        if (record.LoopMode === 'ByOnce') {
          setIsType('执行一次');
          form.setFieldsValue({
            type: '执行一次',
          });
          setExeType(false);
        } else {
          setIsType('重复执行');
          form.setFieldsValue({
            type: '重复执行',
          });
          if (record.LoopMode === 'ByDay') {
            setSelectValues(record.HourOfDay.split(','));
          } else if (record.LoopMode === 'ByWeek') {
            setWeekData(record.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(false);
        setInterval(1);
        setLoop_unit('Hour');
      }
    } else {
      form.resetFields();
      setSelectValues([]);
      setWeekData([]);
      setLogCheck(false);
      setIsReentrant(false);
      setReenCheck(false);
      setPostCheck(false);
      setWaitCheck(false);
      setExeType(true);
    }
  }, [visible]);

  const handleOk = async () => {
    form.validateFields().then(validate => {
      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: isType === '重复执行' ? fv.loop_mode : 'ByOnce',
        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: time_out ? parseInt(time_out) * 1000 : 30000,
        Absolute: fv.url_type,
        SiteInfo: null,
        Name: fv.name,
        Tolerate: null,
        UseTimeout: waitCheck,
      };
      time_out ? (data.MillisecondsTimeout = parseInt(time_out)) : -1;
      if (!waitCheck) {
        data.Timeout = -1;
        data.MillisecondsTimeout = -1;
      }

      AddIISAgentConfig(data).then(res => {
        if (res.code === 0) {
          onCancel();
          submitCallback(fv.type);
          notification.success({
            message: '提示',
            duration: 3,
            description: '新增成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg,
          });
        }
      });
    });
  };

  const onPostChange = value => {
    setIsReentrant(value);
    setReenCheck(false);
    setPostCheck(value);
    form.setFieldsValue({
      post_state: value,
      reentrant: false,
    });
  };
  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(false);
        break;
    }
  };
  const onLoopModeChange = e => {
    changeLoopMode(e.target.value);
    setSelectValues([]);
    setWeekData([]);
    form.setFieldsValue({
      hour_of_day: '',
      day_of_week: '',
    });
  };
  const onChange = e => {
    setIsUse(e.target.checked);
  };
  const handleExe = e => {
    let obj = form.getFieldValue();
    let data = e.target.value;
    setIsType(data);
    if (data === '执行一次') {
      changeLoopMode('ByOnce');
      setLoop_unit('Second');
      form.setFieldsValue({
        loop_mode: 'ByOnce',
        hour_of_day: '',
        day_of_week: '',
        end_time: obj.start_time,
      });
      if (!record) {
        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 (!record) {
        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 => {
    const time = moment(e).format('YYYY-MM-DD HH:mm:ss');
    setExeTime(time);
    let obj = form.getFieldValue();
    if (obj.loop_mode === 'ByOnce') setLoop_unit('Second');
  };

  const changeDay = data => {
    if (data) setSelectValues(data);
  };

  const changeWeek = data => {
    if (data) setWeekData(data);
  };

  return (
    <div className={styles.agent_container}>
      <SiteModal
        {...props}
        title={`${type === 'add' ? '新增' : '编辑'}定时任务`}
        bodyStyle={{ width: '100%', minHeight: '100px' }}
        style={{ top: 100, borderRadius: '20px' }}
        width="800px"
        destroyOnClose
        cancelText="取消"
        okText="确认"
        forceRender
        visible={visible}
        onOk={() => handleOk()}
        onCancel={() => onCancel()}
      >
        <div className={styles.IISAgent_container}>
          <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
            <Item label="计划名称" name="name" rules={[{ required: true }]}>
              <Input placeholder="请输入计划名称" disabled={type === 'edit' ? true : false} />
            </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">
              <Checkbox checked={isUse} onChange={onChange} />
            </Item>
          </Form>
        </div>
      </SiteModal>
    </div>
  );
};
export default AddModal;
