import React, { useEffect, useState } from 'react';

import LabelTitleLine from '../../Unit/titleLine/index';
import LabelInput from '../../Unit/textInput/index';
import LabelColorPick from '../../Unit/colorPick/index';
import LabelUploadLinkButton from '../../Unit/labelUploadLinkButton/index';
import LabelControl from '../../Unit/labelControl/index';
import LabelSelect from '../../Unit/LabelSelect/index';
import LabelSwitch from '../../Unit/lableSwitch/index';
import LabelScreenshot from '../../Unit/LabelScreenshot/index';
import LabelPositionButton from '../../Unit/PositionButton/index';
import AddLine from '../../Unit/AddLine/index';
import LabelInputAndDelect from '../../Unit/labelInputAndDel/index';
import LabelselectAndNumberInput from '../../Unit/LabelSelectAndNumberInput/index';
import LabelControlScope from '../../Unit/LabelControlScope/index';
import UploadWrap from '../../Unit/UploadWrap/index';
import LabelTextarea from '../../Unit/HeaderTextarea/index';
import LabelIcon from '../../Unit/LabelIcon/index';
import LabelTwoInput from '../../Unit/LabelTwoInput/index';
import LabelClick from '../../Unit/LabelClick/index';
import LabelNumberStyle from '../../Unit/LabelNumberStyle/index';
import LabelLine from '../../Unit/LabelLine/index';
import LabelTowCheckbox from '../../Unit/LabelTwoCheck/index';
import BorderImg from '../../Unit/BorderImg/index';
import TwoSelect from '../../Unit/TwoSelect/index';
import LabelIcontUploadSelect from '../../Unit/LabelIcontUploadSelect/index';
import LabelCheckbox from '../../Unit/LabelCheckbox/index';
import LabelLabel from '../../Unit/LabelLabel/index';
import LabelSearchSelect from '../../Unit/LabelSearchSelect/index';
import LabelCode from '../../Unit/LabelCode/index';
import LabelInputNumber from '../../Unit/LabelInputNumber/index';
import LabelTabs from '../../Unit/LabelTabs/index';
import LabelControlAndNumberInput from '../../Unit/LabelControlAndNumberInput/index';
import LabelTitle from '../../Unit/LabelTitle/index';
import ClickButton from '../../Unit/ClickButton/index';
import ClickButtons from '../../Unit/ClickButtons/index';
import Icons from '../../Unit/Icons/index';
import LabelNumberInputSelect from '../../Unit/LabelNumberInputSelect/index';
import LabelAlign from '../../Unit/LabelAlign/index';
import ChartColorPick from '../../Unit/chartColorPick/index';
import SelectBtn from '../../Unit/SelectBtn/index';
import ClickButtonUpload from '../../Unit/ClickButtonUpload/index';
import ClickTextButton from '../../Unit/clickTextButton/index';
import LabelRadioGroup from '../../Unit/labelRadioGroup/index';
import Line from '../../Unit/Line/index';
import RadioGroup from '../../Unit/RadioGroup/index';
import CheckboxGroup from '../../Unit/CheckboxGroup/index';
import LabelSwitch2 from '../../Unit/LabelSwitch2/index';
import EventList from '../../Unit/EventList/index';
import RadioTree from '../../Unit/RadioTree/index';
import FooterBtn from '../../Unit/FooterBtn/index';
import Text from '../../Unit/Text/index';
import LabelTexts from '../../Unit/LabelTexts/index';
import ListBy2 from '../../Unit/ListBy2/index';
import LabelCascader from '../../Unit/LabelCascader/index';
import LabelUpload from '../../Unit/LabelUpload/index';
import LabelPopoverTab from '../../Unit/LabelPopoverTab/index';
import Icon from 'src/components/Icon/index';
import CheckTree from '../../Unit/CheckTree/index';
import CockpitList from '../../Unit/CockpitList/index';
import UrlInput from '../../Unit/UrlInput/index';
import SelectIcon from '../../Unit/SelectIcon/index';
import LabelTwoNumberInput from '../../Unit/LabelTwoInputNumber/index';
import { Collapse, Switch, Popconfirm } from 'antd';
import { ILargeScreenSettingProps } from '../../../type/LargeScreenSetting';
import '../style.scss';

import undeveloped_black from '../../image/undeveloped_black.png';
import undeveloped_white from '../../image/undeveloped_white.png';

const { Panel } = Collapse;

