/* eslint-disable no-underscore-dangle */
import React, { useEffect, useState } from 'react';

import { Form, Modal, Input, TimePicker, message, Radio, DatePicker, Select } from 'antd';
import moment from 'moment';
import { InitializationFlowHoliday } from '@/services/holidays/holidays';
// const { RangePicker } = DatePicker;
const Synchronize = props => {
  const { onSubumit, handleCancel, visible, msg } = props;
  const [form] = Form.useForm();
  const [yearList, setYearList] = useState([]);
  const [flag, setFlag] = useState(0);
  useEffect(() => {
    form.resetFields();
    if (visible) {
      getYearList(new Date().getFullYear());
      getFormData();
    }
  }, [visible]);
  // 获取表单回显
  const getFormData = () => {
    console.log(msg, 'msg');
    form.setFieldsValue({ restType: 1 });
    setFlag(flag + 1);
  };
  const getYearList = date => {
    const list = [];
    for (let i = date - 10; i < date + 10; i += 1) {
      list.push(i);
    }
    setYearList(list);
  };
  // 提交表单
  const onFinish = () => {
    form.validateFields().then(validate => {
      if (validate) {
        InitializationFlowHoliday({
          year: validate.year.join(','),
          restType: validate.restType,
          type: validate.type,
        }).then(res => {
          if (res.code === 0) {
            message.success('同步成功');
            onSubumit();
          }
        });
      }
    });
  };
  const onValuesChange = (changedValues, allValues) => {
    console.log(changedValues, allValues);
    setFlag(flag + 1);
  };
  return (
    <Modal
      title="一键同步配置"
      visible={visible}
      onOk={onFinish}
      onCancel={handleCancel}
      maskClosable={false}
      destroyOnClose
    >
      <Form
        form={form}
        labelCol={{ span: 5 }}
        wrapperCol={{ span: 18 }}
        initialValues={{ remember: true }}
        onValuesChange={onValuesChange}
      >
        <Form.Item
          label="年份"
          name="year"
          initialValue={[new Date().getFullYear()]}
          rules={[{ required: true, message: '请选择年份' }]}
        >
          <Select mode="multiple" dropdownMatchSelectWidth={false}>
            {yearList.map(item => (
              <Select.Option key={item} value={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item label="类型" name="restType" initialValue={1}>
          <Radio.Group>
            <Radio value={1}>双休</Radio>
            <Radio value={2}>单休</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label="周末休息日"
          name="type"
          initialValue={1}
          style={{ display: form.getFieldValue('restType') === 1 ? 'none' : 'flex' }}
        >
          <Radio.Group>
            <Radio value={1}>周六</Radio>
            <Radio value={2}>周日</Radio>
          </Radio.Group>
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default Synchronize;