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 VehicleFileCard = props => {
  const { sourceData = {}, data = [], onFollow, children } = 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.hadFocus ? "取消关注" : "关注"}
            icon={sourceData.hadFocus ? "icon-S_Photo_FollowYes" : "icon-S_Photo_FollowNo"}
            style={{
              color: sourceData.hadFocus ? "var(--primary)" : "var(--icon)"
            }}
            callBack={e => onFollow(sourceData, e)}
          />
        )}
      </div>
      {data.map((item, i) => (
        <Card.VehicleCardInfo key={`card-info-${i}`} {...item} />
      ))}
      {children}
      {text && (
        <div title={text} className="vehicle-card-footer-info-place ellipsis">
          {text}
        </div>
      )}
    </TwoColumnCard>
  );
};

export default VehicleFileCard;


















