/*
 * @Author: your name
 * @Date: 2022-04-11 15:26:48
 * @Description: 图层列表
 * @FilePath: /zl-large-screen/src/components/LargeScreenLayer/index.tsx
 */

import React from 'react';
import LargeScreenLayerHierarchy from './LargeScreenLayerHierarchy/index';
import LargeScreenLayerList from './LargeScreenLayerList/index';
import LargeScreen3DList from './LargeScreen3DList/index';
import LargeScreenTitle from '../LargeScreenTitle/index';
import LargeScreenGISRTitle from './LargeScreenGISTitle/index';
import LargeScreenAddGISChild from './LargeScreenAddGISChild/index';
import LargeScreenGISList from './LargeScreenGISList/index';

import {
  ILargeScreenLayerProps,
  ILargeScreenLayerState
} from '../../type/largeScreenLayer';

import './style.scss';

class LargeScreenLayer extends React.Component<
  ILargeScreenLayerProps,
  ILargeScreenLayerState
> {
  constructor(props: ILargeScreenLayerProps) {
    super(props);
    const {
      levelButtons,
      layerList,
      contextMenus,
      layerListEvent,
      hierarchyDisabled, // 禁用层级按钮
      uiLayerList,
      uiStateOn,
      layerType,
      layer3DList,
      GISChildren,
      layerExpandIds,
      fristSelectedElement,
      hoverElement
    } = props;

    this.state = {
      iconList: levelButtons,
      content:
        layerType === '2D'
          ? uiStateOn
            ? uiLayerList
            : layerList
          : layer3DList,
      contextMenus: contextMenus,
      layerListEvent: layerListEvent,
      hierarchyDisabled: hierarchyDisabled, // 禁用层级按钮
      uiLayerList: uiLayerList,
      uiStateOn: uiStateOn,
      layerType: layerType,
      layer3DList: layer3DList,
      GISChildren: GISChildren,
      layerExpandIds: layerExpandIds,
      dragInfo:{
        draggable:false,
        oldY:0,
        midHeight:0,
        endHeight:0,
      },
      
      fristSelectedElement: fristSelectedElement,
      hoverElement: hoverElement
    };
  }
 

  componentDidUpdate(prevProps, prevState) {
    if (this.props.contextMenus !== prevProps.contextMenus) {
      this.setState({ contextMenus: this.props.contextMenus });
    }

    if (
      !this.props.uiStateOn &&
      this.props.layerType === '2D' &&
      this.props.layerList !== prevProps.layerList
    ) {
      this.setState({ content: this.props.layerList });
    }

    if (this.props.hierarchyDisabled !== prevProps.hierarchyDisabled) {
      this.setState({ hierarchyDisabled: this.props.hierarchyDisabled });
    }

    if (
      this.props.uiStateOn &&
      this.props.uiLayerList !== prevProps.uiLayerList
    ) {
      this.setState({ content: this.props.uiLayerList });
    }

    if (this.props.uiStateOn !== prevProps.uiStateOn) {
      this.setState({
        uiStateOn: this.props.uiStateOn,
        content: this.props.uiStateOn
          ? this.props.uiLayerList
          : this.props.layerList
      });
    }

    if (this.props.layerType !== prevProps.layerType) {
      this.setState({
        layerType: this.props.layerType,
        content:
          this.props.layerType === '3D'
            ? this.props.layer3DList
            : this.props.layerList
      });
    }
    if (this.props.layer3DList !== prevProps.layer3DList && this.props.layerType === '3D') {
      this.setState({ content: this.props.layer3DList });
    }
    if (this.props.layerExpandIds !== prevProps.layerExpandIds) {
      this.setState({ layerExpandIds: this.props.layerExpandIds });
    }
    if (this.props.GISChildren !== prevProps.GISChildren) {
      this.setState({ GISChildren: this.props.GISChildren });
    }
    if (this.props.fristSelectedElement !== prevProps.fristSelectedElement) {
      this.setState({ fristSelectedElement: this.props.fristSelectedElement });
    }
        if (this.props.hoverElement !== prevProps.hoverElement) {
      this.setState({ hoverElement: this.props.hoverElement });
    }
  }

  render() {
    const {
      iconList,
      content,
      contextMenus,
      layerListEvent,
      hierarchyDisabled,
      layerType,
      GISChildren,
      layerExpandIds,
      fristSelectedElement,
      hoverElement
    } = this.state;
    const cursorStyle =this.state.dragInfo?.draggable ? {cursor:'n-resize'}:{}
  
    return (
      <div className="zl-lagre-layer-wrap"  id={'zl-ls-block-layer-list'}
      style={
          this.state.dragInfo?.endHeight ? 
          { 
            height: this.state.dragInfo?.endHeight+'px', 
            ...cursorStyle
          }
          :{}
        }>
        {/* 添加图层列表拖拽缩放功能 */}
       <div 
          className={'zl-ls-block-title-outerLine'}
          onMouseDown={e => {
            this.setState({
              dragInfo:{
                ...this.state.dragInfo,
                draggable:true,
                oldY :e.pageY,
                midHeight:document.getElementById(
                  'zl-ls-block-layer-list'
              ).clientHeight,
              }
            })
        
            document.onmousemove = event => {
                if (this.state.dragInfo.draggable && this.state.dragInfo.midHeight !== 0) {
                    let y = this.state.dragInfo.oldY - event.pageY + this.state.dragInfo.midHeight;
                    if (y  > 210) {
                      this.setState({
                        dragInfo:{
                          ...this.state.dragInfo,
                          endHeight: y,
                        }
                      })
                    } else {
                    this.setState({
                      dragInfo:{
                        ...this.state.dragInfo,
                        endHeight: 210,
                      }
                    })
                    }
                    //y = null;
                }
            };
            document.onmouseup = () => {
                if (this.state.dragInfo.draggable) {
                this.setState({
                  dragInfo:{
                    ...this.state.dragInfo,
                    midHeight: this.state.dragInfo.endHeight,
                  oldY:0,
                  draggable:false
                  }
                })
                }else {
                this.setState({
                  dragInfo:{
                    ...this.state.dragInfo,
            
                  oldY:0,
                  draggable:false
                  }
                })
                }
            };
          }}
          ></div>
        {layerType === 'child' ? (
          <>
            <LargeScreenGISRTitle layerListEvent={layerListEvent} />
            <LargeScreenAddGISChild layerListEvent={layerListEvent} />
            <LargeScreenGISList GISChildren={GISChildren} layerListEvent={layerListEvent}/>
          </>
        ) : (
          <>
            <div className="zl-lagre-screen-title">
              <LargeScreenTitle
                title="图层列表"
                layerListEvent={layerListEvent}
                layerType={layerType}
              />
            </div>
            {layerType === '2D' ? (
              <>
                <LargeScreenLayerHierarchy
                  iconList={iconList}
                  layerListEvent={layerListEvent}
                  hierarchyDisabled={hierarchyDisabled}
                />
                <LargeScreenLayerList
                  content={content}
                  contextMenus={contextMenus}
                  layerListEvent={layerListEvent}
                  fristSelectedElement={fristSelectedElement}
                  hoverElement={hoverElement}
                />
              </>
            ) : (
              <LargeScreen3DList
                content={content?.length > 0 ? content : this.props.layer3DList}
                layerExpandIds={layerExpandIds}
                contextMenus={contextMenus}
                layerListEvent={layerListEvent}
              />
            )}
          </>
        )}
      </div>
    );
  }
}

export default LargeScreenLayer;