import React, { useEffect, useState } from "react";
import { Modal, Form, InputNumber, message, Radio } from "antd";
import * as API from "../api";
import * as TYPE from "../entity";
import LeaveDetail from "./LeaveDetail/index";

interface Props {
  type: number;
  visiable: boolean;
  setVisiable: (value: any) => any;
  data: any;
}

const FormItem = Form.Item;

const CreateModal = (props: Props) => {
  const { type, visiable, setVisiable, data } = props;
  const [form] = Form.useForm();
  const [year, setYear] = useState([]);
  const [yearData, setYearData] = useState<any>();

  useEffect(() => {
    if (visiable && type === 1) {
      API.fetchDetail(1).then((res: any) => {
        const data = res.data || {};
        setYear(data);
        setYearData(data.conditions);
      });
    }
  }, [visiable]);

  useEffect(() => {
    form.setFieldsValue({
      days: data.days,
      advanceDays: data.advanceDays,
      times: data.times,
      years: data.years,
      conditions: data.conditions,
      annualWay: data.annualWay,
      needAdvancePay: data.needAdvancePay,
    });
  }, [data]);

  function submit(item: any) {
    const params = {
      id: data.id,
      type,
      conditions: yearData,
      advanceDays: item.advanceDays,
      years: item.years,
      days: item.days,
      times: item.times,
      annualWay: item.annualWay,
      needAdvancePay: item.needAdvancePay,
    };
    if (type === 10) {
      setVisiable(false);
    } else {
      API.saveApi(params)
        .then((res) => {
          message.success("保存成功");
          setVisiable(false);
        })
        .catch((err) => {
          message.error("请填写参数", err);
        });
    }
  }

  const onAdd = () => {
    setVisiable(false);
  };
  return (
    <Modal
      title={`${TYPE.typeEnum[type]}设置`}
      visible={visiable}
      onOk={form.submit}
      onCancel={() => onAdd()}
      maskClosable={false}
      getContainer={false}
      width={1000}
    >
      <Form
        form={form}
        onFinish={submit}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 15 }}
      >
        <FormItem
          name="days"
          label="假期"
          rules={[{ required: !(type === 1 || type === 8 || type === 6) }]}
          hidden={type === 1 || type === 8 || type === 6 || type === 10}
        >
          <InputNumber min={1} style={{ width: 200 }} addonAfter="天" />
        </FormItem>
        <FormItem
          name="annualWay"
          rules={[{ required: type === 1 }]}
          hidden={!(type === 1)}
          label="年假方式"
        >
          <Radio.Group>
            <Radio value={1}>自然年</Radio>
            <Radio value={2}>转正日期滚动12个月</Radio>
          </Radio.Group>
        </FormItem>
        <FormItem
          name="years"
          label="前置条件(入职需>)"
          rules={[{ required: type === 1 }]}
          hidden={!(type === 1)}
        >
          <InputNumber min={1} style={{ width: 200 }} addonAfter="天" />
        </FormItem>
        <FormItem
          name="advanceDays"
          label="需提前请假"
          rules={[
            {
              required: !(
                type === 3 ||
                type === 8 ||
                type === 5 ||
                type === 10
              ),
            },
          ]}
          hidden={type === 3 || type === 8 || type === 5 || type === 10}
        >
          <InputNumber min={1} style={{ width: 200 }} addonAfter="天" />
        </FormItem>
        <FormItem
          name="times"
          label="月请假次数"
          rules={[{ required: type === 6 || type === 8 }]}
          hidden={!(type === 6 || type === 8)}
        >
          <InputNumber min={1} style={{ width: 200 }} addonAfter="次" />
        </FormItem>
        <FormItem
          name="conditions"
          label="年假范围"
          rules={[{ required: type === 1 }]}
          hidden={!(type === 1)}
        >
          <LeaveDetail
            year={year}
            yearData={yearData}
            setYearData={setYearData}
          />
        </FormItem>
        <FormItem
          name="needAdvancePay"
          label="提前预缴产假保险费"
          rules={[{ required: type === 4 }]}
          hidden={type !== 4}
        >
          <Radio.Group>
            <Radio value>是</Radio>
            <Radio value={false}>否</Radio>
          </Radio.Group>
        </FormItem>
      </Form>
      {type === 10 && (
        <div style={{ textAlign: "center" }}>假期(需审批,不限天数)</div>
      )}
    </Modal>
  );
};

export default CreateModal;