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

import Icon from '../Icon/index';
import LargeScreenComponentCollapseItem from '../LargeScreenComponentCollapseItem/index';
import { Spin } from 'antd';

function LargeScreenComponentCard(props: ILargeScreenComponentCard) {
  const {
    list = [],
    cardStyle,
    change,
    styles,
    cardLoading,
    height,
    sceneEvent
  } = props;

  const [listCopy, setListCopy] = useState([]); //卡片的样式数据和卡片数据合并之后的数据

  useEffect(() => {
    //合并卡片的样式数据和卡片数据
    let _list = list?.map((item) => {
      return {
        ...item,
        style: cardStyle[item?.styleType]
      };
    });
    setListCopy(_list);
  }, [list[0].cardList, list[0].activeIndex]);

  const Dom = useMemo(() => {
    return (
      <div
        className="zl-large-screen-component-card"
        style={{ ...styles, height: `calc(100% - ${height}px)` }}
      >
        {cardLoading ? (
          <div className="zl-large-screen-component-loading-card">
            <Spin />
          </div>
        ) : (
          <div className="zl-large-screen-component-content">
            {listCopy?.length > 0 &&
              listCopy?.map((item) => {
                return (
                  <div
                    className="zl-large-screen-component-card-item"
                    key={item?.key}
                  >
                    {item?.title ? (
                      <span className="zl-large-screen-component-card-item-title">
                        {item?.titleIcon ? (
                          <Icon
                            name={item?.titleIcon}
                            style={{
                              cursor: `${item?.titleClick ? 'pointer' : ''}`
                            }}
                            click={() => {
                              if (item?.titleClick) {
                                change(null, null, 'cardTitleClick');
                              }
                            }}
                          />
                        ) : (
                          <></>
                        )}
                        <span
                          style={{
                            cursor: `${item.titleClick ? 'pointer' : ''}`
                          }}
                          onClick={() => {
                            if (item?.titleClick) {
                              change(null, null, 'cardTitleClick');
                            }
                          }}
                        >
                          {item.title}
                        </span>
                      </span>
                    ) : (
                      <></>
                    )}
                    <div className="zl-large-screen-component-card-items">
                      {item?.cardList?.length > 0 ? (
                        <LargeScreenComponentCollapseItem
                          key={item?.key}
                          {...item}
                          {...item?.style}
                          change={change}
                          onClick={sceneEvent}
                        />
                      ) : (
                        <div className="zl-large-screen-component-no-data">
                          <span>暂无图表</span>
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
          </div>
        )}
      </div>
    );
  }, [listCopy, cardStyle, styles, cardLoading]);

  return Dom;
}
export default LargeScreenComponentCard;

export interface ILargeScreenComponentCard {
  list: IList[];
  cardStyle?: ICardStyle[];
  change?: Function;
  styles?: React.CSSProperties;
  cardLoading?: boolean;
  height?: number;
  sceneEvent?: Function;
}
export interface IList {
  key?: string;
  title?: string;
  styleType?: string;
  cardList?: any;
  activeIndex?: number | string;
}
export interface ICardStyle {
  [key: string]: string | number | boolean | object | CSSProperties;
}