function LargeScreenSettingMain(props: ILargeScreenSettingProps) {
  const {
    settingList,
    changeSettingData,
    changeCollapse,
    collapseDefaultActiveKey,
    theme,
    scenes,
    sceneSelectId,
    cockpitList,
    style,
    settingData
  } = props;
  const [dragInfo, setDragInfo] = useState({
    draggable: false,
    oldY: 0,
    midHeight: 0,
    endHeight: 0
  });

  useEffect(() => {
    document.addEventListener('mousemove', moveEvent);
    document.addEventListener('mouseup', upEvent);
    return () => {
      document.removeEventListener('mousemove', moveEvent);
      document.removeEventListener('mouseup', upEvent);
    };
  }, [dragInfo]);

  const moveEvent = (event) => {
    if (dragInfo?.draggable && dragInfo?.midHeight !== 0) {
      let y = dragInfo.oldY - event.pageY + dragInfo.midHeight;
      if (y > 210) {
        setDragInfo({
          ...dragInfo,
          endHeight: y
        });
      } else {
        setDragInfo({
          ...dragInfo,
          endHeight: 210
        });
      }
      //y = null;
    }
  };

  const upEvent = () => {
    if (dragInfo.draggable) {
      setDragInfo({
        ...dragInfo,
        midHeight: dragInfo.endHeight,
        oldY: 0,
        draggable: false
      });
    } else {
      setDragInfo({
        ...dragInfo,
        oldY: 0,
        draggable: false
      });
    }
  };

  //样式配置事件
  const _changeData = (
    value: any,
    key: string | number,
    item: any,
    itemInfoKey: string | number,
    itemInfo: any
  ) => {
    changeSettingData?.({ value, key, item, itemInfoKey, itemInfo });
  };
  const _changeData1 = (
    value: any,
    type: string,
    key: string | number,
    item: any,
    itemInfoKey: string | number,
    itemInfo: any
  ) => {
    changeSettingData?.({ value, key, type, item, itemInfoKey, itemInfo });
  };

  //折叠面板的事件
  const _changeCollapse = (value: string | object, type: string) => {
    changeCollapse?.(value, type);
  };

  const renderComponent = (item, itemInfo): any => {
    if (item?.hidden) {
      return <></>;
    }
    switch (item?.component) {
      case 'labelInput':
        return (
          <LabelInput
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelColorPick':
        return (
          <LabelColorPick
            key={item?.key}
            theme={theme}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelUploadLinkButton':
        return (
          <LabelUploadLinkButton
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelStep':
        return (
          <LabelControl
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelSelect':
        return (
          <LabelSelect
            key={item?.key}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelSwitch':
        return (
          <LabelSwitch
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'LabelScreenshot':
        return (
          <LabelScreenshot
            key={item?.key}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelPositionButton':
        return (
          <LabelPositionButton
            key={item?.key}
            change={(value) =>
              _changeData(value, item.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'addLine':
        return (
          <AddLine
            key={item?.key}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelInputAndDelect':
        return (
          <LabelInputAndDelect
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelselectAndNumberInput':
        return (
          <LabelselectAndNumberInput
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelControlScope':
        return (
          <LabelControlScope
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'uploadWrap':
        return (
          <UploadWrap
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelTextarea':
        return (
          <LabelTextarea
            key={item?.key}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelIcon':
        return (
          <LabelIcon
            key={item?.key}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelLine':
        return (
          <LabelLine
            key={item?.key}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelTowCheckbox':
        return (
          <LabelTowCheckbox
            key={item?.key}
            change={(value, type) =>
              _changeData1(
                value,
                type,
                item?.key,
                item,
                itemInfo?.key,
                itemInfo
              )
            }
            {...item}
          />
        );
      case 'labelTitleLine':
        return (
          <LabelTitleLine
            key={item?.key}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelTwoInput':
        return (
          <LabelTwoInput
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelClick':
        return (
          <LabelClick
            key={item?.key}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelNumberStyle':
        return (
          <LabelNumberStyle
            key={item?.key}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'borderImg':
        return (
          <BorderImg
            key={item?.key}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'twoSelect':
        return (
          <TwoSelect
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelIcontUploadSelect':
        return (
          <LabelIcontUploadSelect
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelCheckbox':
        return (
          <LabelCheckbox
            key={item?.key}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelLabel':
        return <LabelLabel key={item?.key} {...item} />;
      case 'labelSearchSelect':
        return (
          <LabelSearchSelect
            key={item?.key}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelCode':
        return (
          <LabelCode
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelInputNumber':
        return (
          <LabelInputNumber
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelTabs':
        return (
          <LabelTabs
            key={item?.key}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
            tabsRender={renderComponent}
          />
        );
      case 'labelControlAndNumberInput':
        return (
          <LabelControlAndNumberInput
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelTitle':
        return (
          <LabelTitle
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'clickButton':
        return (
          <ClickButton
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'clickButtons':
        return (
          <ClickButtons
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'icons':
        return (
          <Icons
            key={item?.key}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelNumberInputSelect':
        return (
          <LabelNumberInputSelect
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'align':
        return (
          <LabelAlign
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'chartColorPick':
        return (
          <ChartColorPick
            theme={theme}
            key={item?.key}
            change={(arg) => {
              _changeData(arg, item?.key, item, itemInfo?.key, itemInfo);
            }}
            {...item}
          />
        );

      case 'selectBtn':
        return (
          <SelectBtn
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'clickButtonUpload':
        return (
          <ClickButtonUpload
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'clickTextButton':
        return (
          <ClickTextButton
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelRadioGroup':
        return (
          <LabelRadioGroup
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'line':
        return (
          <Line
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'radioGroup':
        return (
          <RadioGroup
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'interaction':
        return (
          <EventList
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'radioTree':
        return (
          <div className="zl-ls-targetWrap">
            <p>{item?.title}</p>
            <RadioTree
              key={item?.key}
              scenes={scenes}
              sceneSelectId={sceneSelectId}
              change={(...rest) =>
                _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
              }
              {...item}
            />
          </div>
        );
      case 'footerBtn':
        return (
          <FooterBtn
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'text':
        return (
          <Text
            {...item}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
          />
        );
      case 'labelTexts':
        return (
          <LabelTexts
            {...item}
            change={(value) =>
              _changeData(value, item?.key, item, itemInfo?.key, itemInfo)
            }
          />
        );

      case 'labelPlaceholder':
        return <></>;
      case 'listBy2':
        return (
          <ListBy2
            key={item?.key}
            change={(rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelCascader':
        return (
          <LabelCascader
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelUpload':
        return (
          <LabelUpload
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelPopoverTab':
        return (
          <LabelPopoverTab
            key={item?.key}
            change={(...rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'checkboxGroup':
        return (
          <CheckboxGroup
            key={item?.key}
            change={(rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelSwitch2':
        return (
          <LabelSwitch2
            key={item?.key}
            change={(rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'checkTree':
        return (
          <div className="zl-ls-targetWrap">
            <p>{item?.title}</p>
            <CheckTree
              key={item?.key}
              scenes={scenes}
              sceneSelectId={sceneSelectId}
              change={(...rest) =>
                _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
              }
              {...item}
            />
          </div>
        );
      case 'cockpitList':
        return (
          <div className="zl-ls-targetWrap">
            <p>{item?.title}</p>
            <CockpitList
              key={item?.key}
              cockpitList={cockpitList}
              change={(rest) =>
                _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
              }
              {...item}
            />
          </div>
        );
      case 'urlInput':
        return (
          <div className="zl-ls-targetWrap">
            <p>{item?.title}</p>
            <UrlInput
              key={item?.key}
              change={(rest) =>
                _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
              }
              {...item}
            />
          </div>
        );
      case 'labelSelectIcon':
        return (
          <SelectIcon
            key={item?.key}
            change={(rest) =>
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo)
            }
            {...item}
          />
        );
      case 'labelTwoNumberInput':
        return (
          <LabelTwoNumberInput
            key={item?.key}
            change={(...rest) => {
              _changeData(rest, item?.key, item, itemInfo?.key, itemInfo);
            }}
            {...item}
          />
        );
      default:
        break;
    }
  };

  const renderElement = (list, index = 1): any => {
    if (list?.length > 0) {
      return (
        <Collapse
          key={index}
          bordered={false}
          style={
            settingData?.title === '自定义地图'
              ? { height: `calc(100% - 10px)` }
              : {}
          }
          // defaultActiveKey={collapseDefaultActiveKey}
          activeKey={collapseDefaultActiveKey}
          onChange={(e) => _changeCollapse(e, 'collapseChange')}
        >
          {Array.isArray(list) &&
            list?.length > 0 &&
            list?.map((item) => {
              if (item?.hidden) {
                return <></>;
              } else if (item?.collapse) {
                return (
                  <Panel
                    key={item?.key}
                    collapsible={item?.collapsibleDisabled ? 'disabled' : ''}
                    header={
                      <div className="zl-large-screen-collapse-header">
                        <span>{item?.blockTitle}</span>
                        {item?.hasSwitch ? (
                          <Switch
                            checked={item?.blockIcon}
                            size="small"
                            onChange={(checked, e) => {
                              e.stopPropagation();
                              _changeCollapse(
                                { checked, key: item?.key },
                                'collapseIcon'
                              );
                            }}
                          />
                        ) : (
                          <></>
                        )}
                      </div>
                    }
                  >
                    {item?.compoentList?.map((item2) => {
                      if (item2?.hidden) {
                        return <></>;
                      } else {
                        if (item2?.collapse) {
                          return renderElement(item?.compoentList, item2.key);
                        } else {
                          return renderComponent(item2, item);
                        }
                      }
                    })}
                  </Panel>
                );
              } else if (item?.collapseType === 'titleSwitch') {
                return (
                  <div
                    className="zl-large-screen-setting-style-wrap"
                    key={item?.key}
                  >
                    <div className="zl-large-screen-setting-style-wrap-title-switch">
                      <span className="zl-large-screen-synchronous-title">
                        {item?.blockTitle}
                      </span>
                      <div className="zl-large-screen-setting-style-wrap-switch">
                        <span className="zl-large-screen-synchronous">
                          同步组件
                        </span>
                        <Popconfirm
                          title="确定取消
                  开启同步组件会清空当
                  前配置,是否继续？"
                          icon={<Icon name="icon-_bell" />}
                          placement="topRight"
                          overlayClassName="zl-large-screen-synchronous-popconfirm"
                          visible={item?.open}
                          onConfirm={() => {
                            _changeCollapse(null, 'confirm');
                          }}
                          onCancel={() => _changeCollapse(null, 'cancel')}
                          okText="确定"
                          cancelText="取消"
                        >
                          <Switch
                            checked={item?.switchValue}
                            size="small"
                            onChange={(checked, e) => {
                              e.stopPropagation();
                              _changeCollapse(checked, 'isSynchronizingStyle');
                            }}
                          />
                        </Popconfirm>
                      </div>
                    </div>
                  </div>
                );
              } else {
                return (
                  <div
                    className="zl-large-screen-setting-style-wrap"
                    key={item?.key}
                  >
                    {item?.blockTitle || item?.blockTitles ? (
                      <LabelTitleLine
                        key={item?.id}
                        label={item?.blockTitle}
                        labels={item?.blockTitles}
                      />
                    ) : (
                      <></>
                    )}
                    {item?.compoentList?.map((item2) => {
                      if (item2?.hidden) {
                        return <></>;
                      } else {
                        return renderComponent(item2, item);
                      }
                    })}
                  </div>
                );
              }
            })}
        </Collapse>
      );
    } else {
      return (
        <div className="zl-large-screen-component-empty">
          <img
            className="black-undeveloped"
            src={undeveloped_black}
            alt="暂未开发"
            width="100%"
            height="100%"
          />
          <img
            className="white-undeveloped"
            src={undeveloped_white}
            alt="暂未开发"
            width="100%"
            height="100%"
          />
          <span className="undeveloped-text">正在开发敬请期待~</span>
        </div>
      );
    }
  };

  return (
    <div
      className="zl-large-screen-setting-wrap"
      id="zl-ls-block-setting"
      style={
        // theme !== 'white'
        //   ? 
          settingData?.title === '自定义地图' &&
            (!settingData?.tabsList || settingData?.tabsList?.length === 0)
            ? dragInfo?.endHeight
              ? {
                  height: dragInfo?.endHeight + 'px',
                  cursor: dragInfo?.draggable ? 'n-resize' : 'default'
                }
              : {
                  height: `calc(100% - 198px)`
                }
            : {
                height: `calc(100% - 90px)`
              }
          // : {
          //     height: `calc(100% - 50px)`
          //   }
      }
    >
      {settingData?.title === '自定义地图' ? (
        <div
          className={'zl-ls-block-title-outerLine'}
          onMouseDown={(e) => {
            setDragInfo({
              ...dragInfo,
              draggable: true,
              oldY: e.pageY,
              midHeight: document.getElementById('zl-ls-block-setting')
                .clientHeight
            });
          }}
        ></div>
      ) : (
        <></>
      )}

      {renderElement(settingList)}
    </div>
  );
}

export default LargeScreenSettingMain;