/* eslint-disable no-lonely-if */
/* eslint-disable prefer-destructuring */
/* eslint-disable no-else-return */
// 基础信息配置
import { Form, Radio, Select, Row, Col } from 'antd';
import React, { useEffect, useRef, useState } from 'react';

import styles from './BaseTimeConfig.less';
const provinceData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const cityData = {
  周一: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  周二: ['周二', '周三', '周四', '周五', '周六', '周日', '下周一'],
  周三: ['周三', '周四', '周五', '周六', '周日', '下周一', '下周二'],
  周四: ['周四', '周五', '周六', '周日', '下周一', '下周二', '下周三'],
  周五: ['周五', '周六', '周日', '下周一', '下周二', '下周三', '下周四'],
  周六: ['周六', '周日', '下周一', '下周二', '下周三', '下周四', '下周五'],
  周日: ['周日', '下周一', '下周二', '下周三', '下周四', '下周五', '下周六'],
};
const BaseConfig = (props, ref) => {
  const Mobj = {
    首: 1,
    次: 2,
    末: 3,
  };
  const weekArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
  const [CycleLen, setCycleLen] = useState(1); // xx周期 一次
  const [MonthType1, setMonthType1] = useState('首'); // 月选择 首次末
  const [MonthType2, setMonthType2] = useState('首');
  const [MonthType3, setMonthType3] = useState('首');
  const [MonthDayType1, setMonthDayType1] = useState('1'); // 月选择-日期
  const [MonthDayType2, setMonthDayType2] = useState('28'); // 月选择-日期
  const [cities, setCities] = useState('周一');
  const [secondCity, setSecondCity] = useState(cityData[provinceData[0]][0]);
  const [startLen, setstartLen] = useState(1); // 开始日期
  const [Unit, setValue] = useState();

  useEffect(() => {
    if (props.keepTimeData) {
      let aa = props.keepTimeData;
      let type = props.keepTimeData.type;
      let num = props.keepTimeData.cycle;
      if (type === '月') {
        setValue('month');
        setCycleLen(num);
        setstartLen(props.keepTimeData.begin);
        // setMonthType3(props.keepTimeData.begin.type);
        setMonthType1(props.keepTimeData.excTime[0].type);
        setMonthType2(props.keepTimeData.excTime[1].type);
        setMonthDayType1(props.keepTimeData.excTime[0].day);
        setMonthDayType2(props.keepTimeData.excTime[1].day);
      } else if (type === '周') {
        setValue('week');
        setstartLen(num);
        let start = props.keepTimeData.excTime[0];
        let data = detailNumToWeek(start);
        let end = props.keepTimeData.excTime[1];
        let data1 = detailNumToWeek(end);
        setCities(data);
        setSecondCity(data1);
      } else if (type === '日') {
        setValue('day');
        setCycleLen(num);
      } else if (type === '小时') {
        setValue('hour');
        setCycleLen(num);
      }
    } else if (props.keepTimeData === '') {
      if (props.type === 'add') {
        setValue('day');
      }
    } else if (props.keepTimeData === null) {
      setValue('day');
    }
  }, [props.keepTimeData]);

  useEffect(() => {
    if (!props.visible) {
      setValue('');
    }
  }, [props.visible]);

  const detailNumToWeek = val => {
    if (val.day === 1) {
      return val.type === 'now' ? '周一' : '下周一';
    } else if (val.day === 2) {
      return val.type === 'now' ? '周二' : '下周二';
    } else if (val.day === 3) {
      return val.type === 'now' ? '周三' : '下周三';
    } else if (val.day === 4) {
      return val.type === 'now' ? '周四' : '下周四';
    } else if (val.day === 5) {
      return val.type === 'now' ? '周五' : '下周五';
    } else if (val.day === 6) {
      return val.type === 'now' ? '周六' : '下周六';
    } else if (val.day === 7) {
      return val.type === 'now' ? '周日' : '下周日';
    }
  };

  const handleProvinceChange = value => {
    let arr = cityData[detailNumToWeek({ type: 'now', day: startLen })];
    if (arr.indexOf(value) > arr.indexOf(secondCity)) {
      setSecondCity(arr[arr.length - 1]);
    }
    setCities(value);
  };
  const onSecondCityChange = value => {
    setSecondCity(value);
  };

  const onChange = e => {
    if (e.target.value === 'hour') {
      setCycleLen(1);
    } else if (e.target.value === 'day') {
      setCycleLen(1);
    } else if (e.target.value === 'week') {
      setstartLen(1);
      setCities('周一');
      setSecondCity('周日');
    } else if (e.target.value === 'month') {
      setCycleLen(1);
      setstartLen(1);
      setMonthType1('首');
      setMonthType2('首');
      setMonthDayType1('1');
      setMonthDayType2('28');
    }
    setValue(e.target.value);
  };

  React.useImperativeHandle(ref, () => ({
    // test即为子组件暴露给父组件的方法
    getdata: {
      CycleLen,
      MonthType1,
      MonthType2,
      // MonthType3,
      MonthDayType1,
      MonthDayType2,
      cities,
      secondCity,
      startLen,
      Unit,
    },
  }));
  const randerZqsz = value => {
    if (value == 'day') {
      return (
        <>
          <Select
            value={CycleLen}
            style={{
              width: 100,
            }}
            onChange={value => {
              setCycleLen(value);
            }}
            options={[1, 2, 3].map(province => ({
              label: province,
              value: province,
            }))}
          />{' '}
          <span
            style={{
              margin: '5px',
            }}
          >
            日一次
          </span>
        </>
      );
    }
    if (value == 'week') {
      return (
        <div>
          <span>从</span>
          <Select
            key="Select1"
            value={startLen}
            style={{
              width: 80,
              margin: '0 5px',
            }}
            onChange={value => {
              setstartLen(value);
              setCities(detailNumToWeek({ type: 'now', day: value }));
              let arr = cityData[provinceData[value - 1]];
              setSecondCity(arr[arr.length - 1]);
            }}
            options={[1, 2, 3, 4, 5, 6, 7].map((city, i) => ({
              label: weekArr[i],
              value: city,
            }))}
          />
          <span>开始</span>
        </div>
      );
    }
    if (value == 'month') {
      return (
        <div style={{ display: 'flex', width: '400px' }}>
          <div>
            <span>工作月将从</span>
            <Select
              key="Select2"
              value={startLen}
              style={{
                width: 65,
                margin: '0 5px',
              }}
              onChange={value => {
                setstartLen(value);
                if (MonthType1 === '首') {
                  value > MonthDayType1 && setMonthDayType1(value);
                }
                if (MonthType2 === '首') {
                  value > MonthDayType2 && setMonthDayType2('28');
                }
              }}
              options={[
                '1',
                '2',
                '3',
                '4',
                '5',
                '6',
                '7',
                '8',
                '9',
                '10',
                '11',
                '12',
                '13',
                '14',
                '15',
                '16',
                '17',
                '18',
                '19',
                '20',
                '21',
                '22',
                '23',
                '24',
                '25',
                '26',
                '27',
                '28',
                // '29',
                // '30',
                // '31',
              ].map(city => ({
                label: city,
                value: city,
              }))}
            />
            <span>日开始，</span>
          </div>
          <Select
            value={CycleLen}
            style={{
              width: 60,
              marginLeft: '3px',
            }}
            onChange={value => {
              setCycleLen(value);
              if (value === 1) {
                setMonthType1('首');
                setMonthType2('首');
                if (MonthDayType1 < startLen) {
                  setMonthDayType1(startLen);
                }
                if (MonthDayType2 < startLen) {
                  setMonthDayType2('28');
                }
              } else if (value === 2) {
                if (MonthType2 === '末') {
                  setMonthType1('首');
                  setMonthType2('首');
                  if (MonthDayType1 < startLen) {
                    setMonthDayType1(startLen);
                  }
                  if (MonthDayType2 < startLen) {
                    setMonthDayType2('28');
                  }
                }
              }
            }}
            options={[1, 2, 3].map(province => ({
              label: province,
              value: province,
            }))}
          />{' '}
          <span
            style={{
              margin: '5px',
            }}
          >
            月一次
          </span>
        </div>
      );
    }
    if (value == 'hour') {
      return (
        <>
          <Select
            defaultValue={1}
            value={CycleLen}
            style={{
              width: 100,
            }}
            onChange={value => {
              setCycleLen(value);
            }}
            options={[1, 2, 3, 4, 6, 8, 12].map(province => ({
              label: province,
              value: province,
            }))}
          />{' '}
          <span
            style={{
              margin: '5px',
            }}
          >
            小时一次
          </span>
        </>
      );
    }
    return <></>;
  };
  const randerZxsj = (secondCity, value) => {
    console.log(secondCity, value, 'secondCity');

    if (value == 'day') {
      if (secondCity == '两') {
        return (
          <>
            {' '}
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                // justifyContent: 'center',
              }}
            >
              <span>0时-</span>
              <Select
                style={{
                  width: 65,
                  margin: '0 5px',
                }}
                options={[
                  1,
                  2,
                  3,
                  4,
                  5,
                  6,
                  7,
                  8,
                  9,
                  10,
                  11,
                  12,
                  13,
                  14,
                  15,
                  16,
                  17,
                  18,
                  19,
                  20,
                  21,
                  22,
                  23,
                ].map(city => ({
                  label: city + '时',
                  value: city + '时',
                }))}
              />
              <span>-24时</span>
            </div>
            <div style={{ color: 'red' }}>* 0:00到24:00</div>
          </>
        );
      }
      if (secondCity == '三') {
        return (
          <>
            <div
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <span>0时-</span>
              <Select
                style={{
                  width: 65,
                  margin: '0 5px',
                }}
                options={[
                  1,
                  2,
                  3,
                  4,
                  5,
                  6,
                  7,
                  8,
                  9,
                  10,
                  11,
                  12,
                  13,
                  14,
                  15,
                  16,
                  17,
                  18,
                  19,
                  20,
                  21,
                  22,
                  23,
                ].map(city => ({
                  label: city + '时',
                  value: city + '时',
                }))}
              />
              <span>-</span>
              <Select
                style={{
                  width: 65,
                  margin: '0 5px',
                }}
                options={[
                  1,
                  2,
                  3,
                  4,
                  5,
                  6,
                  7,
                  8,
                  9,
                  10,
                  11,
                  12,
                  13,
                  14,
                  15,
                  16,
                  17,
                  18,
                  19,
                  20,
                  21,
                  22,
                  23,
                ].map(city => ({
                  label: city + '时',
                  value: city + '时',
                }))}
              />
              <span>-24时</span>
            </div>
            <div style={{ color: 'red' }}>* 0:00到24:00</div>
          </>
        );
      } else {
        return null;

        {
          <div style={{ color: 'red' }}>* 0:00到24:00</div>;
        }
      }
    } else if (value == 'week') {
      return (
        <>
          <span style={{ marginRight: '5px' }}>将会在</span>
          <>
            <Select
              //  defaultValue={provinceData[0]}
              value={cities}
              style={{
                width: 90,
              }}
              onChange={handleProvinceChange}
              options={cityData[detailNumToWeek({ type: 'now', day: startLen })].map(city => ({
                label: city,
                value: city,
              }))}
            />{' '}
            <span
              style={{
                margin: '5px',
              }}
            >
              到
            </span>
            <Select
              style={{
                width: 90,
              }}
              value={secondCity}
              onChange={onSecondCityChange}
              options={cityData[detailNumToWeek({ type: 'now', day: startLen })].map((city, i) => ({
                label: city,
                value: city,
                disabled:
                  i < cityData[detailNumToWeek({ type: 'now', day: startLen })].indexOf(cities),
              }))}
            />
            <span
              style={{
                margin: '5px',
              }}
            >
              日执行任务
            </span>
          </>
        </>
      );
    } else if (value == 'month') {
      return (
        <>
          <span>将会在</span>

          <Select
            style={{
              width: 65,
              margin: '0 5px',
            }}
            onChange={value => {
              setMonthType1(value);
              if (['首', '次', '末'].indexOf(value) > ['首', '次', '末'].indexOf(MonthType2)) {
                setMonthType2(value);
              }
              if (value === '首') {
                setMonthDayType1(startLen);
              }
            }}
            value={MonthType1}
            options={['首', '次', '末'].slice(0, CycleLen).map(city => ({
              label: city,
              value: city,
            }))}
          />
          <span>月</span>
          <Select
            style={{
              width: 65,
              margin: '0 5px',
            }}
            onChange={value => {
              setMonthDayType1(value);
            }}
            value={MonthDayType1}
            options={[
              1,
              2,
              3,
              4,
              5,
              6,
              7,
              8,
              9,
              10,
              11,
              12,
              13,
              14,
              15,
              16,
              17,
              18,
              19,
              20,
              21,
              22,
              23,
              24,
              25,
              26,
              27,
              28,
              // 29,
              // 30,
              // 31,
            ].map(city => ({
              label: city,
              value: city,
              disabled: MonthType1 === '首' && city < startLen ? true : false,
            }))}
          />
          <span
            style={{
              margin: '5px',
            }}
          >
            日到
          </span>

          <Select
            key="MonthType2"
            style={{
              width: 65,
              margin: '0 5px',
            }}
            value={MonthType2}
            onChange={value => setMonthType2(value)}
            options={['首', '次', '末'].slice(0, CycleLen).map(city => ({
              label: city,
              value: city,
              disabled: Mobj[city] < Mobj[MonthType1] ? true : false,
            }))}
          />
          <span>月</span>
          <Select
            style={{
              width: 65,
              margin: '0 5px',
            }}
            onChange={value => {
              setMonthDayType2(value);
            }}
            value={MonthDayType2}
            options={[
              1,
              2,
              3,
              4,
              5,
              6,
              7,
              8,
              9,
              10,
              11,
              12,
              13,
              14,
              15,
              16,
              17,
              18,
              19,
              20,
              21,
              22,
              23,
              24,
              25,
              26,
              27,
              28,
              // 29,
              // 30,
              // 31,
            ].map(city => ({
              label: city,
              value: city,
              disabled: MonthType1 === MonthType2 && city < MonthDayType1 ? true : false,
            }))}
          />
          <span
            style={{
              margin: '5px',
            }}
          >
            执行任务
          </span>
        </>
      );

      /*  <CheckBox 
      key={'month'}
      checkedList={[1]}
      plainOptions={['1号','2号','3号','4号','5号','6号','7号','8号','9号','10号','11号','12号','13号','14号','15号','16号','17号','18号','19号','20号','21号','22号','23号','24号','25号','26号','27号','28号','29号','30号','31号']}
      ></CheckBox> */
    } else if (value == 'hour') {
      if (CycleLen == 1) {
        return (
          <span style={{ color: 'red' }}>*每天 0-1时 1-2时 2-3时 3-4时 4-5时 执行以此类推..</span>
        );
      }
      if (CycleLen == 2) {
        return (
          <span style={{ color: 'red' }}>*每天 0-2时 2-4时 4-6时 6-8时 8-10时 执行以此类推..</span>
        );
      }
      if (CycleLen == 3) {
        return (
          <span style={{ color: 'red' }}>
            *每天 0-3时 3-6时 6-9时 9-12时 12-15时 执行以此类推..
          </span>
        );
      }
      if (CycleLen == 4) {
        return (
          <span style={{ color: 'red' }}>
            *每天 0-4时 4-8时 8-12时 12-16时 16-20时 执行以此类推..
          </span>
        );
      }
      if (CycleLen == 6) {
        return <span style={{ color: 'red' }}>*每天 0-6时 6-12时 12-1时 18-24时 执行</span>;
      }
      if (CycleLen == 8) {
        return <span style={{ color: 'red' }}>*每天 0-8时 8-16时 16-24时 执行</span>;
      }

      if (CycleLen == 12) {
        return <span style={{ color: 'red' }}>*每天 0-12时 12-24时 执行</span>;
      }
    } else {
      return;
    }
  };

  const detailSort = val => {
    let newVal = numChange(val);
    if (newVal < startLen) {
      return true;
    }
    return false;
  };

  const numChange = val => {
    if (val === '周一') {
      return 1;
    } else if (val === '周二') {
      return 2;
    } else if (val === '周三') {
      return 3;
    } else if (val === '周四') {
      return 4;
    } else if (val === '周五') {
      return 5;
    } else if (val === '周六') {
      return 6;
    } else if (val === '周日') {
      return 7;
    }
  };

  return (
    <div className={styles.baseForm}>
      {Unit && (
        <Row>
          <Col span={24}>
            <Form.Item
              labelCol={{ span: 5 }}
              name="zqms"
              label="周期模式"
              initialValue={Unit}
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <div>
                <Radio.Group onChange={onChange} value={Unit}>
                  <Radio value="hour">按小时</Radio>
                  <Radio value="day">按日</Radio>
                  <Radio value="week">按周</Radio>
                  <Radio value="month">按月</Radio>
                  {/* <Radio value={'quarter'}>按季度</Radio>
                    <Radio value={'year'}>按年</Radio> */}
                </Radio.Group>
              </div>
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item labelCol={{ span: 5 }} name="zqsz" label="周期设置">
              {randerZqsz(Unit)}
            </Form.Item>
          </Col>
          {Unit !== 'day' && (
            <Col span={24}>
              <Form.Item labelCol={{ span: 5 }} name="zxsj" label="执行时间">
                <div id="aaa">{randerZxsj(secondCity, Unit)}</div>
              </Form.Item>
            </Col>
          )}
        </Row>
      )}
    </div>
  );
};

export default React.forwardRef(BaseConfig);
