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

import React from 'react';

import LargeScreenBlockTitle from '../LargeScreenTitle/index';
import ElementMenus from './LargeScreenElementContentMenus/index';
import LargeScreenElementCards from './LargeScreenElementCards/index';

import {
  ILargeScreenElementProps,
  ILargeScreenElementState,
  IElementMenusItem,
  ISubListItem,
  ICardListITem,
} from '../../type/LargeScreenElement';

import './style.scss';

class LargeScreenElement extends React.Component<
  ILargeScreenElementProps,
  ILargeScreenElementState
> {
  constructor(props: ILargeScreenElementProps) {
    super(props);
    const {
      structure,
      sidebarList,
      subMenusList,
      cardList,
      cardStyle,
      sidebarDetail,
      componentLoading,
      title,
    } = props;
    this.state = {
      structure: structure, // content内部包含的组件列表，在里面来控制显示隐藏
      sidebarList: sidebarList,
      subMenusList: subMenusList,
      cardList: cardList,
      cardStyle: cardStyle,
      sidebarDetail: sidebarDetail,
      componentLoading: componentLoading
    };
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.props.sidebarList !== prevProps.sidebarList) {
      this.setState({ sidebarList: this.props.sidebarList });
    }
    if (this.props.sidebarDetail !== prevProps.sidebarDetail) {
      this.setState({ sidebarDetail: this.props.sidebarDetail });
    }
    if (this.props.structure !==prevProps.structure) {
      this.setState({ structure: this.props.structure });
    }
    if (this.props.cardList !== prevProps.cardList) {
      this.setState({ cardList: this.props.cardList });
    }
    if (this.props.subMenusList !== prevProps.subMenusList) {
      this.setState({ subMenusList: this.props.subMenusList });
    }
  }

  // ElementMenus silder item click
  public switchElementSilderBar = (item: IElementMenusItem) => {
    this.props.elementEvent('menuChange', item);
  };

  // ElementCards searchInput change
  public SearchElementCardChange = (value: string, type: string) => {
    if (type === 'change') {
      this.props.elementEvent('searchChange', value);
    } else {
      this.props.elementEvent('searchBlur', value);
    }
  };

  // subSildr item click
  public clickSubSilder = (item: ISubListItem) => {
    // let { subMenusList } = this.state

    // subMenusList.forEach(itemz => {
    //   if (item.key === itemz.key) {
    //     itemz.selected = true
    //   } else {
    //     itemz.selected = false
    //   }
    // })

    // this.setState({ subMenusList })
    this.props.elementEvent('subMenuChange', item);
  };

  public dragStart = (e: React.DragEvent) => {
    this.props.elementEvent('componentDragStart', "true");
  };

  public sidebarDetailEvent = (value: any, key: string, type: string) => {
    this.props.elementEvent('sidebarDetailEvent', { value, key, type });
  };

  public doubleClick = (value: ICardListITem) => {
    this.props.elementEvent('doubleClickCard', value);
  };
  
  public sceneEvent = (value: ICardListITem) => {
    this.props.elementEvent('sceneEvent', value);
  };

  public cardMouseDown = (value: ICardListITem) => {
    this.props.elementEvent('cardMouseDown', value);
  };

  render() {
    const {
      structure,
      sidebarList,
      subMenusList,
      cardList,
      sidebarDetail,
      cardStyle,
      componentLoading
    } = this.state;
    return (
      <div className="zl-ls-element">
        <LargeScreenBlockTitle title={this.props.title} />
        <div
          className="zl-ls-element-content"
          style={{minWidth:'232px'}}
        >
          <ElementMenus
            list={sidebarList}
            click={this.switchElementSilderBar}
          />
          <LargeScreenElementCards
            search={this.SearchElementCardChange}
            structure={structure}
            subList={subMenusList}
            subSilderClick={this.clickSubSilder}
            cardList={cardList}
            dragStart={this.dragStart}
            sidebarDetail={sidebarDetail}
            cardStyle={cardStyle}
            componentLoading={componentLoading}
            sidebarDetailEvent={this.sidebarDetailEvent}
            doubleClick={this.doubleClick}
            sceneEvent={sidebarList?.[4]?.selected ? this.sceneEvent: null}
            cardMouseDown={this.cardMouseDown}
          />
        </div>
      </div>
    );
  }
}

export default LargeScreenElement;

export interface IElement {
  title: string;
  slideBar: ISlideItem[];
  searchBox: ISearch;
  content: IContent;
}

export interface ISlideItem {
  key: string | number;
  title: string;
  icon: string;
  selected?: boolean;
}

export interface ISearch {
  value: string;
  placeholder: string;
}

export interface IContent {
  type: number;
  menus?: IMenu;
  list: IList[];
}

export interface IMenu {
  key: string | number;
  title: string;
  selected?: boolean;
}

export interface IList {
  key: string | number;
  url?: string;
  title?: string;
  icon?: string | React.ReactNode;
  children: ISlideItem[];
}

const elementData = {
  title: '元件列表',
  slideBar: [
    { key: 1, title: '组件', icon: 'icon_media', selected: true },
    { key: 2, title: '共享组件', icon: 'icon_share_dashboard' }
  ],
  searchBox: {
    placeholder: '搜索',
    value: ''
  },
  content: {
    type: 1,
    menus: [
      { key: 1, title: '全部', selected: true },
      { key: 2, title: '柱状图' },
      { key: 3, title: '折线图' }
    ],
    list: [
      {
        key: 'l1',
        url: 'http://172.24.103.160:7080/static/media/sankey.cd5e5a20.png',
        title: '关系图'
      }
    ]
  }
  // {
  //   type: 2,
  //   list: [
  //     {
  //       key: 'e1',
  //       title: '仪表盘',
  //       icon: 'icon_media',
  //       children: [
  //         {
  //           key: 'e1-1',
  //           title: '仪表盘1',
  //           icon: 'icon_media'
  //         }
  //       ]
  //     }
  //   ]
  // },
  // {
  //   type: 3,
  //   list: [
  //     {
  //       key: 'l1',
  //       url: 'http://172.24.103.160:7080/static/media/sankey.cd5e5a20.png',
  //       title: '关系图'
  //     }
  //   ]
  // }
};