import React from "react";
import _ from "lodash";
import "./index.less";
import { Row, Col } from "antd";
import CBox from '../../../../themeComponents/CBox'
import IconFont from '../../../../themeComponents/IconFont'
import NoData from '../../../../components/NoData'
import ImageView from '../../../../components/ImageView'
// import { IconFont, CBox, NoData, ImageView } from "micro-components";

class cacheBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showNodeList: _.uniqBy(props.cacheLinks, "source").map((v) => v.source),
    };
  }

  showList = (id) => {
    let { showNodeList } = this.state;
    if (showNodeList.includes(id)) {
      showNodeList = showNodeList.filter((v) => v !== id);
    } else {
      showNodeList.push(id);
    }
    this.setState({
      showNodeList,
    });
  };
  render() {
    let { cacheLinks, allNodes, recoveryRelation } = this.props;

    let nodeList = [];
    cacheLinks.forEach((v) => {
      if (!nodeList.find((j) => j.node.id === v.source)) {
        let nodeItem = allNodes.find((j) => j.id === v.source);
        let item = allNodes.find((j) => j.id === v.target);
        nodeList.push({
          node: nodeItem,
          linkList: [
            {
              relation: v.relation,
              list: [item],
            },
          ],
        });
      }
    });
    nodeList.forEach((v) => {
      let links = cacheLinks.filter((j) => j.source === v.node.id);
      let linkList = [];
      links.forEach((i) => {
        let linkListItem = linkList.find((j) => j.relation === i.relation);
        let item = allNodes.find((j) => j.id === i.target);
        i.avatar = item.avatar;
        i.name = item.name;
        if (linkListItem) {
          linkListItem.list.push(i);
        } else {
          linkList.push({
            relation: i.relation,
            list: [i],
          });
        }
      });
      v.linkList = linkList;
      v.num = links.length;
    });
    let { showNodeList } = this.state;
    return (
      <CBox className="cache-box-view">
        {nodeList && nodeList.length ? (
          nodeList.map((v, k) => {
            return (
              <div key={k} className="cache-node-box">
                <div className="node-header">
                  <div
                    className="node-item"
                    style={{
                      borderColor: `var(--force-${v.node.type})`,
                    }}
                  >
                    <div
                      className="node-item-img-box"
                      style={{
                        background: `var(--force-${v.node.type})`,
                      }}
                    >
                      <ImageView src={v.node.avatar} />
                    </div>
                  </div>
                  <div className="node-header-content">
                    <p className="ext-node" />
                    <div className="node-name">{v.node.name}</div>
                    <div className="relation-count-box">
                      <div className="relation-count-box-title">关系总数：</div>
                      <div className="relation-count">{v.num}</div>
                      <div
                        className={`relation-count-box-icon ${
                          showNodeList.includes(v.node.id) && "active"
                        }`}
                        onClick={() => {
                          this.showList(v.node.id);
                        }}
                      >
                        <IconFont type="icon-S_Arrow_SmallDown" />
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  className={`relation-list ${
                    showNodeList.includes(v.node.id) && "active"
                  }`}
                >
                  {v.linkList.map((n, index) => {
                    return (
                      <div key={index} className="relation-list-item">
                        <div
                          className="relation-title"
                          style={{
                            color: `var(--force-${n.list[0].type})`,
                          }}
                        >
                          {n.relation}
                        </div>
                        <Row type="flex" className="relation-node-list">
                          {n.list.map((m) => {
                            return (
                              <Col span={8} key={m.linkId}>
                                <RelationNode
                                  recoveryRelation={recoveryRelation}
                                  data={m}
                                />
                              </Col>
                            );
                          })}
                        </Row>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })
        ) : (
          <NoData />
        )}
      </CBox>
    );
  }
}

function RelationNode(props) {
  let { data, recoveryRelation } = props;
  return (
    <div className="relation-node-item">
      <div
        className="relation-node-box"
        style={{ borderColor: `var(--force-${data.type})` }}
      >
        <div
          className="relation-node-icon"
          style={{ background: `var(--force-${data.type})` }}
        >
          {data.type === "person" && <ImageView src={data.avatar} />}
          {data.type === "device" && (
            <IconFont type="icon-L_index_CameraGun1" />
          )}
          {data.type === "place" && <IconFont type="icon-L_Place_Community1" />}
        </div>
      </div>
      <div className="relation-node-content">
        <div className="relation-node-name">{data.name}</div>
        <div
          onClick={() => {
            recoveryRelation(data);
          }}
          className="relation-recovery"
        >
          恢复关系
        </div>
      </div>
    </div>
  );
}
export default cacheBox;
