import React from 'react';
import { Popover } from 'antd';
import IconFont from '../../themeComponents/IconFont';
import BaseCard from './BaseCard';
import BaseIconCard from './BaseIconCard';
import ImageCard from './ImageCard';
import PersonCard from './PersonCard';
import Similar from './Similar';
import SingleColumnCard from './SingleColumnCard';
import TwoColumnCard from './TwoColumnCard';
import VehicleFileCard from './VehicleFileCard';
import LibraryCard from './LibraryCard'
import CardTips from './CardTips'
import SceneCard from './SceneCard'
import './index.less';


/**
 * @desc 卡片信息
 * @param {string} info 信息
 * @param {string} icon 图标
 * @param {string} label label
 * @param {string} className 类名
 * @param {number} subStr 需要切割后前后显示得字数  默认为0不切割
 */
const CardInfo = props => {
  let { info, icon, label, className } = props;

  return (
    <div title={info} className={`lm-card-info ${className || ''}`}>
      {label && (
        <div className="title">
          <IconFont type={icon} />
          {label}
        </div>
      )}
      {info && <p className="ellipsis">{info}</p>}
    </div>
  );
};

/**
 * @desc 卡片右上角气泡
 * @param {string} content 浮出卡片内容
 * @param {string} icon 图标
 * @param {string} callBack 回调
 * @param {string} data 原始数据
 * @param {ref} popRef 需要挂在的节点
 */
export const CardPopover = props => {
  const { content, icon, callBack, popRef, style } = props;
  return (
    <Popover className="lm-card-popover" placement="left" content={content} getPopupContainer={() => (popRef ? popRef.current : document.body)}>
      <IconFont style={style} type={icon} theme="outlined" className="popover-icon" onClick={callBack} />
    </Popover>
  );
};

/**
 * @desc 人员档案卡片信息
 * @param {array} infos 信息
 * @param {string} label label
 * @param {string} className 类名
 */
const PersonCardInfo = props => {
  let { infos, label, className } = props;

  return (
    <div className={`lm-card-info ${className || ''}`}>
      {label && <p className="ellipsis title">{label}</p>}
      {infos.length > 0 &&
        infos.map(v =>
          v.group === 'place' ? (
            <div className="ellipsis-place">{v.info}</div>
          ) : (
            <div key={v.icon} style={v.style} className="ellipsis" title={v.info}>
              <IconFont type={v.icon} />
              {v.info ? v.info : '暂无'}
            </div>
          )
        )}
    </div>
  );
};

/**
 * @desc 车辆档案卡片信息
 * @param {array} infos 信息
 * @param {string} label label
 * @param {string} className 类名
 */
const VehicleCardInfo = props => {
  let { infos, label, className } = props;
  let newinfo = infos[0].info;
  let vehiclnumber = '';
  if (newinfo !== undefined) {
    vehiclnumber = newinfo.slice(0, 2) + '·' + newinfo.slice(2);
  } else {
    vehiclnumber = '暂无';
  }
  return (
    <div className={`lm-card-info plate-info ${className || ''}`}>
      {label && <p className="ellipsis title">{label}</p>}
      {infos.length > 0 &&
        infos.map(v =>
          v.group ? (
            v.group === 'plate' ? (
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <IconFont type={v.icon} />
                {v.type ? (
                  <div key={v.icon} style={v.style} className={`card-plate card-plate-${v.type}`} title={v.info}>
                    {vehiclnumber}
                  </div>
                ) : (
                  <span style={{ color: 'var(--primary)' }}>{vehiclnumber}</span>
                )}
              </div>
            ) : (
              <div className="ellipsis-place">{v.info}</div>
            )
          ) : (
            <div key={v.icon} style={v.style} className="ellipsis" title={v.info}>
              <IconFont type={v.icon} />
              {v.info}
            </div>
          )
        )}
    </div>
  );
};


const Card = {
  CardInfo,
  CardPopover,
  PersonCardInfo,
  VehicleCardInfo,
  BaseCard,
  BaseIconCard,
  ImageCard,
  PersonCard,
  Similar,
  SingleColumnCard,
  TwoColumnCard,
  VehicleFileCard,
  LibraryCard,
  CardTips,
  SceneCard,
}

export default Card;
