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

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

  useEffect(() => {
    if (props.keepTimeData) {
      if (props.keepTimeData?.time) {
        setVisibleChecked(true);
      }
      if (props.keepTimeData?.Unit === '月') {
        setValue('month');
        setCycleLen(props.keepTimeData.CycleLen);
        setstartLen(props.keepTimeData.StartLen);
        if (props.keepTimeData.StartExecLen + props.keepTimeData.StartLen < 32) {
          setMonthType1(1);
          setMonthDayType1(props.keepTimeData.StartExecLen + props.keepTimeData.StartLen);
        } else if (props.keepTimeData.StartExecLen + props.keepTimeData.StartLen < 63) {
          setMonthType1(2);
          setMonthDayType1(props.keepTimeData.StartExecLen - 31 + props.keepTimeData.StartLen);
        } else if (props.keepTimeData.StartExecLen + props.keepTimeData.StartLen < 94) {
          setMonthType1(3);
          setMonthDayType1(props.keepTimeData.StartExecLen - 62 + props.keepTimeData.StartLen);
        } else if (props.keepTimeData.StartExecLen + props.keepTimeData.StartLen < 187) {
          setMonthType1(6);
          setMonthDayType1(props.keepTimeData.StartExecLen - 155 + props.keepTimeData.StartLen);
        } else if (props.keepTimeData.StartExecLen + props.keepTimeData.StartLen < 373) {
          setMonthType1(12);
          setMonthDayType1(props.keepTimeData.StartExecLen - 341 + props.keepTimeData.StartLen);
        }

        if (props.keepTimeData.EndExecLen + props.keepTimeData.StartLen < 32) {
          setMonthType2(1);
          setMonthDayType2(props.keepTimeData.EndExecLen + props.keepTimeData.StartLen);
        } else if (props.keepTimeData.EndExecLen + props.keepTimeData.StartLen < 63) {
          setMonthType2(2);
          setMonthDayType2(props.keepTimeData.EndExecLen - 31 + props.keepTimeData.StartLen);
        } else if (props.keepTimeData.EndExecLen + props.keepTimeData.StartLen < 94) {
          setMonthType2(3);
          setMonthDayType2(props.keepTimeData.EndExecLen - 62 + props.keepTimeData.StartLen);
        } else if (props.keepTimeData.EndExecLen + props.keepTimeData.StartLen < 187) {
          setMonthType2(6);
          setMonthDayType2(props.keepTimeData.EndExecLen - 155 + props.keepTimeData.StartLen);
        } else if (props.keepTimeData.EndExecLen + props.keepTimeData.StartLen < 373) {
          setMonthType2(12);
          setMonthDayType2(props.keepTimeData.EndExecLen - 341 + props.keepTimeData.StartLen);
        }
      } else if (props.keepTimeData?.Unit === '周') {
        setCycleLen(props.keepTimeData.CycleLen);
        let zix = weekArr[props.keepTimeData.StartLen - 1]; // 执行开始周
        setValue('week');
        setstartLen(props.keepTimeData.StartLen);
        setCities(cityData[zix][props.keepTimeData.StartExecLen - 1]);
        setSecondCity(cityData[zix][props.keepTimeData.EndExecLen - 1]);
      } else if (props.keepTimeData?.Unit === '日') {
        setValue('day');
        setCycleLen(props.keepTimeData.CycleLen);
      } else if (props.keepTimeData?.Unit === '小时') {
        setValue('hour');
        setCycleLen(props.keepTimeData.CycleLen);
      }
    } 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') {
      setCycleLen(1);
      setstartLen(1);
      setCities('周一');
      setSecondCity('周日');
    } else if (e.target.value === 'month') {
      setCycleLen(1);
      setstartLen(1);
      setMonthType1(1);
      setMonthType2(1);
      setMonthDayType1('1');
      setMonthDayType2('31');
    }
    setValue(e.target.value);
  };

  React.useImperativeHandle(ref, () => ({
    // test即为子组件暴露给父组件的方法
    getdata: {
      CycleLen,
      MonthType1,
      MonthType2,
      MonthDayType1,
      MonthDayType2,
      cities,
      secondCity,
      startLen,
      Unit,
      provinceData: cityData[detailNumToWeek({ type: 'now', day: startLen })],
    },
  }));
  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>
          <Select
            value={CycleLen}
            style={{
              width: 60,
              marginLeft: '3px',
            }}
            onChange={value => {
              setCycleLen(value);
            }}
            options={[1, 2, 3].map(province => ({
              label: province,
              value: province,
            }))}
          />
          <span
            style={{
              margin: '5px',
            }}
          >
            周一次
          </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 === 1) {
                  value > MonthDayType1 && setMonthDayType1(value);
                }
                if (MonthType2 === 1) {
                  value > MonthDayType2 && setMonthDayType2('31');
                }
              }}
              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 < MonthType2) {
                setMonthType1(1);
                setMonthType2(1);
                if (MonthDayType1 < startLen) {
                  setMonthDayType1(startLen);
                }
                if (MonthDayType2 < startLen) {
                  setMonthDayType2('31');
                }
              }
            }}
            options={[1, 2, 3, 6, 12].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 ([1, 2, 3, 6, 12].indexOf(value) > [1, 2, 3, 6, 12].indexOf(MonthType2)) {
                setMonthType2(value);
              }
              if (value === 1) {
                setMonthDayType1(startLen);
              }
            }}
            value={MonthType1}
            options={[1, 2, 3, 6, 12]
              .slice(0, [1, 2, 3, 6, 12].indexOf(CycleLen) + 1)
              .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 === 1 && city < startLen ? true : false,
            }))}
          />
          <span>日到第</span>

          <Select
            key="MonthType2"
            style={{
              width: 65,
              margin: '0 5px',
            }}
            value={MonthType2}
            onChange={value => setMonthType2(value)}
            options={[1, 2, 3, 6, 12]
              .slice(0, [1, 2, 3, 6, 12].indexOf(CycleLen) + 1)
              .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>
        </>
      );
    } 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 change = e => {
    setVisibleChecked(e);
  };

  return (
    <div className={styles.baseForm}>
      {Unit && (
        <Row>
          <Col span={24}>
            <Form.Item
              labelCol={{ span: 5 }}
              name="zqms"
              label={
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <Tooltip title="当类型为扫码巡检时，此时的周期配置为消息提醒的时间周期">
                    <InfoCircleOutlined
                      style={{
                        color: 'rgb(24, 144, 255)',
                        marginLeft: '5px',
                        marginRight: '3px',
                      }}
                    />
                  </Tooltip>
                  周期模式
                </div>
              }
              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 === 'week' || Unit === 'month') && (
            <Col span={24}>
              <Form.Item labelCol={{ span: 5 }} name="time" label="制定执行时间">
                <Switch
                  checkedChildren="开启"
                  unCheckedChildren="关闭"
                  checked={visibleChecked}
                  onChange={change}
                />
              </Form.Item>
            </Col>
          )}

          {visibleChecked && 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);
