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

import LargeScreenComponentCollapseItem from '../LargeScreenComponentCollapseItem/index';

import { Collapse } from 'antd';

const { Panel } = Collapse;

function LargeScreenComponentCollapse(props: ILargeScreenComponentCollapse) {
  const {
    collapses = [],
    cardStyle = {},
    change,
    defaultActiveKey,
    styles,
    height
  } = props;

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

  useEffect(() => {
    //合并卡片的样式数据和卡片数据
    let newCollapsesCopy =
      collapses?.length > 0 &&
      collapses?.map((item) => {
        return {
          ...item,
          style: cardStyle[item?.styleType]
        };
      });
    setCollapsesCopy(newCollapsesCopy);
  }, [collapses]);

  const Dom = useMemo(() => {
    return (
      <div
        className="zl-large-screen-component-collapse"
        style={{ ...styles, height: `calc(100% - ${height}px)` }}
      >
        {collapsesCopy.length > 0 ? (
          <Collapse
            bordered={false}
            onChange={(key) => {
              change?.(key, 'clickCollapse');
            }}
            activeKey={defaultActiveKey}
          >
            {collapsesCopy?.length > 0 &&
              collapsesCopy?.map((item) => {
                return (
                  <Panel header={item?.title} key={item?.key}>
                    <LargeScreenComponentCollapseItem
                      key={item?.key}
                      {...item}
                      {...item?.style}
                      change={change}
                    />
                  </Panel>
                );
              })}
          </Collapse>
        ) : (
          <div className='zl-large-screen-collapse-no-data'> 
            <span>暂无图表</span>
          </div>
        )}
      </div>
    );
  }, [collapsesCopy, cardStyle, defaultActiveKey, styles]);

  return Dom;
}
export default LargeScreenComponentCollapse;

export interface ILargeScreenComponentCollapse {
  collapses?: ICollapses[];
  cardStyle?: ICardStyle;
  change?: Function;
  defaultActiveKey?: string[] | number[] | string | number;
  styles?: React.CSSProperties;
  height?: Number;
}
export interface ICollapses {
  key?: string;
  title?: string;
  styleType?: string;
}
export interface ICardStyle {
  [key: string]: string | number | boolean | object | CSSProperties;
}