/* eslint-disable no-unused-vars */
import React from 'react';
import PlaceCard from './components/placeCard';
import DeviceCard from './components/deviceCard';
import PersonCard from './components/personCard';
import VehicleCard from './components/vehicleCard';
import CacheBox from './components/cacheBox';
import * as relationUtils from './utils';
import _ from 'lodash';
import { message, Button } from 'antd';
import './index.less';
import { Dict, Shared, BaseStore } from '@zenview/micro-basic-library';
import RelationShip from '../../components/RelationShip';
import Progress from '../../components/Progress';
import CBox from '../../themeComponents/CBox';
import IconFont from '../../themeComponents/IconFont';
import Drawer from '../../themeComponents/Drawer';
import NoData from '../../components/NoData';
import Relations from '../Relations';
import RelationShipServer from './service';

const {
  getPersonNodesAndLinks,
  getDeviceNodesAndLinks,
  getPlaceNodesAndLinks,
  getVehicleNodesAndLinks,
  getDetailList,
  placeInfoCard,
  DeviceInfoCard,
  personInfoCard,
  vehicleInfoCard,
} = relationUtils;
const boxWidth = 386; //弹出框盒子的宽度

const allSearchKeys = {
  person: [
    'queryPersonAccompanies',
    'getAidsTogetherByAid',
    'queryAidAndCidRelation',
    'getPersonFrequentedPlaces7',
    'getPersonFrequentedPlaces30',
    'queryAidAndNonVehicleRelation',
    'queryPersonAndVehicleOwnerRelation',
    'getLivePlaceByAid',
    // 'getPersonVehicle',
    // 'companion',
    'getPersonRoommates',
  ],
  vehicle: ['queryVehicleAndXidRelation', 'queryVehicleOwnerInfoUrl', 'queryVehicleAndNonVehicleRelationUrl'],
};
class RelationShipWithLinkAndNode extends React.Component {
  constructor(props) {
    super(props);
    this.timer = null;
    this.viewRef = React.createRef();
    this.state = {
      loading: ['loading'],
      transform: { k: 1, x: 0, y: 0 },
      top: 0,
      left: 0,
      nodeInfo: {},
      linkInfo: {},
      deviceSearchTime: 7,
      personData: {},
      objectDataList: {},
      type: null,
      showMask: false,
      cacheBoxVisible: false,
      relationDetailBoxVisible: false,
      selectDataList: {},
      searchKeys: [],
      allNodes: [],
      allLinks: [],
      cacheLinks: [],
      cacheNodes: [],
      nodes: [],
      links: [],
      detailData: {},
    };
  }

