// import { RightOutlined } from '@ant-design/icons';
import { ConfigProvider, Flex, Popover } from 'antd';
import classNames from 'classnames';
import React, { PropsWithChildren } from 'react';
import styles from './index.less';
import rightBack from '@/assets/images/newMain/rightBack.png';

interface PropsType {
  title: string;
  jumpSystem?: {
    name: string;
    url?: string;
    onClick?: () => void;
  }[]; //外跳系统
}

const Card: React.FC<PropsWithChildren<PropsType>> = (props) => {
  const { title, children, jumpSystem } = props;

  //跳转其他系统
  const handleClick = (item: { url?: string; onClick?: () => void }) => {
    if (item.onClick) {
      item.onClick();
    } else if (item.url) {
      window.open(item.url, '_blank');
    }
  };

  return (
    <div className={styles.container}>
      <Flex align="center" justify="space-between">
        <div className={styles.cardTitle}>{title}</div>
        <ConfigProvider
          theme={{
            token: {
              sizePopupArrow: 0,
              colorBgElevated: 'rgba(41, 84, 136, 0.95)',
            },
          }}
        >
          <Popover
            trigger={'click'}
            content={
              <div className={styles.otherSystem}>
                {jumpSystem?.map((it) => (
                  <div key={it.name} className={styles.systemItem}>
                    <span onClick={() => handleClick(it)}>{it.name}</span>
                  </div>
                ))}
              </div>
            }
            placement="bottomRight"
          >
            <div
              className={classNames(styles.rightBtn, {
                [styles.bindClick]: !Boolean(jumpSystem?.length),
              })}
            >
              <img src={rightBack} alt="" />
            </div>
          </Popover>
        </ConfigProvider>
      </Flex>
      <div className={styles.content}>{children}</div>
    </div>
  );
};

export default Card;
