<template>
  <div id="gxt">
    <div class="rwgxtp-left">
      <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" v-show="types">
        <div slot="node" slot-scope="{ node }">
          <div
            class="coil-container"
            style="border-radius: 32px; cursor: pointer"
            @click="storageCount(node)"
            @dblclick="storageDetail(node)"
          >
            <div class="coil coil-1"></div>
            <div class="coil coil-2"></div>
            <div class="coil coil-3"></div>
            <div class="coil coil-4"></div>
          </div>
          <img id="aa2" :src="node.data.img" :onerror="errimg"/>
          <div class="node-div">
            {{ node.data.names }}
          </div>
        </div>
      </SeeksRelationGraph>
    </div>
    <div class="rwgxtp-right" style="display:none">
      <div class="table-div">
        <el-table
          ref="singleTable"
          :data="tableData"
          height="100%"
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column type="index" label="序号" width="70px">
          </el-table-column>
          <el-table-column property="gxlx" label="关系类型" width="100px"> </el-table-column>
          <el-table-column property="gldx" label="关联对象"> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import SeeksRelationGraph from "relation-graph";
import { get, post } from "../../util/http_util";
import * as echarts from "echarts";
import jh_bg from "../../assets/img/dfzy/zwtp.png";
import { imgUrl } from "../../api/publicUrl";
export default {
  components: { SeeksRelationGraph },
  data() {
    return {
      graphOptions: {
        allowSwitchLineShape: false,
        allowSwitchJunctionPoint: false,
        disableZoom: false,
        defaultJunctionPoint: "border",
        allowShowZoomMenu: false, //工具栏中的放大缩小按钮
        layouts: [
          {
            label: "中心",
            // layoutName: "force",
            layoutName: "center",
            layoutClassName: "seeks-layout-center",
            useLayoutStyleOptions: true,
            // defaultNodeWidth: "74",
            // defaultNodeHeight: "74",
            defaultNodeBorderWidth: 0,
            defaultNodeColor: "rgba(238, 178, 94, 1)",
            defaultLineShape: 1,
            distance_coefficient: 0.8,
          },
          {
            label: "树形下",
            layoutName: "tree",
            layoutClassName: "seeks-layout-center",
            useLayoutStyleOptions: true,
            from: "top",
            defaultNodeWidth: "30",
            defaultNodeHeight: "100",
            defaultJunctionPoint: "tb",
            defaultNodeShape: 1,
            defaultLineShape: 4,
            defaultNodeBorderWidth: 0,
            defaultLineColor: "rgba(0, 186, 189, 1)",
            defaultNodeColor: "rgba(0, 206, 209, 1)",
            min_per_width: 140,
            max_per_width: 170,
            min_per_height: 200,
          },
          {
            label: "树形右",
            layoutName: "tree",
            layoutClassName: "seeks-layout-center",
            useLayoutStyleOptions: true,
            from: "left",
            defaultNodeWidth: "100",
            defaultNodeHeight: "30",
            defaultJunctionPoint: "lr",
            defaultNodeShape: 1,
            defaultLineShape: 3,
            defaultNodeBorderWidth: 0,
            defaultLineColor: "#cccccc",
            defaultNodeColor: "#43a2f1",
            min_per_width: 200,
            max_per_width: 400,
            min_per_height: 140,
            max_per_height: 170,
          },
        ],
        // 这里可以参考"Graph 图谱"中的参数进行设置
      },
      jh_bg: jh_bg,
      width: 40,
      height: 40,
      url_: jh_bg,
      zt_id: "",
      db_zt_id: "",
      tableData: [],
      errimg: "this.src='" + jh_bg + "'",
      types:true,
    };
  },
  methods: {
    showSeeksGraph(__graph_json_data) {
      let _this = this;
      this.$refs.seeksRelationGraph.setJsonData(
        __graph_json_data,
        (seeksRGGraph) => {
          // 这些写上当图谱初始化完成后需要执行的代码
          _this.yc_table_data();
        }
      );
    },
    //点击节点事件
    onNodeClick(nodeObject, $event) {
      if (nodeObject.id == this.zt_id) {
        return;
      }
      this.db_zt_id = nodeObject.id;
      // this.cli_gxt(nodeObject.id, 1, 1);
    },
    //点击线事件
    onLineClick(lineObject, $event) {
      // console.log("onLineClick:", lineObject);
    },
    //节点点击事件
    storageCount(node) {
      clearTimeout(this.time);
      this.time = setTimeout(() => {
        // alert('单击'+node.id)
      }, 300);
    },
    //节点双击事件
    storageDetail(node) {
      clearTimeout(this.time);
      this.onNodeClick(node);
      // alert('双击')
    },
    //过滤数据，绑定不同的图像和颜色
    arr_push(
      arr_entity,
      arr_p, //当前主实体数据
      arr_z, //当前节点的线数据
      arr_q,//当前节点实体
      arr_nodes, //当前需要存的数组节点
      color_border, //边框色
      type, //判断是初次加载关系图，还是点击节点加载关系图
      peopleOrOrganization_type
    ) {
      let _this = this;
      let rootIds;
      if (type == 0) {
        //初次加载关系图
        rootIds = arr_nodes.rootId;
      } else {
        //点击节点展示次级节点
        rootIds = _this.db_zt_id;
      }
      arr_z.forEach((item,index) => {
            let idp = arr_entity.filter(e=>e.uuid ==arr_p[index].uuid)[0].meaningTag;
            let idq = arr_entity.filter(e=>e.uuid ==arr_q[index].uuid)[0].meaningTag;
            let img_url = arr_q[index].imgUrl==undefined?'':arr_q[index].imgUrl;
            arr_nodes.nodes.push({
              id: idq,
              // name: item.name,
              color: "rgb(195 195 195)", //背景色
              borderColor: color_border, //边框色
              fontColor: "#ffffff", //字体颜色
              borderWidth: 2, //边框宽度
              nodeShape: 0, //节点形状
              width: _this.width,
              height: _this.height,
              data: {
                names: arr_q[index].foreignName==undefined?arr_q[index].name:arr_q[index].foreignName,
                types: item.relation,
                // distinguishType: item.distinguishType,
                img: img_url,
                id: idq,
                datas: item,
              },
            });
            arr_nodes.links.push({
              from: idp, //线的开始点
              to: idq, //线的结束点
              text: item.relation, //线上显示的字
              color: "rgb(210 210 210)", //线的颜色
              fontColor: "rgb(226 226 226)", //线上显示的字的颜色
            });
      });
      return arr_nodes;
    },
    //id，type:层级  _type:初次和二次点击
    cli_gxt(id, types, _type,peopleOrOrganization_type) {
      let _this = this;
      let paramDatas = {
        meaningTag: id + "",
        level:types,
        relationType:"",
        type:peopleOrOrganization_type,
        limit:25
        // type: "",
        // identification: types,
      };
      post("api/rest/neo4j/peoplOrInstitution", paramDatas)
        .then((data) => {
          if(data.p.length>0){
            _this.types = true;
          }
          _this.query_rwk(data,types, _type,peopleOrOrganization_type);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    query_rwk(data,level,type,peopleOrOrganization_type) {
      let _this = this;
      if (data != null) {
        let arr_nodes = {};//所有节点以及线的集合
        let arr_entity = [];
        if(data.p.length>0){
          let img_url = data.p[0].imgUrl==undefined?'':data.p[0].imgUrl;
          let arr_nodes_ccjz = {//当前主节点的属性
            rootId: data.p[0].meaningTag,
            nodes: [
              {
                id: data.p[0].meaningTag,
                color: "rgb(195 195 195)",
                borderColor: "rgb(255, 34, 34)",
                fontColor: "#ffffff",
                borderWidth: 2,
                nodeShape: 0,
                width: this.width,
                height: this.height,
                data: {
                  names: data.p[0].foreignName==undefined?data.p[0].name:data.p[0].foreignName,
                  id: data.p[0].meaningTag,
                  // datas: data.opponent,
                  // distinguishType: data.distinguishType,
                  img: img_url,
                },
              },
            ],
            links: [],
          };
          let arr_nodes_dbcli = {
            nodes: [],
            links: [],
          };//设置点击次级节点的属性
          if (type == 0) {
            this.zt_id = data.p[0].meaningTag;//存储当前主节点id
            this.data_type = [];
            //初次加载关系图
            arr_nodes = arr_nodes_ccjz;
            if(level=="1"){
              arr_entity = [{uuid:data.p[0].uuid,meaningTag:data.p[0].meaningTag,name:data.p[0].name}];
              if(data.q.length>0){
                arr_entity = arr_entity.concat(data.q);
                arr_entity.forEach((item,index)=>{
                  if(item.meaningTag=='null'||item.meaningTag==''||item.meaningTag==undefined){
                    arr_entity[index].meaningTag = Math.round(Math.random()*10000)+'';
                  }
                  if(item.uuid=='null'||item.uuid==''||item.uuid==undefined){
                    arr_entity[index].uuid = Math.round(Math.random()*10000)+'';
                  }
                });
                arr_nodes = this.arr_push(
                  arr_entity,
                  data.p,//主体数据
                  data.r,//关系线数据
                  data.q,//实体数据
                  arr_nodes,//主对象
                  "rgb(37, 255, 97)",//颜色
                  type,//判断是初次加载还是点击图标二次展示下级
                  peopleOrOrganization_type
                );
              }
            }
            if(level=="2"){
              arr_entity = [{uuid:data.p[0].uuid,meaningTag:data.p[0].meaningTag,name:data.p[0].name}];
              if(data.q.length>0){
                arr_entity = arr_entity.concat(data.q);
                arr_entity.forEach((item,index)=>{
                  if(item.meaningTag=='null'||item.meaningTag==''||item.meaningTag==undefined){
                    arr_entity[index].meaningTag = Math.round(Math.random()*10000)+'';
                  }
                  if(item.uuid=='null'||item.uuid==''||item.uuid==undefined){
                    arr_entity[index].uuid = Math.round(Math.random()*10000)+'';
                  }
                });
                arr_nodes = this.arr_push(
                  arr_entity,
                  data.p,//关系线数据
                  data.r,//关系线数据
                  data.q,//实体数据
                  arr_nodes,//主对象
                  "rgb(37, 255, 97)",//颜色
                  type,//判断是初次加载还是点击图标二次展示下级
                  peopleOrOrganization_type
                );
              }
              if(data.q2.length>0){
                arr_entity = arr_entity.concat(data.q2);
                arr_entity.forEach((item,index)=>{
                  if(item.meaningTag=='null'||item.meaningTag==''||item.meaningTag==undefined){
                    arr_entity[index].meaningTag = Math.round(Math.random()*10000)+'';
                  }
                  if(item.uuid=='null'||item.uuid==''||item.uuid==undefined){
                    arr_entity[index].uuid = Math.round(Math.random()*10000)+'';
                  }
                });
                arr_nodes = this.arr_push(
                  arr_entity,
                  data.q,//关系线数据
                  data.r2,//关系线数据
                  data.q2,//实体数据
                  arr_nodes,//主对象
                  "rgb(0, 213, 255)",//颜色
                  type,//判断是初次加载还是点击图标二次展示下级
                  peopleOrOrganization_type
                );
              }
            }
            if(level=="3"){
              arr_entity = [{uuid:data.p[0].uuid,meaningTag:data.p[0].meaningTag,name:data.p[0].name}];
              if(data.q.length>0){
                arr_entity = arr_entity.concat(data.q);
                arr_entity.forEach((item,index)=>{
                  if(item.meaningTag=='null'||item.meaningTag==''||item.meaningTag==undefined){
                    arr_entity[index].meaningTag = Math.round(Math.random()*10000)+'';
                  }
                  if(item.uuid=='null'||item.uuid==''||item.uuid==undefined){
                    arr_entity[index].uuid = Math.round(Math.random()*10000)+'';
                  }
                });
                arr_nodes = this.arr_push(
                  arr_entity,
                  data.p,//关系线数据
                  data.r,//关系线数据
                  data.q,//实体数据
                  arr_nodes,//主对象
                  "rgb(37, 255, 97)",//颜色
                  type,//判断是初次加载还是点击图标二次展示下级
                  peopleOrOrganization_type
                );
              }
              if(data.q2.length>0){
                arr_entity = arr_entity.concat(data.q2);
                arr_entity.forEach((item,index)=>{
                  if(item.meaningTag=='null'||item.meaningTag==''||item.meaningTag==undefined){
                    arr_entity[index].meaningTag = Math.round(Math.random()*10000)+'';
                  }
                  if(item.uuid=='null'||item.uuid==''||item.uuid==undefined){
                    arr_entity[index].uuid = Math.round(Math.random()*10000)+'';
                  }
                });
                arr_nodes = this.arr_push(
                  arr_entity,
                  data.q,//关系线数据
                  data.r2,//关系线数据
                  data.q2,//实体数据
                  arr_nodes,//主对象
                  "rgb(0, 213, 255)",//颜色
                  type,//判断是初次加载还是点击图标二次展示下级
                  peopleOrOrganization_type
                );
              }
              if(data.q3.length>0){
                arr_entity = arr_entity.concat(data.q3);
                arr_entity.forEach((item,index)=>{
                  if(item.meaningTag=='null'||item.meaningTag==''||item.meaningTag==undefined){
                    arr_entity[index].meaningTag = Math.round(Math.random()*10000)+'';
                  }
                  if(item.uuid=='null'||item.uuid==''||item.uuid==undefined){
                    arr_entity[index].uuid = Math.round(Math.random()*10000)+'';
                  }
                });
                arr_nodes = this.arr_push(
                  arr_entity,
                  data.q2,//关系线数据
                  data.r3,//关系线数据
                  data.q3,//实体数据
                  arr_nodes,//主对象
                  "rgb(197, 170, 0)",//颜色
                  type,//判断是初次加载还是点击图标二次展示下级
                  peopleOrOrganization_type
                );
              }
            }
          } else {
            //点击节点展示次级节点
            arr_nodes = arr_nodes_dbcli;
            if(level=="1"){
              arr_entity = [{uuid:data.p[0].uuid,meaningTag:data.p[0].meaningTag,name:data.p[0].name}];
              if(data.q.length>0){
                arr_entity = arr_entity.concat(data.q);
                arr_entity.forEach((item,index)=>{
                  if(item.meaningTag=='null'||item.meaningTag==''||item.meaningTag==undefined){
                    arr_entity[index].meaningTag = Math.round(Math.random()*10000)+'';
                  }
                  if(item.uuid=='null'||item.uuid==''||item.uuid==undefined){
                    arr_entity[index].uuid = Math.round(Math.random()*10000)+'';
                  }
                });
                arr_nodes = this.arr_push(
                  arr_entity,
                  data.p,//关系线数据
                  data.r,//关系线数据
                  data.q,//实体数据
                  arr_nodes,//主对象
                  "rgb(37, 255, 97)",//颜色
                  type,//判断是初次加载还是点击图标二次展示下级
                  peopleOrOrganization_type
                );
              }
            }
          }
        
          let arr_ls = arr_nodes.links.sort(() => Math.random() - 0.5);
          arr_nodes.links = arr_ls;
          if (type == 0) {
            //初次加载关系图
            arr_nodes.links = arr_nodes.links.filter((item,index) =>{
              return arr_nodes.links.findIndex(item1 =>item1.from == item.from && item1.to == item.to && item1.text == item.text) == index
            })
            _this.showSeeksGraph(arr_nodes);
          } else {
            //点击节点展示次级节点
            let arr = [];
            let _all_links = this.$refs.seeksRelationGraph.getLines();
            arr_nodes.links.forEach((links, index) => {
              _all_links.forEach((link) => {
                if (
                  (links.from == link.fromNode.id &&
                    links.to == link.toNode.id) ||
                  (links.from == link.toNode.id && links.to == link.fromNode.id)
                ) {
                  arr.push(index);
                }
              });
            });
            arr = arr.reverse();
            arr.forEach((item) => {
              arr_nodes.links.splice(item, 1);
            });
            this.$refs.seeksRelationGraph.appendJsonData(
              arr_nodes,
              (seeksRGGraph) => {
                // _this.yc_table_data();
              }
            );
          }
        }
      }
    },
    yc_table_data() {
      this.tableData = [];
      let _all_nodes = this.$refs.seeksRelationGraph.getNodes();
      _all_nodes.forEach((nodes, index) => {
        if (nodes.data.types != undefined) {
          this.tableData.push({
            gxlx: nodes.data.types,
            gldx: nodes.data.names,
          });
        }
      });
    },
    //数组去重
    arr_unique (arr){
      const res = new Map();
      return arr.filter((a)=> !res.has(a.uuid)&&res.set(a.uuid,1))
    },
  },
  activated(){
      
  },
  props: {
    clientDetails: {
      type: Object,
      default: {},
    },
  },
  watch:{
    clientDetails: function (val) {
      this.tableData = [];
      this.types=false;
      this.cli_gxt(val.module_id, val.types, 0 ,val.peopleOrOrganization);
    },
  }
};
</script>
<style lang="scss">
#gxt {
  width: 100%;
  height: 100%;
  #aa2 {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    border-radius: 19px;
    background-color: white;
    margin-top: -40px;
  }
  .rwgxtp-left {
    // width: 65%;
    width: 100%;
    height: 100%;
    float: left;
    position: relative;
    background: #23345066;
    .rel-map[data-v-2964abc9] {
      background-color: #1d2d4600 !important;
    }
    .c-my-node2 {
      border: none;
      background-position: center center;
      background-size: 100%;
      // height: 74px;
      // width: 74px;
      border-radius: 40px;
    }
    .c-node-name2 {
      text-align: center;
      margin-top: 85px;
      position: absolute;
      // pointer-events: none;
      width: 800px;
      margin-left: -362px;
    }
    .rel-diy-node {
      border: 2px solid rgba(111, 111, 111, 0.56) !important;
      box-shadow: 0px 0px 30px rgba(217, 232, 255, 0.69) !important;
      background-color: rgba(255, 255, 255, 0.66) !important;
    }
    .rel-node-peel {
      font-size: 10px !important;
      .node-div {
        color: white;
        font-size: 12px;
        position: absolute;
        width: 500px;
        height: 25px;
        line-height: 25px;
        margin-top: 5px;
        margin-left: -230px;
        text-align: center;
        pointer-events: none;
      }
      .rel-node-shape-0 {
        padding: 2px !important;
        box-shadow: 0px 0px 9px #3fa1ab;
      }
      .rel-node-shape-1 {
        padding: 2px !important;
        box-shadow: 0px 0px 9px #3fa1ab;
      }
      .coil-container {
        position: relative;
        width: 100%;
        height: 100%;
        animation: 6s infinite linear reactor-anim;
        .coil-1 {
          transform: rotate(0deg);
        }
        .coil-2 {
          transform: rotate(90deg);
        }
        .coil-3 {
          transform: rotate(180deg);
        }
        .coil-4 {
          transform: rotate(270deg);
        }
        .coil {
          position: absolute;
          width: 3px;
          height: 3px;
          border-radius: 4px;
          top: calc(50% - 24px);
          left: calc(50% - 16px);
          transform-origin: 16px 24px;
          background-color: #52fefe;
          // box-shadow: 0px 0px 5px #52fefe inset;
        }
      }
      @keyframes reactor-anim {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    }
    //关系图谱工具条样式
    .c-mini-toolbar[data-v-3cfdb1cf] {
      border: #7b7b7b solid 1px;
      background-color: #1d2d46;
      box-shadow: 0px 0px 4px #828282;
      bottom: 20px;
      margin-left: 30px !important;
      margin-top: unset !important;
    }
    .c-mb-button[data-v-3cfdb1cf] {
      background-color: #194b61;
      color: #159ea2;
      border: #545454 solid 1px;
    }
    .c-mb-button .c-mb-text[data-v-3cfdb1cf] {
      color: #f2f6fc;
    }
    .c-mb-button .c-mb-child-panel[data-v-3cfdb1cf] {
      margin-top: -21px;
      background-color: #545454;
      margin-left: 41px !important;
    }
  }
  .rwgxtp-right {
    width: calc(35% - 0px);
    height: calc(100% - 0px);
    float: left;
    position: relative;
    .table-div {
      width: 95%;
      margin-top: 0px;
      margin-left: 20px;
      .el-table--group::after,
      .el-table--border::after,
      .el-table::before {
        background-color: unset;
        border: unset;
      }
      .el-table tr {
        background-color: #1d2d46 !important;
        color: #ffffffc7;
      }
      .el-table td {
        font-size: 12px;
        border-bottom: 1px solid #127a89;
        background-color: #1d2d46 !important;
      }
      .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: #9093991c;
      }
      .el-table th {
        border: unset;
        font-size: 14px;
        background-color: #5aa09a3d !important;
      }
      .el-table--fit {
        background: none !important;
      }
    }
  }
}
</style>