  async componentDidMount() {
    let { aid, personId, plateId, type, objectData } = this.props;
    let id;
    if (type === 'person') {
      // if(!objectData){
      // }
      objectData = await this.getPersonData({ aid, personId });
      id = objectData.personId || objectData.aid || (objectData.bindAids && objectData.bindAids[0]);
    }

    if (type === 'vehicle') {
      // if(!objectData){
      // }
      objectData = await this.getVehicleData({ plateId });
      id = plateId;
    }
    this.setState(
      {
        nodeInfo: { id },
        // objectDataList: { [id]: objectData },
        searchKeys: allSearchKeys[type],
      },
      this[`${type}Search`] && this[`${type}Search`]
    );
  }
  search = () => {
    let { nodeInfo, searchKeys, selectDataList } = this.state;
    if (!searchKeys.length) {
      if (selectDataList[nodeInfo.id]) {
        message.warn('已生成相关图谱');
        this.setState({
          showMask: false,
        });
      } else {
        if (nodeInfo.type === 'device') {
          message.warn('请选择一个人员进行查询');
        } else {
          message.warn('请选择需要查询的关系');
        }
      }
      return;
    }

    this[`${nodeInfo.type}Search`]();
  };
  //内部方法
  formatLabel(tags) {
    if (!Array.isArray(tags)) {
      return [];
    }
    let tagList = [...new Set(tags)];
    tagList = tagList.filter((v) => !!v === true);
    tagList = tagList.map((v) => (v = v + ''));
    return tagList;
  }
  //
  getPersonData = async ({ aid, personId }) => {
    this.setState({
      loading: 'loading',
    });
    let res = await RelationShipServer.getSignatureByAidOrPersonId({ personId, aid });
    let data = { aid, personId, url: res.data };
    let personDataRes = await RelationShipServer.getPersonById(data);
    let personData = personDataRes.data || {};
    let { tagsUrl, recentAppearanceUrl } = personData;
    const resArr = await Promise.all([RelationShipServer.queryPersonTags(tagsUrl), RelationShipServer.queryRecentAppearance(recentAppearanceUrl)]);
    const [tagsRes, recentRes] = resArr;
    let tags = this.formatLabel(tagsRes ? tagsRes.data.tags : []);
    let recentData = recentRes.data;
    personData.tags = tags;
    personData.recentData = recentData;
    this.setState({
      loading: 'over',
    });
    personData.type = 'person';
    let { allNodes, allLinks, cacheLinks, cacheNodes, nodes, links, nodeInfo } = this.state;
    if (personData.personId) {
      let newAllNodes = this.formatNodes(allNodes, personData);
      let newAllLinks = this.formatLinks(allLinks, personData);
      let newCacheNodes = this.formatNodes(cacheNodes, personData);
      let newCacheLinks = this.formatLinks(cacheLinks, personData);
      let newNodes = this.formatNodes(nodes, personData);
      let newLinks = this.formatLinks(links, personData);
      let newNodeInfo = _.cloneDeep(nodeInfo);
      newNodeInfo.name = newNodeInfo.id = personData.personId;
      this.setState({
        allNodes: newAllNodes,
        allLinks: newAllLinks,
        cacheLinks: newCacheNodes,
        cacheNodes: newCacheLinks,
        nodes: newNodes,
        links: newLinks,
        nodeInfo: newNodeInfo,
      });
    }
    let id = personData.personId || personData.aid || (personData.bindAids && personData.bindAids[0]);
    let { objectDataList } = this.state;
    let newObjectDataList = _.cloneDeep(objectDataList);
    newObjectDataList[id] = personData;
    await this.setState({ objectDataList: newObjectDataList });
    return personData;
  };

  formatNodes = (oldNodes, personData) => {
    let { bindAids, aid, personId, aidPictureInfos } = personData;
    let id = personId || aid || (bindAids && bindAids[0]);
    let newNodes = [];
    oldNodes.forEach((v) => {
      let item = v;
      if (personData.bindAids&&personData.bindAids.includes(v.id)) {
        item = {
          id: id,
          name: personData.personName || id,
          avatar: aidPictureInfos && aidPictureInfos[0] && aidPictureInfos[0].newestPictureUrl,
          type: 'person',
        };
      }
      newNodes.push(item);
    });
    return newNodes;
  };
  formatLinks = (oldLinks, personData) => {
    let { bindAids=[], aid, personId } = personData;
    let id = personId || aid || (bindAids && bindAids[0]);
    let newLinks = [];
    oldLinks.forEach((v) => {
      let item = v;
      if (bindAids.includes(v.source)) {
        item = {
          ...v,
          source: id,
          linkId: `${id}-${v.target}-${v.relation}`,
        };
      }
      if (bindAids.includes(v.target)) {
        item = {
          ...v,
          target: id,
          linkId: `${v.source}-${id}-${v.relation}`,
        };
      }
      newLinks.push(item);
    });
    return newLinks;
  };

  getVehicleData = async ({ plateId }) => {
    this.setState({
      loading: 'loading',
    });
    const result = await RelationShipServer.getSignatureUrlByPlateIds({ plateIds: [plateId] });
    const res = await RelationShipServer.getUrl(result.data[plateId]);
    const resArr = await Promise.all([
      RelationShipServer.queryVehicleBaseInfo({
        url: res.data,
      }),
      RelationShipServer.queryLastAppearInfo({
        url: res.data,
      }),
      RelationShipServer.queryFirstAppearInfo({
        url: res.data,
      }),
    ]);

    const [vehicleDataRes, recentRes, firstRes] = resArr;

    let vehicleData = { ...res.data, ...vehicleDataRes.data };
    vehicleData.recentData = recentRes.data;
    vehicleData.firstData = firstRes.data;
    vehicleData.type = 'vehicle';
    let { objectDataList } = this.state;
    let newObjectDataList = _.cloneDeep(objectDataList);
    newObjectDataList[plateId] = vehicleData;
    this.setState({ objectDataList: newObjectDataList });
    this.setState({
      loading: 'over',
    });
    return vehicleData;
  };

