import React from 'react';
import TwoColumnCard from '../TwoColumnCard';
import Card from '../index';
import './index.less';
/**
 * @desc 人员档案卡片
 * @param {array} data 卡片数据 [{infos:[info,icon],label?}]
 * @param {string} icon 图标
 * @param {string} info 信息
 * @param {func} onFollow 关注回调
 * @param {func} onRelation 关联回调
 * @param {node} children 子组件
 */
const PersonCard = props => {
  const { sourceData = {}, data = [], onFollow,onRelation=false, toRelationship, children, onPersonnel } = props;

  const passDevice = sourceData.passDevice ? Object.values(sourceData.passDevice) : [];
  const passPlace = sourceData.passPlace ? Object.values(sourceData.passPlace) : [];
  const text = passDevice[0] ? `在"${passDevice[0]}"设备下经过` : passPlace[0] ? `在"${passPlace[0]}"出现过` : '';

  return (
    <TwoColumnCard {...props}>
      <div className="lm-persom-card-popovers">
        {onFollow && (
          <Card.CardPopover
            key="onFollow"
            content={sourceData.isFocus ? '取消关注' : '关注'}
            icon={sourceData.isFocus ? 'icon-S_Photo_FollowYes' : 'icon-S_Photo_FollowNo'}
            style={{
              color: sourceData.isFocus ? 'var(--primary)' : 'var(--icon)'
            }}
            callBack={e => onFollow(sourceData, e)}
          />
        )}
        {onRelation && <Card.CardPopover
        key='onRelation'
          style={{ color: "var(--primary)" }}
          content="关联"
          icon="icon-S_Bar_Linked"
          callBack={e => onRelation(sourceData, e)}
        />}
        {toRelationship && (
          <Card.CardPopover key="toRelationship" style={{ color: 'var(--primary)' }} content="关系图谱" icon="icon-S_Photo_Relationship" callBack={e => toRelationship(sourceData, e)} />
        )}
        {onPersonnel && (
          <Card.CardPopover key="onPersonnel" style={{ color: 'var(--primary)' }} content="人员档案" icon="icon-S_Edit_Avatar" callBack={e => onPersonnel(sourceData, e)} />
        )}
      </div>
      {data.map((item, i) => (
        <Card.PersonCardInfo key={`card-info-${i}`} {...item} />
      ))}
      {children}
      {text && (
        <div title={text} className="person-card-footer-info-place ellipsis">
          {text}
        </div>
      )}
    </TwoColumnCard>
  );
};

export default PersonCard;
