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

import {
  AddVectorData,
  publisService, GetProjectNames
} from '@/services/webConfig/api';
import {
  PlusCircleOutlined, CloseCircleOutlined
} from '@ant-design/icons';

const { Option } = Select;
const AddModal = props => {
  const { callBackSubmit = () => { }, type, formObj, visible } = props;
  const [loading, setLoading] = useState(false);
  const [attributes, setAttributes] = useState([])
  const [workList, setWorkList] = useState([]);
  const [allData, setAllData] = useState([]);
  const [gsIp, setGsIp] = useState([]);
  const [ports,setPorts]= useState('');
  const [projectNmme, setProjectNmme] = useState([]);
  const [loadingProject,setLoadingProject] =useState(false)
  const [form] = Form.useForm();
  const { Item } = Form;
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
        let attributesObj = {}
        attributes.map((item, index) => {
          let key = obj[`key${index}`]
          attributesObj[`${key}`] = obj[`value${index}`]
        })
        if (type === 'add') {
          let url =allData[obj.name].fileName?`http://${obj.ip}:${obj.port}/${obj.projectName}/${obj.name}/${allData[obj.name].fileName}`:`http://${obj.ip}:${obj.port}/${obj.projectName}/${obj.name}`
          let query = {
            type: obj.type,
            projectName: obj.projectName,
            name: obj.name,
            url,
            attributes: attributesObj ||{},
            ip: obj.ip,
            port: obj.port
          }
          AddVectorData(query)
            .then(res => {
              setLoading(false);
              if (res.msg === '') {
                form.resetFields();
                callBackSubmit();
                notification.success({
                  message: '提示',
                  duration: 3,
                  description: '新增成功',
                });
                handlelocalStorage('add', obj.ip, obj.projectName)
              } else {
                notification.error({
                  message: '提示',
                  duration: 3,
                  description: res.msg,
                });
              }
            })
            .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)
        setAttributes([])
        setProjectNmme([])
        setWorkList([])
        setPorts('')
        let localIps = ['192.168.12.97']
        let port = localIps.includes(gsIp) ? '8083' : '8088'
        form.resetFields();
        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: 4,
    },
    wrapperCol: {
      span: 16,
    },
  };

  const selectIp = (value) => {
    let localIps = ['192.168.12.97']
    let port = localIps.includes(value) ? '8083' : '8088'
    form.setFieldsValue({ port, serviceadress: value });
    setPorts(port)

  }
  // 获取项目名
  const getProject = () => {
 
    const obj = form.getFieldsValue();
    if (obj.ip && obj.port) {
      setLoadingProject(true)
      GetProjectNames({ ip: obj.ip, port: obj.port }).then(res => {
        setLoadingProject(false)
        if (res.msg === 'Ok') {
          if(res.data=='{}'){
            notification.info({
              message: '提示',
              duration: 3,
              description: '该地址下项目为空',
            });
          }
          else{
            notification.success({
              message: '提示',
              duration: 3,
              description: '获取成功',
            });
            let data = Object.values(JSON.parse(res.data))
            setProjectNmme(data)
            if (data.length) {
              form.setFieldsValue({ projectName: data[0] });
              selectProject(data[0])
            }
          }
         
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: '获取失败',
          });
        }
      }).catch(e => {
        console.log('e', e);
      })
    } else {
      message.warning("未输入ip或port")
    }
  }
  const selectProject = (value) => {
    const obj = form.getFieldsValue();
    GetProjectNames({ ip: obj.ip, port: obj.port, projectname: value }).then(response => {
      let newArr = JSON.parse(response.data)
      let workArr = Object.keys(newArr.data)
      console.log('newArr',newArr);
      console.log('workArr',workArr);
      setAllData(newArr.data)
      if (workArr.length) {
        setWorkList(workArr)
        form.setFieldsValue({ name: workArr[0], type: newArr.data[workArr[0]].type });
      }

    })
  }
  const selectName = (value) => {
    form.setFieldsValue({ type: allData[value].type });
  }
  const addExtra = () => {
    let attributesArr = [...attributes]
    attributesArr.push({})
    setAttributes(attributesArr)
  }
  const deleteExtr = (index) => {
    let attributesArr = [...attributes]
    attributesArr.splice(index, 1);
    setAttributes(attributesArr)
  }
  const  inputPort =(e)=>{
    setPorts(e.target.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="IP"
            name="ip"
            rules={[{ required: true, message: '请选择ip地址' }]}
          >
            <AutoComplete
              placeholder="请输入IP"
              options={gsIp}
              onSelect={selectIp}

            />
          </Item>
          <Item
            label="端口"
            name="port"
            rules={[{ required: true, message: '请输入端口' }]}
          >
            <div className={styles.imgList}>
              <Input placeholder="请输入GIS服务器端口" allowClear value={ports} onChange={inputPort} />
              <Button style={{ marginLeft: '0.5rem' }} onClick={getProject} loading={loadingProject}>获取项目名</Button>
            </div>
          </Item>
          <Item
            label="项目名"
            name="projectName"
            rules={[{ required: true, message: '请选择项目名' }]}
          >
            <Select onChange={selectProject}>
              {projectNmme.length ? projectNmme.map((item, index) => { return <Option key={index} value={item}>{item}</Option> }) : ''}
            </Select>
          </Item>
          <Item
            label="数据源名"
            name="name"
            rules={[{ required: true, message: '请选择数据源名' }]}
          >
            <Select onChange={selectName}>
              {workList.length ? workList.map((item, index) => { return <Option key={index} value={item}>{item}</Option> }) : ''}
            </Select>
          </Item>
          <Item
            label="数据类型"
            name="type"
            rules={[{ required: true, message: '请输入数据类型' }]}
          >
            <Input placeholder="请输入数据类型" allowClear disabled />
          </Item>
          <Button size="small" onClick={() => { addExtra() }}>
            新增额外属性
          </Button>
          <div style={{ maxHeight: '14rem', overflowY: 'scroll', marginTop: '0.2rem' }}>
            {attributes.length ? attributes.map((item, index) => {
              return <div key={index} className={styles.containerFileds}>
                <Item
                  label="键"
                  name={`key${index}`}
                  style={{ width: '45%', marginTop: '24px' }}
                >
                  <Input placeholder="" allowClear />
                </Item>
                <Item
                  label="值"
                  name={`value${index}`}
                  style={{ width: '45%', marginTop: '24px' }}
                >
                  <Input placeholder="" allowClear />
                </Item>
                <CloseCircleOutlined
                  onClick={() => { deleteExtr(index) }}
                  style={{
                    fontSize: '16px', color: 'red',
                    cursor: 'pointer'
                  }} />
              </div>
            }) : ''}
          </div>
        </Form>
      )}
    </Modal>
  );
};
export default AddModal;