  personSearch = async () => {
    let { nodeInfo, objectDataList, searchKeys } = this.state;
    await this.setState({
      loading: 'loading',
    });
    let { newNodes, newLinks } = await getPersonNodesAndLinks(objectDataList[nodeInfo.id], searchKeys);

    this.setNewData(newNodes, newLinks);
  };
  deviceSearch = async () => {
    let { nodeInfo, searchKeys, deviceSearchTime, objectDataList } = this.state;
    this.setState({
      loading: 'loading',
    });

    let { newNodes, newLinks } = await getDeviceNodesAndLinks(nodeInfo.id, searchKeys, deviceSearchTime, objectDataList);
    this.setNewData(newNodes, newLinks);
  };
  placeSearch = async () => {
    let { nodeInfo, searchKeys } = this.state;
    this.setState({
      loading: 'loading',
    });
    let { newNodes, newLinks } = await getPlaceNodesAndLinks(nodeInfo.id, searchKeys);
    this.setNewData(newNodes, newLinks);
  };
  vehicleSearch = async () => {
    let { nodeInfo, searchKeys, objectDataList } = this.state;
    this.setState({
      loading: 'loading',
    });
    let { newNodes, newLinks } = await getVehicleNodesAndLinks(objectDataList[nodeInfo.id], searchKeys);

    this.setNewData(newNodes, newLinks);
  };
  setNewData = (newNodes = [], newLinks = []) => {
    let { nodes, links, allNodes, allLinks, cacheLinks, nodeInfo, selectDataList, searchKeys, cacheNodes, objectDataList } = this.state;
    newLinks = newLinks.filter(
      //这一步是去去重 2个节点的相同关系
      (v) => !allLinks.find((j) => v.relation === j.relation && v.source === j.target && v.target === j.source)
    );
    if (nodeInfo.type === 'type') {
      selectDataList[nodeInfo.id] = searchKeys;
    } else {
      if (selectDataList[nodeInfo.id]) {
        selectDataList[nodeInfo.id] = selectDataList[nodeInfo.id].concat(searchKeys);
      } else {
        selectDataList[nodeInfo.id] = searchKeys;
      }
    }

    let newAddNodes = _.uniqBy(_.differenceBy(newNodes, allNodes, 'id'), 'id');
    let newAddLinks = _.uniqBy(_.differenceBy(newLinks, allLinks, 'linkId'), 'linkId');
    let objectDataKeyList = Object.keys(objectDataList);
    let nodeIdArr = [];
    objectDataKeyList.length &&
      newAddNodes.length &&
      objectDataKeyList.forEach((i) => {
        let item = objectDataList[i];
        let bindAids = item.bindAids || [];
        newAddNodes.map((v, k) => {
          if (bindAids.includes(v.id)) {
            nodeIdArr.push(v.id);
            newAddLinks = JSON.parse(JSON.stringify(newAddLinks).replaceAll(v.id, i));
          }
        });
      });

    newAddNodes = newAddNodes.filter((v) => !nodeIdArr.includes(v.id));
    // let showAddNodes = _.cloneDeep(newAddNodes);
    let showAddNodes = [];
    // let showAddLinks = _.cloneDeep(newAddLinks);
    let showAddLinks = [];
    let newCacheLinks = [];
    let newCacheNodes = [];
    let groupLinks = _.groupBy(newAddLinks, (o) => o.relation);
    for (const key in groupLinks) {
      if (groupLinks.hasOwnProperty(key)) {
        const element = groupLinks[key];
        if (element.length > 10) {
          newCacheLinks = _.concat(newCacheLinks, _.slice(element, 10));
          showAddLinks = _.concat(showAddLinks, _.slice(element, 0, 10));
        } else {
          showAddLinks = _.concat(showAddLinks, element);
        }
      }
    }
    // if (nodeInfo.type && nodeInfo.type !== 'person' && newAddNodes.length > 10) {
    //   newCacheNodes = showAddNodes.splice(10, newAddNodes.length);
    // }
    showAddLinks.forEach((v) => {
      showAddNodes = _.concat(
        showAddNodes,
        _.uniqBy(_.cloneDeep(allNodes.concat(newAddNodes)), 'id').filter((j) => v.target === j.id || v.source === j.id)
      );
    });

    // const allCacheNodes = [].concat(newCacheNodes, cacheNodes);
    // allCacheNodes.concat(newCacheNodes, cacheNodes).forEach((v) => {
    //   newCacheLinks = newCacheLinks.concat(showAddLinks.filter((j) => j.target === v.id || j.source === v.id));
    //   showAddLinks = showAddLinks.filter((j) => j.target !== v.id && j.source !== v.id);
    // });

    this.props.getNodesAndLinks &&
      this.props.getNodesAndLinks(_.uniqBy(_.cloneDeep(allNodes.concat(newAddNodes)), 'id'), _.uniqBy(_.cloneDeep(allLinks.concat(newLinks)), 'linkId'));
    this.setState({
      nodes: _.uniqBy(_.cloneDeep(nodes.concat(showAddNodes)), 'id'),
      allNodes: _.uniqBy(_.cloneDeep(allNodes.concat(newAddNodes)), 'id'),
      cacheNodes: _.uniqBy(_.cloneDeep(cacheNodes.concat(newCacheNodes)), 'id'),
      links: _.uniqBy(_.cloneDeep(links.concat(showAddLinks)), 'linkId'),
      allLinks: _.uniqBy(_.cloneDeep(allLinks.concat(newLinks)), 'linkId'),
      cacheLinks: _.uniqBy(_.cloneDeep(cacheLinks.concat(newCacheLinks)), 'linkId'),
      selectDataList,
      loading: 'over',
      showMask: false,
    });
  };
  showMask = (type) => {
    this.setState({ showMask: type });
  };
  showCacheBoxChange = (type) => {
    this.setState({
      cacheBoxVisible: type,
    });
  };
  showRelationDetailBoxChange = (type) => {
    this.setState({
      relationDetailBoxVisible: type,
    });
  };
  onLineClick = async (d) => {
    if (d.type === 'nonVehicle') {
      let item = {
        id: d.imgId,
        imgId: d.imgId,
        vehicleType: '1',
        ...d,
      };
      item.vehicleUrl = item.vehicleImg;
      this.jumpDetail({ item, list: [item] });
      return;
    }
    this.setState({
      detailData: {},
    });
    if (d.isNoLinkClick) {
      return;
    }

    // let { match } = this.props;
    // let aid = match.params.id;
    // if (d.source.id === aid) {
    // Service.logger.save({
    //   code: '107704',
    //   parent: '107700',
    //   description: `查看【${d.source.id}和${d.target.id}】的【${d.relation}关系】`,
    // });
    // }
    let { objectDataList } = this.state;
    let id = d.target.id;
    if (!objectDataList[id]) {
      if (d.type === 'person') {
        await this.getPersonData({ aid: id });
      }
      if (d.type === 'vehicle') {
        await this.getVehicleData({ plateId: id });
      }
    }
    this.setState({
      // objectDataList,
      linkInfo: d,
      relationDetailBoxVisible: true,
    });
    let data = await getDetailList(d, this.state.objectDataList);
    this.setState({
      detailData: data,
    });
  };
  deviceTimeChange = (value) => {
    this.setState({
      deviceSearchTime: value,
    });
  };
  renderDetailCard = () => {
    let { linkInfo, objectDataList } = this.state;
    // console.log( linkInfo, objectDataList);
    if (!linkInfo.target) {
      return <div></div>;
    }
    let id = linkInfo.target ? linkInfo.target.id : '';
    if (linkInfo.isReverse) {
      id = linkInfo.source ? linkInfo.source.id : '';
    }

    if (linkInfo.type === 'place') {
      return (
        <div style={{ height: 84 }}>
          {placeInfoCard(id, () => {
            this.goPage('place', id);
          })}
        </div>
      );
    } else if (linkInfo.type === 'device') {
      return (
        <div style={{ height: 84 }}>
          {
            <DeviceInfoCard
              id={id}
              click={() => {
                this.goPage('device', id);
              }}
              name={linkInfo.target.name}
            />
          }
        </div>
      );
    } else if (linkInfo.type === 'person') {
      let personData = objectDataList[id];
      if (!personData) {
        for (const i in objectDataList) {
          if (objectDataList.hasOwnProperty(i)) {
            const element = objectDataList[i];
            if (element.aid === id || (element.bindAids && element.bindAids.includes(id))) {
              personData = objectDataList[element.personId];
            }
          }
        }
      }
      if (personData) {
        return (
          <div style={{ height: 218, width: 400 }}>
            {personInfoCard(personData, () => {
              this.jumpPersonDetail(personData);
            })}
          </div>
        );
      } else {
        return <div />;
      }
    } else if (linkInfo.type === 'vehicle') {
      let vehicleData = objectDataList[id];
      if (vehicleData) {
        return (
          <div style={{ height: 218, width: 400 }}>
            {vehicleInfoCard(vehicleData, () => {
              // this.jumpPersonDetail(personData);
            })}
          </div>
        );
      } else {
        return <div />;
      }
    }
  };
  cacheRelation = (d) => {
    let { links, cacheLinks, allNodes, cacheNodes, nodes } = this.state;
    let newNodes = [];
    let newLinks = [];
    let newCacheLinks = [];
    let newCacheNodes = [allNodes.find((v) => v.id === d.id)];
    links.forEach((v) => {
      if (v.source === d.id || v.target === d.id) {
        newCacheLinks.push(v);
      } else {
        newLinks.push(v);
      }
    });
    newNodes = _.uniqBy(
      nodes.filter((v) => newLinks.find((j) => j.source === v.id || j.target === v.id)),
      'id'
    );
    let options = {
      showMask: false,
      nodes: newNodes,
      links: newLinks,
      cacheNodes: _.uniqBy([...cacheNodes, ...newCacheNodes], 'id'),
      cacheLinks: _.uniqBy(_.cloneDeep(cacheLinks.concat(newCacheLinks)), 'linkId'),
    };
    if (newNodes.length === 0) {
      options.transform = { k: 1, x: 0, y: 0 };
    }
    this.setState(options);
  };
  recoveryRelation = (data) => {
    let { links, cacheLinks, allLinks, nodes, allNodes } = this.state;
    links.push(allLinks.find((v) => v.linkId === data.linkId));
    cacheLinks = cacheLinks.filter((v) => v.linkId !== data.linkId);
    if (!nodes.find((v) => v.id === data.source)) {
      nodes.push(allNodes.find((v) => v.id === data.source));
    }
    if (!nodes.find((v) => v.id === data.target)) {
      nodes.push(allNodes.find((v) => v.id === data.target));
    }
    this.setState({
      links,
      nodes,
      cacheLinks,
    });
  };
  onRelation = async (d) => {
    let { objectDataList } = this.state;
    let option = {
      showMask: true,
      searchKeys: [],
    };
    this.setState({
      nodeInfo: d,
    });
    if (!objectDataList[d.id]) {
      if (d.type === 'person') {
        // let personData =
        let options ={ aid: d.id }
        if(d.isPersonId){
          options={personId:d.id}
        }
        await this.getPersonData(options);
      }
      if (d.type === 'vehicle') {
        await this.getVehicleData({ plateId: d.id });
      }
    }
    this.setState(option);
  };

