// import { RightOutlined } from '@ant-design/icons';
import rightBack from '@/assets/images/newMain/rightBack.png';
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 }[]; //外跳系统
}

const Card: React.FC<PropsWithChildren<PropsType>> = (props) => {
  const { title, 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, index) => (
                  <p
                    style={{
                      cursor: 'pointer',
                      marginTop: index > 0 ? 10 : 0,
                    }}
                    key={it.name}
                    onClick={() => jumpOtherSystem(it.url)}
                  >
                    {it.name}
                  </p>
                ))}
              </div>
            }
            placement="bottomRight"
          >
            <div
              className={classNames(styles.rightBtn, {
                [styles.bindClick]: !Boolean(jumpSystem?.length),
              })}
            >
              <img src={rightBack} alt="" />
              {/* <RightOutlined style={{ color: '#fff', fontSize: 14 }} /> */}
            </div>
          </Popover>
        </ConfigProvider>
      </Flex>
      <div className={styles.content}>{children}</div>
    </div>
  );
};

export default Card;
