import React, { useState, useEffect } from 'react';
import { Form, Select, Input, Button, Popconfirm, Spin } from 'antd';
import { modifyProduct, getProductList } from '@/services/webConfig/api';
const { Item } = Form;
const { Option } = Select;
const { TextArea } = Input;
const EditForm = props => {
  const { productObj, editCallback, handleDel, userProductsList } = props;
  const [config, setConfig] = useState(''); // 网站配置信息
  const [loading, setLoading] = useState(false);
  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(() => {
    getProductList().then(res => {
      const { code } = res;
      if (code === 0) {
        const {
          data: { AllProducts, UserProducts },
        } = res;
        console.log(UserProducts);
        console.log(productObj);
        let aa = UserProducts.find(i => i.ProductName == productObj.ProductName);
        getData(aa);
      }
    });
  }, [productObj]);

  const getData = aa => {
    if (!productObj.IsUsed) {
      console.log(12);
      setBut(true);
      form.setFieldsValue({ ...productObj });
      if (aa) {
        form.setFieldsValue({ DefaultSetting: aa.DefaultSetting, RouteUrl: aa.RouteUrl });
      }
    } else {
      console.log(34);
      setBut(false);
      form.setFieldsValue({ ...productObj });
      if (aa) {
        form.setFieldsValue({ DefaultSetting: aa.DefaultSetting, RouteUrl: aa.RouteUrl });
      }
    }
  };
  // useEffect(() => {
  //   if (!productObj.IsUsed) {
  //     console.log(12);
  //     setBut(true);
  //     form.setFieldsValue({ ...productObj });
  //     // if (aa) {
  //     //   form.setFieldsValue({ DefaultSetting: aa.DefaultSetting });
  //     // }
  //   } else {
  //     console.log(34);
  //     setBut(false);
  //     form.setFieldsValue({ ...productObj });
  //     // if (aa) {
  //     //   form.setFieldsValue({ DefaultSetting: aa.DefaultSetting });
  //     // }
  //   }
  // }, [productObj]);
  // 提交选择
  const submit = value => {};
  // 提交
  const finished = value => {
    let params = {
      ...value,
      ID: productObj.ID,
    };
    editCallback(params);
  };
  return (
    <Spin spinning={loading} tip="loading...">
      {/* <div style={{ marginLeft: '5%', marginTop: '-5px' }}>配置详情</div> */}
      <div style={{ minHeight: 'calc(100vh  - 252px)', marginTop: '35px' }}>
        <Form form={form} name="formEdit" {...layout} onFinish={finished}>
          <Item
            label="产品包名："
            name="PackageName"
            // rules={[
            //   {
            //     required: true,
            //     pattern: new RegExp(/^[a-z0-9A-Z]+$/),
            //     message: '产品包名必须是英文或者数字',
            //   },
            // ]}
          >
            <Input placeholder="请输入产品包名" allowClear disabled />
          </Item>
          <Item
            label="产品名称："
            name="ProductName"
            // rules={[
            //   {
            //     required: true,
            //     pattern: new RegExp(/^[a-z0-9A-Z]+$/),
            //     message: '产品名称必须是英文或者数字',
            //   },
            // ]}
          >
            <Input placeholder="请输入产品名称" allowClear disabled />
          </Item>
          <Item
            label="产品说明："
            name="Description"
            // rules={[
            //   {
            //     required: true,
            //     pattern: new RegExp(/^[a-z0-9A-Z]+$/),
            //     message: '产品名称必须是英文或者数字',
            //   },
            // ]}
          >
            <Input placeholder="请输入产品说明" disabled />
          </Item>
          <Item
            label="发布状态："
            name="PublishState"
            // rules={[
            //   {
            //     required: true,
            //     message: '请选择发布状态',
            //   },
            // ]}
          >
            <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 addonBefore="//" placeholder="请输入访问路由" allowClear /> */}
                <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>
            {/* <Item wrapperCol={{ span: 8, offset: 8 }}>
              <Popconfirm
                title="确实删除产品"
                placement="right"
                okText="确认"
                cancelText="取消"
                onConfirm={handleDel}
              >
                <Button type="primary" danger>
                  删除
                </Button>
              </Popconfirm>
            </Item> */}
          </div>
        </Form>
      </div>
    </Spin>
  );
};
export default EditForm;