  onZoom = (transform) => {
    this.setState({
      transform: transform,
    });
  };
  searchKeyChange = (keys) => {
    let { nodeInfo, selectDataList } = this.state;
    let diffKeys = _.difference(keys, selectDataList[nodeInfo.id]);
    if (nodeInfo.type === 'device') {
      diffKeys = keys;
    }
    this.setState({
      searchKeys: diffKeys,
    });
  };

  jumpDetail = ({ item, list }) => {
    // eslint-disable-next-line no-unused-vars
    let { history } = this.props;
    // if (themeMode === 'single') {
    //   base = `/objectMap/${BaseStore.tab.createTabKey()}`;
    // }
    // let moduleName = item.type === 'vehicle' ? 'vehicleSnapshot' : 'faceSnapshot';
    const id = item.id || item.aid;
    let option = {
      currentId: id,
      type: `${item.type || 'face'}Detail`,
      data: item,
      list,
      history,
    };
    Shared.jumpLibraryDetail(option);
    // LM_DB.put(option);
    // location = location ? location : {};
    // history = history ? history : [];
    // location.pathname = `${base}/${moduleName}/${BaseStore.tab.createTabKey()}/${id}`;
    // const pageState = { tabTitle: '抓拍详情' };
    // location.state = Object.assign({}, location.state, { pageState });
    // history.push(location);
  };

