/*
 * @Author: your name
 * @Date: 2022-04-11 15:06:27
 * @Description:
 * @FilePath: /zl-large-screen/src/components/LargeScreenLayout/index.tsx
 */

import React, { Component } from 'react';
import { RecoilRoot } from 'recoil';

import LargeScreenUnitWrap from '../LargeScreenUnitWrap/index';

import {
  ILargeScreenLayoutProps,
  ILargeScreenLayoutState,
  ILayoutOpt
} from '../../type/largeScreenLayout';

import { ConfigProvider } from 'antd';
import moment from 'moment';
import zhCN from 'antd/es/locale/zh_CN';

import './style.scss';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

class LargeScreenLayout extends Component<
  ILargeScreenLayoutProps,
  ILargeScreenLayoutState
> {
  state: ILargeScreenLayoutState;
  constructor(props: ILargeScreenLayoutProps) {
    super(props);
    const {
      sidebarList,
      sidebarEvent,
      sidebarDetail,
      sidebarDetailEvent,
      clickControlBtn,
      cardStyle,
      pageList,
      uiList, //系统UI页面栏数据
      pageEvent,
      pageListEvent,
      pageMenu,
      layerList,
      elementList,
      contextMenus,
      leftIcons,
      rightIcons,
      operationMenus, //悬浮菜单
      zoomList,
      boardEvent,
      elementEvent,
      settingData,
      changeSettingData,
      changeCollapse,
      collapseDefaultActiveKey,
      levelButtons,
      layerListEvent,
      groupMenus,
      mainBackgroundStyle,
      pageBackgroundStyle,
      uiBackgroundStyle,
      allLoading,
      theme,
      isScreening,
      backgroundSize,
      scenes,
      sceneId,
      sceneSelectId,
      sceneExpandIds,
      scenesEvent,
      uiStateOn,
      fitBoard,
      uiLayerList,
      scenceModelSrc, // 场景模型路径
      qiyong3D, //是否启用3D
      pointEvent, //3D页面的点击事件是否禁用
      layerType,
      layer3DList, //3D图层列表
      ZLG, //地图实例对象
      GISChildren, //地图子组件
      Line, //线图层
      Polygon, //面图层
      add3DType, //当前进入3D添加元件的状态
      add3DTypeList, //3D元件状态列表
      layerExpandIds, //3D图层列表展开的id
      layerDateTime, // 日期时间
      fristSelectedElement, //第一次选中的元件
      hoverElement, //鼠标悬浮的元件
      cockpitList, //驾驶舱列表
      PointLayer, //点图层
      PopupLayer, //气泡图层
      Popup,
      contextMenuId
    } = props;

    this.state = {
      comListOpts: [],
      layoutOptsOrder: [], //布局顺序
      sidebarList: sidebarList, //故事集页面栏数据
      sidebarEvent: sidebarEvent, //页面栏的点击事件
      clickControlBtn: clickControlBtn,
      sidebarDetail: sidebarDetail, //故事集页面栏详情数据
      sidebarDetailEvent: sidebarDetailEvent, //页面栏的详情事件
      cardStyle: cardStyle, //卡片的数据
      pageList: pageList, //故事集page页面栏数据
      uiList: uiList, //系统UI页面栏数据
      pageEvent: pageEvent, //故事集page页的事件
      pageListEvent: pageListEvent, //故事集page页的排序事件
      pageMenu: pageMenu, //故事集page页面的右键菜单数据
      layerList: layerList, //图层数据
      elementList: elementList, // 元件数据
      contextMenus: contextMenus, //右键菜单列表
      leftIcons: leftIcons, //左侧按钮列表
      rightIcons: rightIcons, //右侧按钮列表
      zoomList: zoomList, //缩放选择列表
      boardEvent: boardEvent, //画板事件
      elementEvent: elementEvent, //元件事件
      settingData: settingData, //样式配置数据
      changeSettingData: changeSettingData, //样式配置事件
      changeCollapse: changeCollapse, //样式配置折叠面板事件
      collapseDefaultActiveKey: collapseDefaultActiveKey, //初始化选中面板的 key
      levelButtons: levelButtons, //图层列表icon数据
      layerListEvent: layerListEvent, //图层列表事件
      groupMenus: groupMenus, //成组的菜单数据
      mainBackgroundStyle: mainBackgroundStyle, //画布区域样式
      pageBackgroundStyle: pageBackgroundStyle, //页的画布区域样式
      uiBackgroundStyle: uiBackgroundStyle, //ui页的画布区域样式
      allLoading: allLoading, //所有的加载状态
      theme: theme, //当前的主题
      isScreening: isScreening,
      backgroundSize: backgroundSize,
      scenes: scenes,
      sceneId: sceneId,
      sceneSelectId: sceneSelectId,
      sceneExpandIds: sceneExpandIds,
      scenesEvent: scenesEvent,
      uiStateOn: uiStateOn,
      fitBoard: fitBoard,
      uiLayerList: uiLayerList,
      scenceModelSrc: scenceModelSrc,
      qiyong3D: qiyong3D, //是否启用3D
      pointEvent: pointEvent, //3D页面的点击事件是否禁用
      layerType: layerType, //2D/3D
      layer3DList: layer3DList, //3D元件
      ZLG: ZLG, //地图实例对象
      GISChildren: GISChildren, //地图图层数据
      Line: Line, //线图层
      Polygon: Polygon, //面图层
      add3DType: add3DType, //当前进入3D添加元件的状态
      add3DTypeList: add3DTypeList, //3D元件状态列表
      layerExpandIds: layerExpandIds, //3D图层列表展开的id
      layerDateTime: layerDateTime, //3D图层列表展开的id
      fristSelectedElement: fristSelectedElement, //第一次选中的元件
      hoverElement: hoverElement, //鼠标悬浮的元件
      cockpitList: cockpitList, //驾驶舱列表
      PointLayer: PointLayer, //点图层
      PopupLayer: PopupLayer,
      Popup: Popup,
      contextMenuId: contextMenuId
    };
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    const newList = [...prevState.comListOpts];
    const layoutOptsOrder = [...prevState.layoutOptsOrder];
    const {
      layoutOpts,
      layerList,
      sidebarList,
      sidebarEvent,
      clickControlBtn,
      sidebarDetail,
      sidebarDetailEvent,
      cardStyle,
      pageList,
      uiList,
      pageEvent,
      pageListEvent, //故事集page页的排序事件
      pageMenu,
      layerListEvent,
      hierarchyDisabled, // 左侧层级按钮调整是否禁用
      elementList,
      elementEvent,
      leftIcons,
      rightIcons,
      operationMenus,
      zoomList,
      guidesData, // 参考线
      boardEvent,
      groupMenus,
      levelButtons,
      contextMenus,
      settingData,
      mainBackgroundStyle,
      pageBackgroundStyle,
      uiBackgroundStyle,
      changeSettingData,
      changeCollapse,
      collapseDefaultActiveKey,
      allLoading,
      theme,
      isPreviewShow,
      isScreening,
      backgroundSize,
      scenes,
      sceneId,
      sceneSelectId,
      sceneExpandIds,
      scenesEvent,
      uiStateOn,
      fitBoard,
      uiLayerList,
      scenceModelSrc, // 场景模型路径
      qiyong3D, //是否启用3D
      pointEvent,
      layerType,
      layer3DList,
      ZLG,
      GISChildren,
      Line,
      Polygon,
      add3DType, //当前进入3D添加元件的状态
      add3DTypeList, //3D元件状态列表
      layerExpandIds, //3D图层列表展开的id
      layerDateTime,
      fristSelectedElement, //第一次选中的元件
      hoverElement, //鼠标悬浮的元件
      cockpitList, //驾驶舱列表
      PointLayer, //点图层
      PopupLayer, //气泡图层
      Popup, //气泡
      contextMenuId
    } = nextProps;
    // 变更布局
    if (layoutOpts !== prevState.layoutOpts) {
      if (Array.isArray(layoutOpts) && layoutOpts?.length > 0) {
        const newList1 = [...layoutOpts];
        newList1.forEach((item, i) => {
          layoutOptsOrder.push(item?.key);
          switch (item?.key) {
            // 边栏数据
            case 'sidebar':
              newList1[i] = {
                ...newList1[i],
                sidebarList,
                sidebarEvent,
                pageList
              };
              break;
            //页面栏详情页
            case 'component':
              newList1[i] = {
                ...newList1[i],
                sidebarDetail,
                cardStyle,
                sidebarDetailEvent,
                clickControlBtn,
                componentLoading: allLoading[i] ? allLoading[i] : []
              };
              break;
            case 'page':
              newList1[i] = {
                ...newList1[i],
                pageList,
                pageMenu,
                pageEvent,
                pageListEvent,
                mainBackgroundStyle,
                backgroundSize
              };
              break;
            // 图层数据
            case 'layer':
              newList1[i] = {
                ...newList1[i],
                layerList,
                contextMenus,
                levelButtons,
                layerListEvent,
                scenes,
                sceneId,
                sceneSelectId,
                sceneExpandIds,
                scenesEvent,
                hierarchyDisabled,
                uiStateOn,
                uiLayerList,
                layerType,
                layer3DList,
                GISChildren,
                layerExpandIds,
                fristSelectedElement,
                hoverElement
              };
              break;
            // 元件数据
            case 'element':
              newList1[i] = {
                ...newList1[i],
                structure: elementList?.structure,
                subMenusList: elementList?.subMenusList,
                cardList: elementList?.cardList,
                sidebarDetail: elementList?.sidebarDetail,
                cardStyle: elementList?.cardStyle,
                elementEvent,
                componentLoading: allLoading[i] ? allLoading[i] : [],
                sidebarList
              };
              break;
            // 画板数据
            case 'board':
              newList1[i] = {
                ...newList1[i],
                layerList,
                contextMenus,
                leftIcons,
                rightIcons,
                operationMenus,
                zoomList,
                guidesData,
                boardEvent,
                groupMenus,
                mainBackgroundStyle,
                pageBackgroundStyle,
                uiBackgroundStyle,
                pageList,
                uiList,
                theme,
                isPreviewShow,
                isScreening,
                backgroundSize,
                uiStateOn,
                fitBoard,
                uiLayerList,
                scenceModelSrc,
                qiyong3D,
                pointEvent,
                ZLG,
                Line,
                Polygon,
                PopupLayer,
                add3DType,
                add3DTypeList,
                layerDateTime,
                hoverElement,
                PointLayer,
                Popup,
                changeSettingData,
                contextMenuId
              };
              break;
            //样式配置数据
            case 'setting':
              newList1[i] = {
                ...newList1[i],
                settingData,
                changeSettingData,
                changeCollapse,
                collapseDefaultActiveKey,
                clickControlBtn,
                theme,
                scenes,
                sceneId,
                sceneSelectId,
                cockpitList,
                GISChildren
              };
              break;
            default:
              break;
          }
        });
        return { comListOpts: newList1, layoutOptsOrder: layoutOptsOrder };
      }
    }

    return null;
  }

  render() {
    const { comListOpts } = this.state;
    return (
      <RecoilRoot>
        <ConfigProvider prefixCls="zl-ls-ant" locale={zhCN}>
          <div className="zl-ls-wrap">
            {comListOpts.map((item) => {
              return <LargeScreenUnitWrap key={item?.key} {...item} />;
            })}
          </div>
        </ConfigProvider>
      </RecoilRoot>
    );
  }
}

export default LargeScreenLayout;
