import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, AutoComplete, Button, notification } from 'antd';
import styles from '../SchemeConfig.less'

import {
  GetGISServerMapList,
  publisService
} from '@/services/webConfig/api';


const { Option } = Select;
const AddModal = props => {
  const { callBackSubmit = () => { }, type, formObj, visible,solutionNames } = props;
  const [loading, setLoading] = useState(false);
  const [workSpace, setWorkSpace] = useState('');
  const [serviceName, setServicename] = useState([{
    value: 'geoserver',
    item: 'geoserver'
  }]);
  const [workList, setWorkList] = useState([]);
  const [gsIp, setGsIp] = useState([]);
  const [form] = Form.useForm();
  const { Item } = Form;
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
        if (type === 'add') {
            let query = {
              _version: 9999,
              gsIP: obj.serviceadress,
              gsPort:  obj.port,
              gsAppName: obj.servicename,
              gsUser:  obj.user,
              gsWorkspaceName:  obj.workname,
              gsPwd:  obj.password,
              serviceName:  obj.name,
              solution: solutionNames,
            }
          publisService(query,{timeout:120000})
            .then(res => {
              setLoading(false);
              if (res.success) {
                form.resetFields();
                callBackSubmit();
                notification.success({
                  message: '提示',
                  duration: 3,
                  description:  '新增成功',
                });
                setWorkList([])
                handlelocalStorage('add',obj.serviceadress, obj.servicename)
              } else {
                notification.error({
                  message: '提示',
                  duration: 3,
                  description:  '新增失败',
                });
              }
            })
            .catch(err => {
              notification.error({
                message: '提示',
                duration: 3,
                description:  '新增失败',
              });
              setLoading(false);
            });
        }
      }
    });
  };



  const onFinish = value => { };
  useEffect(() => {
    switch (type) {
      case 'add':
        let gsIp = [];
        let localStorageData = handlelocalStorage('get');
        if (localStorageData) {
          gsIp = localStorageData.map(item => ({
            value: item.gsIp,
            item: item.gsIp
          }));
        }
        setGsIp(gsIp)
        let localIps = ['192.168.12.7', '192.168.19.100']
        let port = localIps.includes(gsIp) ? 8080 : 8088
        form.setFieldsValue({ servicename: serviceName[0].value, port, ...formObj });
        break;
      case 'edit':
        form.setFieldsValue({ ...formObj });
        break;
      default:
        break;
    }
  }, [visible]);

  //存储到localstorage
  const handlelocalStorage = (type, gsIp, gisAppName) => {
    if (!localStorage) return null;
    let result = JSON.parse(localStorage.getItem('metaData'))
    if (type == 'get') {
      return result;
    }
    if (!result || !result.find(item => item.gsIp == gsIp)) {
      if (!result) result = [];
      result.push({
        gsIp,
        gisAppName: [{
          value: gisAppName,
          item: gisAppName
        }]
      })
      localStorage.setItem('metaData', JSON.stringify(result))
      return
    }
    let data = result.find(item => item.gsIp == gsIp)
    let isHasGisAppName = data.gisAppName.find(item => item.value == gisAppName);
    if (isHasGisAppName) return;
    data.gisAppName.push({
      value: gisAppName,
      item: gisAppName
    })
    localStorage.setItem('metaData', JSON.stringify(result))
  };

  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 16,
    },
  };


  //选择工作空间
  const selectWorkspace = () => {
    let obj = form.getFieldsValue();
    form.validateFields(['serviceadress', 'port', 'servicename', 'user', 'password']).then(validate => {
      if (validate) {
        let query = {
          GISServerIP: obj.serviceadress,
          GISServerPort: obj.port,
          gsAppName: obj.servicename,
          gsUser: obj.user,
          gsPwd: obj.password,
          isGeoServer: true,
          _version: 9999,
        }
        GetGISServerMapList(query).then(res => {

          if (Array.isArray(res.data)) {
            const defaultValue= res.data[0]||''
            form.setFieldsValue({ name:defaultValue,workname:defaultValue});
            setWorkList(res.data)
            setWorkSpace(defaultValue)
          }
          else {
            notification.error({
              message: '提示',
              duration: 3,
              description: '获取工作空间失败',
            });
          }
        })
      }
    })

  };
  //选择工作空间
  const handleWorkspace = (value) => {
    form.setFieldsValue({
      workname: value,
      name:value
    })
    setWorkSpace(value)
  }
  const selectIp = (value)=>{
    let localIps = ['192.168.12.7', '192.168.19.100']
    let port = localIps.includes(value) ? 8080 : 8088
    form.setFieldsValue({ port,serviceadress:value });
    
  }
  return (
    <Modal
      title={`${type === 'add' ? '元数据发布' : '编辑'}`}
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: '150px' }}
      width="700px"
      destroyOnClose
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      confirmLoading={loading}
      forceRender={true}
      getContainer={false}
    >
      {visible && (
        <Form form={form} {...layout} onFinish={onFinish}>
          <Item
            label="GIS服务器地址"
            name="serviceadress"
            rules={[{ required: true, message: '请选择服务名' }]}
          >
            <AutoComplete
              placeholder="请输入GIS服务器地址"
              options={gsIp}
              onSelect={selectIp}
            />
          </Item>
          <Item
            label="GIS服务器端口"
            name="port"
            rules={[{ required: true, message: '请输入GIS服务器端口' }]}
          >
            <Input placeholder="请输入GIS服务器端口" allowClear />
          </Item>

          <Item
            label="GIS服务器名"
            name="servicename"
            rules={[{ required: true, message: '请输入GIS服务器名' }]}
          >
            <AutoComplete
              placeholder="Email"
              options={serviceName}
            />
          </Item>
          <Item
            label="用户名称"
            name="user"
            rules={[{ required: true, message: '请输入用户名称' }]}
          >
            <Input placeholder="请输入用户名称" allowClear />
          </Item>
          <Item
            label="用户密码"
            name="password"
            rules={[{ required: true, message: '请输入用户密码' }]}
          >
            <Input.Password placeholder="请输入用户密码" allowClear />
          </Item>
          <Item
            label="工作空间名称"
            name="workname"
            rules={[{ required: true, message: '请选择工作空间名称' }]}
          >
            <div className={styles.imgList}>
              <Select onChange={handleWorkspace} value ={workSpace}>
                {workList.length ? workList.map((item, index) => { return <Option key={index} value={item}>{item}</Option> }) : ''}
              </Select>
              <Button style={{ marginLeft: '0.5rem' }} onClick={() => { selectWorkspace() }}>选择工作空间</Button>
            </div>
          </Item>
          <Item
            label="服务名称"
            name="name"
            rules={[{ required: true, message: '请输入服务名称' }]}
          >
            <Input placeholder="请输入服务名称" allowClear />
          </Item>
        </Form>
      )}
    </Modal>
  );
};
export default AddModal;