  jumpTogetherDetail = async ({ item }) => {
    let result = item.type === 'vehicle' ? await RelationShipServer.getVehicleById(item.captureId) : await RelationShipServer.queryPersons(item.captureId);
    let datas = result.data;
    delete datas.captureVehicleId;
    datas.type = item.type;
    if (!datas) {
      message.warn('未查询到详情信息');
      return;
    }
    this.jumpDetail({ item: datas, list: [datas] });
  };

  getBaseTop = (transform, nodeInfo) => {
    return transform.y + nodeInfo.y * transform.k;
  };
  getTop = (transform, nodeInfo, aids) => {
    aids = _.uniq(aids);
    let cardHeight = 0;
    let boxHeight = this.viewRef.current.offsetHeight;
    if (nodeInfo.type === 'person') {
      cardHeight = 495;
    }
    if (nodeInfo.type === 'device') {
      cardHeight = 530;
      if (aids.length > 1) {
        cardHeight = 600;
      }
    }
    if (nodeInfo.type === 'place') {
      cardHeight = 303;
    }
    if (nodeInfo.type === 'vehicle') {
      cardHeight = 298;
    }

    let baseTop = this.getBaseTop(transform, nodeInfo);
    let top = baseTop - cardHeight / 2;
    if (top + cardHeight > boxHeight) {
      top = boxHeight - cardHeight;
    }
    if (top <= 0) {
      top = 0;
    }

    return top;
  };

