import React from 'react'
import TimeLine from './components/timeLine'
import Drawer from '../../themeComponents/Drawer'
import CBox from '../../themeComponents/CBox'
// import { Drawer,CBox } from "micro-components";

/**
 * @desc 关系图谱各种详情
 * @param {} title 同行详情
 * @param {} visible 抽屉状态
 * @param {} onClose 关闭抽屉
 * @param {} width 抽屉宽度
 * @param {} card 头部卡片 <Card />
 * @param {} dataDesc 数据汇总描述 <p><icon />同行次数：5次</p>
 * @param {} hasTimeLine 是否需要时间线 true
 * @param {} singleCard 是否是单列卡片 true
 * @param {} children 拓展
 * @param {Array} dataList 列表 格式如下
 * 单列卡片[{desc:'2019.08.13 (共经过 3次)',list:[{aid,captureTime,deviceName}]}]
 * 并列卡片[{desc:'2019.08.13 (共经过 3次)',list:[[{aid,captureTime,deviceName},{aid,captureTime,deviceName}]]
 */

const RelationsDrawer = props => {
  const { width = '800px', card, dataDesc, hasTimeLine = true, dataList, singleCard, children, onClose, jumpDetail, jumpTogetherDetail, ...rest } = props
  return (
    <Drawer hasFooter={false} width={width} onClose={onClose}  {...rest}>
      <CBox style={{ display: 'flex', flexDirection: 'column' }}>
        {card}
        {dataDesc}
        {hasTimeLine && <TimeLine onClose={onClose} title={props.title} jumpDetail={jumpDetail} jumpTogetherDetail={jumpTogetherDetail} dataList={dataList} singleCard={singleCard} />}
        {children}
      </CBox>
    </Drawer>
  )
}

export default RelationsDrawer
