/* eslint-disable indent */
import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, notification } from 'antd';
import {
  GetVectorService,
  bindSchemeBaseMap,
  UpdateSchemPipeNetwork,
  GettMaplayer,
} from '@/services/webConfig/api';
const { Item } = Form;
const { Option } = Select;
const EditModal = props => {
  const { callBackSubmit = () => {}, formObj, visible } = props;
  const [loading, setLoading] = useState(false);
  const [pipeArr, setPipeArr] = useState([]);
  const [tileSlicedData, setTileSlicedData] = useState([]);

  const [form] = Form.useForm();
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
        UpdateSchemPipeNetwork({
          schemename: formObj.schemename,
          servicename: obj.servicename,
          label: obj.label,
          url: obj.url,
          tileMaps: obj.tileMaps,
        }).then(res => {
          setLoading(false);
          if (res.code == '0') {
            form.resetFields();
            callBackSubmit();
            notification.success({
              message: '提示',
              duration: 3,
              description: '修改成功',
            });
          } else {
            notification.error({
              message: '提示',
              duration: 3,
              description: res.msg,
            });
          }
        });
      }
    });
  };

  useEffect(() => {
    if (visible) {
      pipeNetwork();
      renderTileSliced();
      form.setFieldsValue({
        servicename: formObj.servicename,
        tileMaps: formObj.tileMaps?.[0],
        label: formObj.label,
        url: formObj.url,
      });
    } else {
      form.resetFields();
    }
  }, [visible]);

  const renderTileSliced = () => {
    GettMaplayer({
      terminalType: 'base',
      isBaseMap: true,
    })
      .then(res => {
        if (res.code == '0') {
          let newdata = res.data.general.baseMap.layers?.filter(i => i.isVector === 1);
          setTileSlicedData(newdata);
        } else {
          notification.error({
            message: '获取失败',
            description: res.message,
          });
        }
      })
      .catch(err => {
        if (err.message.indexOf('timeout') !== -1) {
          notification.error({
            message: '提示',
            duration: 3,
            description: '请求超时',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: err.message,
          });
        }
      });
  };

  // 获取管网及默认底图
  const pipeNetwork = () => {
    form.resetFields();
    let pipeArr1 = [];
    GetVectorService().then(res => {
      if (res.code === 0) {
        if (res.data.VectorList.length > 0) {
          res.data.VectorList.map(item => {
            pipeArr1.push(item.ServiceName.split('.')[0]);
          });
        }
        setPipeArr(pipeArr1);
      }
    });
  };

  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 4,
    },
    wrapperCol: {
      span: 18,
    },
  };

  // 选择管网
  const handleService = value => {
    form.setFieldsValue({
      label: value,
      // url: `http://{IP}/PandaGIS/MapServer/Export?mapServerName=${value}`,
      url: `http://{IP}/PandaGIS/MapServer/${value}`,
    });
  };

  return (
    <Modal
      title="修改管网"
      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}>
          <Item label="管网" name="servicename" rules={[{ required: true, message: '请选择管网' }]}>
            <Select onChange={handleService} placeholder="请选择管网">
              {pipeArr.length
                ? pipeArr.map((item, index) => {
                    return (
                      <Option key={index} value={item}>
                        {item}
                      </Option>
                    );
                  })
                : ''}
            </Select>
          </Item>
          <Item label="切片管网" name="tileMaps">
            <Select placeholder="请选择管网" allowClear>
              {tileSlicedData.length
                ? tileSlicedData.map((item, index) => {
                    return (
                      <Option key={index} value={item.servicename}>
                        {item.servicename}
                      </Option>
                    );
                  })
                : ''}
            </Select>
          </Item>
          <Item label="标签" name="label">
            <Input placeholder="请输入标签" allowClear />
          </Item>
          <Item label="url" name="url">
            <Input placeholder="请输入url" allowClear />
          </Item>
        </Form>
      )}
    </Modal>
  );
};
export default EditModal;