  goPage = async (type, id) => {
    let { history } = this.props;
    this.showRelationDetailBoxChange(false);
    let pathname;
    if (type === 'device') {
      let deviceId = BaseStore.device.getDeviceByCId(id).id;
      pathname = `/deviceFile/view?id=${deviceId}`;
    }
    if (type === 'place') {
      pathname = `/placeFile/view?id=${id}`;
    }
    const location = {
      pathname,
    };
    history.push(location);
  };

  jumpPersonDetail = (option) => {
    this.showRelationDetailBoxChange(false);
    let { history } = this.props;
    const { aid, personId } = option;
    let pathname = `/personArchives/personnelDetail?`;
    if (aid) {
      pathname = `${pathname}aid=${aid}&&`;
    }
    if (personId) {
      pathname = `${pathname}personId=${personId}`;
    } else {
      pathname = pathname.split('&&')[0];
    }
    const location = {
      pathname,
    };
    history.push(location);
  };
  render() {
    let {
      nodes,
      links,
      showMask,
      nodeInfo,
      cacheBoxVisible,
      cacheLinks,
      allNodes,
      transform,
      objectDataList,
      selectDataList,
      relationDetailBoxVisible,
      detailData,
      loading,
      deviceSearchTime,
    } = this.state;
    // console.log(_.cloneDeep(nodes));

    // nodes=nodes.map(v => {
    //   delete v.avatar
    //   return v
    // })
    // console.log(nodes);
    let type = nodeInfo.type;
    let r = 34; //圆的半径
    let left = transform.x + (nodeInfo.x - r) * transform.k - boxWidth - 15;
    return (
      <div ref={this.viewRef} className="relational-atlas-view">
        <Progress status={loading} />
        {this.props.hasIconAction ? (
          <div
            className="cache-btn-box"
            onClick={() => {
              this.showCacheBoxChange(true);
            }}
          >
            <div className="cache-btn-box-btn">
              <IconFont type="icon-M_Bar_SafeBox1" />
            </div>
            <div className="cache-btn-box-content">
              <div className="cache-btn-box-title">保管箱</div>
              <div className="cache-btn-box-num">{cacheLinks.length}</div>
            </div>
          </div>
        ) : null}
        {nodes.length === 0 && loading !== 'loading' ? (
          <NoData />
        ) : nodes.length ? (
          <RelationShip
            nodes={nodes}
            links={links}
            onLineClick={this.onLineClick}
            // onNodeClick={this.onNodeClick}
            onRelation={this.onRelation}
            onRemove={this.cacheRelation}
            onZoom={this.onZoom}
            {...this.props}
          />
        ) : null}

        {showMask && (
          <CBox
            className="relational-atlas-mask"
            onClick={() => {
              this.showMask(false);
            }}
          >
            {left >= 0 ? (
              <div
                className="obj-popover-box-left-pop"
                style={{
                  left: transform.x + (nodeInfo.x - r) * transform.k - 16,
                  top: this.getBaseTop(transform, nodeInfo) - 10,
                }}
              />
            ) : (
              <div
                className="obj-popover-box-right-pop"
                style={{
                  left: transform.x + (nodeInfo.x + r) * transform.k - 6,
                  top: this.getBaseTop(transform, nodeInfo) - 10,
                }}
              />
            )}

            <div
              className="obj-popover-box"
              onClick={(e) => {
                e.stopPropagation();
              }}
              style={{
                left: left >= 0 ? left : left + boxWidth + 2 * r + 30,
                top: this.getTop(
                  transform,
                  nodeInfo,
                  links.filter((v) => v.target === nodeInfo.id).map((v) => v.source)
                ),
                width: boxWidth,
              }}
            >
              {type === 'place' && (
                <PlaceCard
                  click={() => {
                    this.goPage('place', nodeInfo.id);
                  }}
                  searchKeyChange={this.searchKeyChange}
                  id={nodeInfo.id}
                  selectDataList={selectDataList}
                />
              )}
              {type === 'device' && (
                <DeviceCard
                  click={() => {
                    this.goPage('device', nodeInfo.id);
                  }}
                  searchKeyChange={this.searchKeyChange}
                  deviceTimeChange={this.deviceTimeChange}
                  selectDataList={selectDataList}
                  aids={links.filter((v) => v.target === nodeInfo.id).map((v) => v.source)}
                  objectDataList={objectDataList}
                  deviceSearchTime={deviceSearchTime}
                  nodeInfo={nodeInfo}
                />
              )}
              {type === 'person' && (
                <PersonCard
                  click={() => {
                    this.jumpPersonDetail(objectDataList[nodeInfo.id]);
                  }}
                  searchKeyChange={this.searchKeyChange}
                  selectDataList={selectDataList}
                  personData={objectDataList[nodeInfo.id]}
                />
              )}

              {type === 'vehicle' && (
                <VehicleCard
                  // click={() => {
                  //   this.jumpPersonDetail(objectDataList[nodeInfo.id]);
                  // }}
                  searchKeyChange={this.searchKeyChange}
                  selectDataList={selectDataList}
                  vehicleData={objectDataList[nodeInfo.id]}
                />
              )}

              <div className="relational-atlas-btn-box">
                <Button
                  onClick={() => {
                    this.showMask(false);
                  }}
                >
                  关闭
                </Button>
                <Button type="primary" onClick={this.search}>
                  <IconFont type="icon-S_Photo_Relationship" />
                  关系挖掘
                </Button>
              </div>
            </div>
          </CBox>
        )}
        <Drawer className="cache-box-drawer" title={'保管箱'} width={840} hasFooter={false} visible={cacheBoxVisible} onClose={() => this.showCacheBoxChange(false)}>
          <CacheBox cacheLinks={cacheLinks} allNodes={allNodes} recoveryRelation={this.recoveryRelation} />
        </Drawer>
        {relationDetailBoxVisible && (
          <Relations
            className="relation-detail-box-drawer"
            jumpDetail={this.jumpDetail}
            jumpTogetherDetail={this.jumpTogetherDetail}
            title={detailData.relationName}
            hasTimeLine={detailData.hasTimeLine}
            card={this.renderDetailCard()}
            dataDesc={detailData.dataDesc}
            singleCard={detailData.singleCard}
            dataList={detailData.dataList || []}
            width={832}
            visible={relationDetailBoxVisible}
            onClose={() => this.showRelationDetailBoxChange(false)}
          />
        )}
      </div>
    );
  }
}

RelationShipWithLinkAndNode.Relations = Relations;
RelationShipWithLinkAndNode.relationUtils = relationUtils;
export default Dict.withDict(['100800', '114800', '106900', '100000', '115000'])(RelationShipWithLinkAndNode);
