import React, { useState, useEffect } from 'react';
import { Form, Select, Input, Button } from 'antd';
const { Item } = Form;
const { Option } = Select;
const { TextArea } = Input;
const EditForm = props => {
  const { productObj, editCallback, handleDel, userProductsList } = props;
  const [but, setBut] = useState(false);
  const [form] = Form.useForm();
  const layout = {
    layout: 'horizontal',
    labelCol: { span: 4 },
    wrapperCol: { span: 15 },
  };
  const environmentList = [
    {
      value: '已发布',
      label: '已发布',
      key: 'production',
    },
    {
      value: '开发中',
      label: '开发中',
      key: 'development',
    },
  ];
  useEffect(() => {
    if (productObj) {
      let aa = userProductsList.find(i => i.ProductName == productObj.ProductName);
      getData(aa);
    }
  }, [productObj]);

  const getData = aa => {
    if (!productObj.IsUsed) {
      setBut(true);
    } else {
      setBut(false);
    }
    form.setFieldsValue({ ...productObj });
    if (aa) {
      form.setFieldsValue({ DefaultSetting: aa.DefaultSetting, RouteUrl: aa.RouteUrl });
    }
  };

  // 提交
  const finished = value => {
    let params = {
      ...value,
      ID: productObj.ID,
    };
    editCallback(params);
  };
  return (
    <div style={{ minHeight: 'calc(100vh  - 252px)', marginTop: '35px' }}>
      <Form form={form} name="formEdit" {...layout} onFinish={finished}>
        <Item label="产品包名：" name="PackageName">
          <Input placeholder="请输入产品包名" allowClear disabled />
        </Item>
        <Item label="产品名称：" name="ProductName">
          <Input placeholder="请输入产品名称" allowClear disabled />
        </Item>
        <Item label="产品说明：" name="Description">
          <Input placeholder="请输入产品说明" disabled />
        </Item>
        <Item label="发布状态：" name="PublishState">
          <Select placeholder="请选择发布状态" disabled>
            {environmentList &&
              environmentList.map(item => (
                <Option value={item.value} key={item.key}>
                  {item.label}
                </Option>
              ))}
          </Select>
        </Item>
        {but ? (
          <></>
        ) : (
          <>
            <Item
              label="访问路由"
              name="RouteUrl"
              rules={[
                {
                  required: true,
                  message: '请输入访问路由，ip加端口号，示例//localhost:3001',
                },
              ]}
            >
              <Input placeholder="请输入访问路由，ip加端口号，示例//localhost:3001" allowClear />
            </Item>

            <Item
              label="默认配置"
              name="DefaultSetting"
              rules={[
                {
                  required: false,
                  message: '请输入默认配置',
                },
              ]}
            >
              <TextArea
                placeholder='请输入json对象，示例{"name":"张三","age":"18"}'
                autoSize={{ minRows: 3, maxRows: 5 }}
              />
            </Item>
          </>
        )}

        <div style={{ display: 'flex', marginLeft: '35%' }}>
          <Item wrapperCol={{ span: 8, offset: 8 }} style={{ marginRight: '30px' }}>
            <Button type="primary" htmlType="submit" disabled={but}>
              提交
            </Button>
          </Item>
        </div>
      </Form>
    </div>
  );
};
export default EditForm;
