import React, { useState } from 'react';
import Icon from '../../Icon/index';
import { Popover } from 'antd';
import { gisChildLayer } from '../../../options/layout';

const LargeScreenAddGISChild = (props: IProps) => {
  const { layerListEvent } = props;
  const [isVisible, setIsVisible] = useState(false); //考关

  const content = (
    <div className="zl-lagre-screen-add-gis-child-popover">
      <p className="zl-lagre-screen-add-gis-child-popover-title">
        <span>点击添加子组件</span>
        <Icon
          name="icon-guanbi1"
          click={() => {
            setIsVisible(false);
          }}
        />
      </p>
      <div className="zl-lagre-screen-add-gis-child-popover-content">
        {gisChildLayer?.length > 0 &&
          gisChildLayer.map((item) => {
            return (
              <div
                key={item?.key}
                className="zl-lagre-screen-add-gis-child-popover-content-div"
                onClick={(e) => {
                  setIsVisible(false);
                  layerListEvent?.(e, item?.key, item, 'addGISLaryer');
                }}
              >
                <img src={item?.img} alt={item?.title} />
                <span>{item?.title}</span>
              </div>
            );
          })}
      </div>
    </div>
  );

  return (
    <div className="zl-lagre-screen-add-gis-child">
      <span>子组件管理</span>
      {/* <Popover
        align={{ offset: [-12, 0] }}
        placement="bottomLeft"
        content={content}
        trigger="click"
        visible={isVisible}
        overlayClassName="zl-lagre-screen-add-gis-child-popover-wrap"
      >
        <span>
          <Icon
            name="icon-tianjia1"
            click={() => {
              setIsVisible(true);
            }}
          />
        </span>
      </Popover> */}
    </div>
  );
};
export default LargeScreenAddGISChild;

export interface IProps {
  layerListEvent: Function;
}