import React, { useState, useEffect } from 'react';
import { Form, Select, Input, Button, notification, Spin } from 'antd';
import { modifyProduct } from '@/services/webConfig/api';
const { Item } = Form;
const { Option } = Select;
const { TextArea } = Input;
const AddForm = props => {
  const { addCallback } = props;
  const [config, setConfig] = useState(''); // 网站配置信息
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const layout = {
    layout: 'horizontal',
    labelCol: { span: 5 },
    wrapperCol: { span: 16 },
  };
  const environmentList = [
    {
      value: 'production',
      label: '生产环境',
      key: 'production',
    },
    {
      value: 'development',
      label: '开发环境',
      key: 'development',
    },
  ];
  // 提交选择
  const submit = value => {};
  // 提交
  const finished = value => {
    setLoading(true);
    modifyProduct({ ...value, Id: 0 })
      .then(res => {
        if (res.code === 0) {
          notification.success({
            message: '提示',
            duration: 3,
            description: '新增成功',
          });
          addCallback();
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.msg || '新增成功',
          });
        }
      })
      .catch(err => {
        console.error(err);
      })
      .finally(item => {
        setLoading(false);
      });
  };
  return (
    <Spin spinning={loading} tip="loading...">
      <div style={{ minHeight: 'calc(100vh  - 252px)', marginTop: '20px' }}>
        <Form form={form} name="formAdd" {...layout} onFinish={finished}>
          <Item
            label="产品名称:"
            name="ProductName"
            rules={[
              {
                required: true,
                pattern: new RegExp(/^[a-z0-9A-Z]+$/),
                message: '产品名称必须是英文或者数字',
              },
            ]}
          >
            <Input placeholder="请输入产品名称" allowClear />
          </Item>
          <Item
            label="产品别名:"
            name="ProductAlias"
            // rules={[
            //   {
            //     required: true,
            //     message: '请输入产品别名',
            //   },
            // ]}
          >
            <Input placeholder="请输入产品别名" allowClear />
          </Item>
          <Item
            label="产品环境:"
            name="Environment"
            rules={[
              {
                required: true,
                message: '请选择产品环境',
              },
            ]}
          >
            <Select placeholder="请选择产品环境">
              {environmentList &&
                environmentList.map(item => (
                  <Option value={item.value} key={item.key}>
                    {item.label}
                  </Option>
                ))}
            </Select>
          </Item>
          <Item
            label="入口url"
            name="StartUrl"
            rules={[
              {
                required: true,
                message: '请输入入口url',
              },
            ]}
          >
            <Input addonBefore="//" placeholder="请输入入口url" allowClear />
          </Item>
          <Item
            label="默认配置"
            name="DefaultSetting"
            rules={[
              {
                required: false,
                message: '请输入默认配置',
              },
            ]}
          >
            <TextArea
              placeholder="请输入默认配置"
              allowClear
              autoSize={{ minRows: 3, maxRows: 5 }}
            />
          </Item>
          <Item wrapperCol={{ span: 7, offset: 7 }}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Item>
        </Form>
      </div>
    </Spin>
  );
};
export default AddForm;