/* eslint-disable prefer-promise-reject-errors */
/*
 * @Description:
 * @Author: leizhe
 * @Date: 2022-05-25 15:07:30
 * @LastEditTime: 2022-08-16 17:27:15
 * @LastEditors: leizhe
 */
import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Select, notification, InputNumber, Tooltip, Row, Col } 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, maxzoom: aa.maxzoom });
    } 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,
          maxZoom: obj.maxzoom,
        };
        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="500px"
      destroyOnClose
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      forceRender
      getContainer={false}
    >
      <Form form={form} onFinish={onSubmit}>
        <Item label="底图级别" style={{ marginTop: '20px' }} labelCol={{ span: 5 }}>
          <Row>
            <Col span={8}>
              <Item
                // label={
                //   <div>
                //     <Tooltip title="同一分级底图中的不同基础底图级别不能相同">
                //       <InfoCircleOutlined
                //         style={{
                //           color: 'rgb(24, 144, 255)',
                //           marginLeft: '0px',
                //           marginRight: '5px',
                //         }}
                //       />
                //     </Tooltip>
                //     <span>最小级别</span>
                //   </div>
                // }

                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} />
              </Item>
            </Col>
            <Col span={3}>
              <div style={{ marginTop: '4px' }}>~</div>
            </Col>
            <Col span={10}>
              <Item
                name="maxzoom"
                rules={[
                  {
                    validator: (rule, value) => {
                      const obj = form.getFieldsValue().zoom;
                      const objmax = form.getFieldsValue().maxzoom;
                      if (objmax < obj) {
                        return Promise.reject('最大级别不能小于最小级别');
                      }
                      return Promise.resolve();
                    },
                  },
                ]}
              >
                <InputNumber min={0} max={99} />
              </Item>
            </Col>
          </Row>
        </Item>
      </Form>
    </Modal>
  );
};
export default BaseMap;