/* eslint-disable prefer-promise-reject-errors */
/*
 * @Description:
 * @Author: leizhe
 * @Date: 2022-05-25 15:07:30
 * @LastEditTime: 2022-06-10 15:36:33
 * @LastEditors: leizhe
 */
import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, notification, InputNumber, Tooltip } from 'antd';
import {
  GettMaplayer,
  GetVectorService,
  SetServiceConfig,
  bindSchemeBaseMap,
  SetBaseMapschemeName,
} from '@/services/webConfig/api';
import { InfoCircleOutlined } from '@ant-design/icons';
const { Item } = Form;
const { Option } = Select;
const BaseMap = props => {
  const { visible, onCancel, keepItem, keepProject, callBackSubmit = () => {} } = props;
  const [arr, setArr] = useState([]);
  const [form] = Form.useForm();
  // 删除瓦片

  useEffect(() => {
    console.log(keepItem);
    console.log(keepProject);
    if (visible) {
      let list = [];
      keepItem.baseMapDetail.map(i => {
        list.push(i.zoom);
      });
      setArr(list);
      let aa = keepItem.baseMapDetail.find(i => i.servicename == keepProject);
      form.setFieldsValue({ zoom: aa.zoom });
    } else {
      form.resetFields();
    }
  }, [visible]);

  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        let obj = form.getFieldsValue();
        //   let aa = keepItem.baseMapDetail.find(i => i.servicename == keepProject);
        //   console.log(aa);
        //   aa.zoom = obj.zoom;
        //   let query = {
        //     schemename: keepItem.schemename,
        //     terminalType: 'baseMapscheme',
        //     isBaseMap: 'false',
        //     jsonCfg: JSON.stringify({
        //       baseMap: keepItem.baseMap,
        //       baseMapDetail: keepItem.baseMapDetail,
        //     }),
        //   };
        //   SetServiceConfig(query)
        //     .then(res => {
        //       if (res.msg === 'Ok') {
        //         form.resetFields();
        //         callBackSubmit();
        //         prompt('success', '编辑成功');
        //       } else {
        //         prompt('fail', '编辑失败');
        //       }
        //     })
        //     .catch(err => {});
        let data = {
          schemename: keepItem.schemename,
          servicename: keepProject,
          zoom: obj.zoom,
        };
        SetBaseMapschemeName(data).then(res => {
          if (res.code === 0) {
            form.resetFields();
            callBackSubmit();
            prompt('success', '编辑成功');
          } else {
            prompt('fail', '编辑失败');
          }
        });
      }
    });
  };
  const prompt = (type, content) => {
    if (type == 'success') {
      notification.success({
        message: '提示',
        duration: 3,
        description: content,
      });
    } else {
      notification.error({
        message: '提示',
        duration: 3,
        description: content,
      });
    }
  };

  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 7,
    },
    wrapperCol: {
      span: 15,
    },
  };
  const title = (
    <>
      <span>编辑</span>
      <span style={{ color: 'rgb(24, 144, 255)' }}>{keepProject}</span>
      <span>的级别</span>
    </>
  );
  return (
    <Modal
      title={title}
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: '150px' }}
      width="400px"
      destroyOnClose
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      forceRender={true}
      getContainer={false}
    >
      <Form form={form} {...layout} onFinish={onSubmit}>
        <Item
          label={
            <div>
              <Tooltip title="同一分级底图中的不同基础底图级别不能相同">
                <InfoCircleOutlined
                  style={{
                    color: 'rgb(24, 144, 255)',
                    marginLeft: '0px',
                    marginRight: '5px',
                  }}
                />
              </Tooltip>
              <span>级别</span>
            </div>
          }
          style={{ marginTop: '20px' }}
          name="zoom"
          rules={[
            { required: true, message: '请输入级别' },
            {
              validator: (rule, value) => {
                const obj = form.getFieldsValue().zoom;
                console.log(obj);
                if (arr.indexOf(obj) != -1) {
                  console.log(111);
                  return Promise.reject('已存在该级别的基础底图');
                }
                return Promise.resolve();
              },
            },
          ]}
        >
          <InputNumber min={0} style={{ width: '150px' }} />
        </Item>
      </Form>
    </Modal>
  );
};
export default BaseMap;
