import React from 'react';
import SingleColumnCard from '../SingleColumnCard';
import { Tooltip } from 'antd';
import './index.less';

import IconFont from '../../../themeComponents/IconFont';

/**
 * @desc 图库卡片
 * @param {array} data 卡片数据 [{info,icon,click,relateds:[{title,icon,click}]}]
 * @param {string} icon 图标
 * @param {string} info 信息
 */
const LibraryCard = props => {
  const { score, hasArchives } = props;
  return (
    <SingleColumnCard
      {...props}
      hoverScale={true}
      outChildren={
        <div className="library-card-tip">
          {score && <span className="library-card-score">{`${props.score >= 100 ? 99 : parseInt(props.score)}%`}</span>}
          {hasArchives && (
            <span className="library-card-aid">
              <IconFont type="icon-S_View_FilePerson" />
            </span>
          )}
        </div>
      }
    >
      {getAssociationRetrieval(props)}
    </SingleColumnCard>
  );
};

/**
 * @desc 获取关联检索图标
 */
const getIcon = data => {
  const { title, click, icon } = data;
  const clickFn = e => {
    e.stopPropagation();
    click && click(data);
  };
  return (
    <Tooltip key={`${icon}_${title}`} title={title} onClick={clickFn}>
      <IconFont type={icon} />
    </Tooltip>
  );
};

/**
 * @desc 获取关联检索列表
 */
const getAssociationRetrieval = props => {
  let { relateds = [] } = props;
  return !!relateds.length && <div className="library-card-search-icon">{relateds.map(v => (React.isValidElement(v) ? v : getIcon(v)))}</div>;
};

export default LibraryCard;
