import React, { useEffect } from 'react';
import {Modal, Form, InputNumber, message} from 'antd';
import PmsSelsct from '@/pages/pms/comonents/PmsSelect';
import { getStoragePage } from '@/pages/pms/storage/StorageManage/api';
import usePagination from '@/hooks/usePagination';
import { saveApi } from '../api';

const {Item} = Form;

interface Props {
  item:any
  visible:boolean
  onCancel:Function
  refesh:Function
}

export default function Index(props: Props) {
  const { item, onCancel, visible, refesh } = props;
  const [form] = Form.useForm();
  const { list: storages } = usePagination<PartStorageSpace.PageVO>(getStoragePage, { pageSize: 1000 });

  const OK = () => {
    form.validateFields().then(fileds => {
      const params = {
        id: item?.id,
        storageId: fileds.storageId,
        days: fileds.days,
        amount: fileds.amount
      };
      saveApi(params).then(res => {
        message.success("提交成功");
        onCancel();
        refesh();
      }).catch(e => {
        message.error(e.message);
      });
    });
  };

  useEffect(() => {
    if (visible && item.id) {
      form.setFieldsValue({
        ...item
      });
    }
    if (!visible) {
      form.resetFields();
    }
  }, [visible]);

  return (
    <Modal
      open={visible}
      maskClosable={false}
      onCancel={() => onCancel()}
      onOk={() => OK()}
      title={item.id ? '编辑' : '新增'}
    >
      <Form form={form} labelCol={{span: 6}} wrapperCol={{span: 16}}>
        <Item name="storageId" label="库房" required rules={[{ required: true, message: '请选择库房' }]}>
          <PmsSelsct 
            style={{width: 300}}
            options={storages.map((item: PartStorageSpace.PageVO) => ({ value: item.id, label: item.storageName }))}
          />
        </Item>
        <Item name="days" label="订件时长目标" required rules={[{ required: true, message: '请输入' }]}>
          <InputNumber style={{ width: 300 }} addonAfter="天" />
        </Item>
        <Item name="amount" label="运费目标" required rules={[{ required: true, message: '请输入' }]}>
          <InputNumber style={{ width: 300 }} addonAfter="元" />
        </Item>
      </Form>
    </Modal>
  );
}