import React, { useState, useEffect, useRef } from 'react';
import { Form, Modal, Input, message, Radio, Select, AutoComplete } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { AddFlowHoliday, DeleteFlowHoliday } from '@/services/holidays/holidays';
const { confirm } = Modal;
const holidaysList = new Set(['元旦', '春节', '清明节', '劳动节', '端午节', '中秋节', '国庆节']);
const HolidayConfig = props => {
  const { visible, onSubumit, handleCancel, msg } = props;
  const [options, setOptions] = useState([]);
  const [flag, setFlag] = useState(0);
  const [form] = Form.useForm();
  const [formRest] = Form.useForm();
  useEffect(() => {
    if (visible) {
      let obj = msg.msg;
      console.log(msg, 'afsdfasd');
      let list = [...holidaysList].map(item => ({ value: item, label: item }));
      if (obj.nWeek === 6) {
        list.push({ value: '周六', label: '周六' });
      }
      if (obj.nWeek === 7) {
        list.push({ value: '周日', label: '周日' });
      }
      // console.log(list, 'list');
      setOptions(list);
      if (!msg.isRest) {
        confirm({
          title: '确定要改为休息吗?',
          icon: <ExclamationCircleOutlined />,
          content: (
            <div>
              <div>{`${msg.msg.date}(${obj.ncWeek})`}</div>
              <Form
                form={form}
                preserve={false}
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                initialValues={{ remember: true }}
                labelAlign="left"
              >
                <Form.Item
                  label="假期名称"
                  name="dayName"
                  style={{
                    margin: '10px 0 0 0',
                  }}
                >
                  {obj.nWeek === 6 || obj.nWeek === 7 ? (
                    <Select placeholder="请选择假日名称" options={list} />
                  ) : (
                    <AutoComplete placeholder="请输入假日名称" options={msg.holidayOptions} />
                  )}
                </Form.Item>
              </Form>
            </div>
          ),
          okText: '是',
          okType: 'primary',
          cancelText: '否',
          onOk() {
            return new Promise((resolve, reject) => {
              form.validateFields().then(validate => {
                let name;
                name = validate.dayName;
                // if (validate.dayName === '周六') {
                //   name = '周六';
                // }
                // if (validate.dayName === '周日') {
                //   name = '周日';
                // }
                let dayType = 1;
                if (validate.dayName === '周六' || validate.dayName === '周日') {
                  dayType = 2;
                }
                if (holidaysList.has(validate.dayName)) {
                  dayType = 3;
                }
                if (validate.dayName) {
                  AddFlowHoliday({
                    dayName: name,
                    dayType,
                    startDate: msg.date,
                    endDate: msg.date,
                  }).then(res => {
                    if (res.code === 0) {
                      message.success('修改成功');
                      onSubumit();
                      resolve();
                    } else {
                      message.error(res.msg);
                      reject();
                    }
                  });
                } else {
                  message.error('请填写假期名称');
                  reject();
                }
              });
            });
          },
          onCancel() {
            handleCancel();
          },
        });
      } else if (obj.nWeek !== 6 && obj.nWeek !== 7) {
        confirm({
          title: '确定要改为工作吗?',
          icon: <ExclamationCircleOutlined />,
          content: `${msg.date}(${obj.ncWeek})`,
          okText: '是',
          okType: 'primary',
          cancelText: '否',
          onOk() {
            // setCanSelect(true);
            DeleteFlowHoliday({ dayDate: msg.date }).then(res => {
              if (res.code === 0) {
                message.success('删除成功');
                onSubumit();
              } else {
                message.error(res.msg);
              }
            });
          },
          onCancel() {
            handleCancel();
          },
        });
      }
    }
  }, [visible]);
  const onFinish = () => {
    formRest.validateFields().then(values => {
      console.log(values);
      if (values.dayType === 1) {
        DeleteFlowHoliday({ dayDate: msg.date }).then(res => {
          if (res.code === 0) {
            message.success('删除成功');
            onSubumit();
          } else {
            message.error(res.msg);
          }
        });
      } else {
        AddFlowHoliday({
          dayName: values.dayName,
          dayType: values.dayName === '周日' || values.dayName === '周六' ? 2 : 3,
          startDate: msg.date,
          endDate: msg.date,
        }).then(res => {
          if (res.code === 0) {
            message.success('修改成功');
            onSubumit();
          } else {
            message.error(res.msg);
          }
        });
      }
    });
  };
  const onFieldsChange = changedFields => {
    if (changedFields[0].name[0] === 'dayType') {
      setFlag(flag + 1);
    }
  };

  return (
    <div>
      <Modal
        title={null}
        visible={visible && (msg.msg.nWeek === 6 || msg.msg.nWeek === 7) && msg.isRest}
        onOk={onFinish}
        onCancel={handleCancel}
        maskClosable={false}
        destroyOnClose
        width={416}
      >
        <Form
          form={formRest}
          preserve={false}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          initialValues={{ remember: true }}
          onFieldsChange={onFieldsChange}
          labelAlign="left"
        >
          <Form.Item
            label="操作类型"
            name="dayType"
            style={{ margin: '10px 0 0 0' }}
            initialValue={1}
          >
            <Radio.Group>
              <Radio value={1}>改为上班</Radio>
              <Radio value={2}>改为节假日</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            label="假期名称"
            name="dayName"
            rules={[
              {
                required: formRest.getFieldValue('dayType') === 2,
              },
            ]}
            style={{
              margin: '10px 0 0 0',
              display: formRest.getFieldValue('dayType') === 2 ? 'flex' : 'none',
            }}
          >
            {msg.msg.nWeek === 6 || msg.msg.nWeek === 7 ? (
              <Select placeholder="请选择假日名称" options={options} />
            ) : (
              <AutoComplete placeholder="请输入假日名称" options={options} />
            )}
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default HolidayConfig;