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

import React from 'react';
import LargeScreenTitle from '../LargeScreenTitle/index';
import LargeScreenSceneTree from './LargeScreenSceneTree';
import Icon from '../Icon/index';
import {
  ILargeScreenSceneProps,
  ILargeScreenSceneState
} from '../../type/largeScreenScene';
import './style.scss';

class LargeScreenScene extends React.Component<
  ILargeScreenSceneProps,
  ILargeScreenSceneState
> {
  constructor(props: ILargeScreenSceneProps) {
    super(props);
    const { scenes,sceneId, sceneSelectId, sceneExpandIds, scenesEvent,uiStateOn } = props;
    this.state = {
      scenes,
      sceneId,
      sceneSelectId,
      sceneExpandIds,
      scenesEvent,
      uiStateOn
    };
  }

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

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

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

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

  //补充clickUI事件
  clickUI = () => {
    // 清空选中的页面
    this.state.scenesEvent?.('clickUI');
  };

  render() {
    const { scenes,sceneId, scenesEvent,sceneSelectId,sceneExpandIds, uiStateOn } = this.state;
    return (
      <div className="zl-lagre-screen-scene" style={{display: "flex",
        flexDirection: "column"}}>
        <div className="zl-lagre-screen-title">
          <LargeScreenTitle title="大纲" rightBtn="icon-tianjia"  scenesEvent={scenesEvent} />
        </div>
        <div className="zl-lagre-screen-scene-tree" style={{    flex: 1,
    maxHeight: 'calc(100% - 50px)'}}>
          <p className={`${uiStateOn ? "zl-lagre-screen-scene-ui zl-lagre-screen-scene-ui-active" : "zl-lagre-screen-scene-ui"}`} onClick={this.clickUI}>
            <Icon name={'icon-xitongUI'} />
            系统UI
          </p>
          <LargeScreenSceneTree scenes={scenes} sceneId={sceneId} scenesEvent={scenesEvent} sceneSelectId={sceneSelectId} sceneExpandIds={sceneExpandIds}  />
        </div>
      </div>
    );
  }
}

export default LargeScreenScene;