import React, { useEffect} from "react";
import { Modal, Form, message, Select, Radio, InputNumber } from "antd";
import * as API from '../api';
import useInitial from '@/hooks/useInitail';

const FormItem = Form.Item;

interface Props {
  visiable: boolean;
  setVisiable: (value: boolean) => any;
  setLoading: (value: boolean) => any;
  current?: API.Item;
}

function CreateModal(props: Props) {
  const { visiable, setVisiable, setLoading, current} = props;
  const [form] = Form.useForm();
  const { data } = useInitial<API.outType[], {}>(API.fetchOutsideTypeList, [], {});

  useEffect(() => {
    if (visiable && current?.id) {
      form.setFieldsValue({
        isAllowReimburse: current.isAllowReimburse,
        outsideType: current.outsideType,
        breakfast: current.breakfast,
        lunch: current.lunch,
        dinner: current.dinner,
      });
    } else {
      form.resetFields();
    }
  }, [visiable]);

  const submit = (item:any) => {
    const params = {
      id: current?.id || undefined,
      outsideType: item.outsideType,
      outsideTypeName: data.find(i => i.id == item.outsideType)?.name,
      isAllowReimburse: item.isAllowReimburse,
      breakfast: item.breakfast,
      lunch: item.lunch,
      dinner: item.dinner
    };
    if (current?.id) {
      API.updataApi(params).then(res => { 
      message.success('操作成功');
      setVisiable(false);
      setLoading(true);
    }).catch(e => message.error(e.message));
    } else {
      API.saveApi(params).then(res => { 
      message.success('操作成功');
      setVisiable(false);
      setLoading(true);
    }).catch(e => message.error(e.message));
    }
  };

  return (
    <Modal
      title={current?.id ? "编辑外勤报销标准" : "新增外勤报销标准"}
      visible={visiable}
      onOk={form.submit}
      onCancel={() => setVisiable(false)}
      maskClosable={false}
      getContainer={false}
    >
      <Form
        form={form}
        onFinish={submit}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 15 }}
      >
        <FormItem
          name="isAllowReimburse"
          label="是否允许报销"
          rules={[{ required: true, message: "请选择是否允许报销" }]}
          initialValue={false}
        >
          <Radio.Group>
            <Radio value>是</Radio>
            <Radio value={false}>否</Radio>
          </Radio.Group>
        </FormItem>
        <FormItem
          name="outsideType"
          label="外勤类型"
          rules={[{ required: true, message: "请选择外勤类型" }]}
        >
          <Select
            style={{ width: 200 }}
            placeholder="请选择外勤类型"
            showSearch
            filterOption={(input: any, option: any) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
          >
            {data.map((item: any) => (
              <Select.Option value={item.id} key={item.id}>
                {item.name}
              </Select.Option>
            ))}
          </Select>
        </FormItem>
        <FormItem
          label="餐饮补贴(早餐)"
          name="breakfast"
        >
          <InputNumber
            min={0}
            formatter={(value) => `${value}元/次`}
            style={{ width: 200 }}
          />
        </FormItem>
        <FormItem
          label="餐饮补贴(午餐)"
          name="lunch"
        >
          <InputNumber
            min={0}
            formatter={(value) => `${value}元/次`}
            style={{ width: 200 }}
          />
        </FormItem>
        <FormItem
          label="餐饮补贴(晚餐)"
          name="dinner"
        >
          <InputNumber
            min={0}
            formatter={(value) => `${value}元/次`}
            style={{ width: 200 }}
          />
        </FormItem>
      </Form>
    </Modal>
  );
}

export default CreateModal;