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';

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

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

  //跳转其他系统
  const jumpOtherSystem = (url: string) => {
    window.open(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) => (
                  <span key={it?.name} onClick={() => jumpOtherSystem(it.url)}>
                    {it.name}
                  </span>
                ))}
              </div>
            }
            placement="bottomRight"
          >
            <div
              className={classNames(styles.rightBtn, {
                [styles.bindClick]: !Boolean(jumpSystem?.length),
              })}
            >
              <RightOutlined style={{ color: '#fff', fontSize: 14 }} />
            </div>
          </Popover>
        </ConfigProvider>
      </Flex>
      <div>{children}</div>
    </div>
  );
};

export default Card;
