<template>
  <div class="jsmind">
    <!-- 右上角菜单 -->
    <div class="toolbar">
      <ul class="toolbar-list">
        <li class="item">
          <span
            size="16"
            class="percent"
            style="font-size: 14px; color: rgb(29, 29, 31)"
            @click="zoom.value = 100"
            >{{ zoom.value }}%
          </span>
          <div class="scale-slide">
            <ul>
              <li class="normal-item" title="缩小" @click="zoomOut">
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 16 16"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M12.98 11.95l2.91 2.9c.15.15.15.38 0 .53l-.51.51a.37.37 0 01-.52 0L11.95 13a7.32 7.32 0 111.03-1.03zm-5.66 1.22a5.85 5.85 0 100-11.7 5.85 5.85 0 000 11.7zM4.76 6.6h5.12c.2 0 .37.16.37.36v.73c0 .2-.17.37-.37.37H4.76a.37.37 0 01-.37-.37v-.73c0-.2.16-.36.37-.36z"
                    fill="#2B2F36"
                    fill-rule="nonzero"
                  ></path>
                </svg>
              </li>

              <li class="slider">
                <el-slider
                  v-model="zoom.value"
                  :show-tooltip="false"
                  :min="zoom.min"
                  :max="zoom.max"
                ></el-slider>
              </li>

              <li class="normal-item" title="画布放大" @click="zoomIn">
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 16 16"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M12.98 11.95l2.91 2.9c.15.15.15.38 0 .53l-.51.51a.37.37 0 01-.52 0L11.95 13a7.32 7.32 0 111.03-1.03zm-6.4-5.36V4.76c0-.2.17-.37.37-.37h.73c.2 0 .37.16.37.37v1.83h1.83c.2 0 .37.16.37.36v.73c0 .2-.17.37-.37.37H8.05v1.83c0 .2-.16.37-.37.37h-.73a.37.37 0 01-.36-.37V8.05H4.76a.37.37 0 01-.37-.37v-.73c0-.2.16-.36.37-.36h1.83zm.74 6.58a5.85 5.85 0 100-11.7 5.85 5.85 0 000 11.7z"
                    fill="#2B2F36"
                    fill-rule="nonzero"
                  ></path>
                </svg>
              </li>
            </ul>
          </div>
        </li>

        <!-- <div class="layout item">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12.56 4.06c1.41 0 2.8.28 4.05.8l-.99 1.21a9.3 9.3 0 00-2.67-.5l-.4-.01h-.43a9.14 9.14 0 00-5.28 2c-.72.61-1.3 1.32-1.69 2.09a5.1 5.1 0 000 4.82c.39.74.95 1.41 1.68 2 .73.59 1.59 1.06 2.55 1.39a9.75 9.75 0 004.5.42l.44-.06.53-.11.06-.02c.07-.03.14-.1.2-.2a.8.8 0 00.1-.47l-.03-.12-.03-.1-.05-.22a3.32 3.32 0 01.46-2.53c.52-.8 1.36-1.3 2.27-1.36H19.45l.1-.01c.48-.07.87-.53.96-1.1l.02-.14v-.25l-.02-.22-.05-.29a5.6 5.6 0 00-1.13-2.4l.96-1.2a7.08 7.08 0 011.63 3.34l.06.34.04.34v.37c-.08 1.45-1.12 2.6-2.4 2.7H18.02c-.48 0-.94.26-1.23.7-.22.34-.32.75-.28 1.16l.02.18.07.27a2.3 2.3 0 01-.2 1.75c-.24.41-.6.72-1 .86l-.17.05-.57.12c-.42.08-.84.13-1.26.16l-.42.03h-.44c-1.26 0-2.5-.2-3.65-.6a9.85 9.85 0 01-3-1.63 7.91 7.91 0 01-2.07-2.47 6.58 6.58 0 010-6.19A8.24 8.24 0 015.9 6.42a9.85 9.85 0 013-1.72c.92-.32 1.86-.53 2.81-.6l.41-.02.43-.01h.02zM7.4 12.4a1.1 1.1 0 110 2.2 1.1 1.1 0 010-2.2zm12.29-9.01a.5.5 0 01.63-.13l.07.05.4.31c.18.16.23.42.12.63l-.05.08-7.69 9.6-1.14.51a.2.2 0 01-.28-.17v-.05L12 13l7.69-9.61zM8.4 8.4a1.1 1.1 0 110 2.2 1.1 1.1 0 010-2.2zm4.2-1.5a1.1 1.1 0 110 2.2 1.1 1.1 0 010-2.2z"
                fill="#2B2F36"
                fill-rule="evenodd"
              ></path>
            </svg>
            <div class="structure">
              <div class="tab-content">
                <h3 class="tab-label">结构</h3>
                <ul class="struct-list">
                  <li @click="toggleStucture('side')">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="32"
                      height="32"
                      viewBox="0 0 32 32"
                    >
                      <g fill="none" fill-rule="evenodd">
                        <path
                          :fill="pathColor('side')"
                          d="M18.77 15.25H22a.75.75 0 110 1.5h-4c1.05.97 1.9 3.27 2.76 7.02.4 1.73.88 2.48 1.24 2.48a.75.75 0 110 1.5c-1.33 0-2.16-1.29-2.7-3.65-.87-3.77-1.76-5.93-2.38-6.32A2 2 0 0116 18c-.35 0-.68-.09-.97-.25H15c-.36 0-.84.75-1.24 2.48-1.07 4.66-2.13 7.1-3.56 7.5a.75.75 0 11-.4-1.45c.62-.18 1.58-2.37 2.5-6.38.34-1.5.8-2.57 1.44-3.15H10a.75.75 0 110-1.5h3.02a9.55 9.55 0 01-.72-2.15c-.92-4.01-1.88-6.2-2.5-6.38a.75.75 0 11.4-1.44c1.43.4 2.5 2.83 3.56 7.49.21.93.45 1.57.68 1.97A2 2 0 0116 14a2 2 0 011.43.6c.55-.95 1.22-2.87 1.87-5.7.54-2.36 1.37-3.65 2.7-3.65a.75.75 0 110 1.5c-.36 0-.84.75-1.24 2.48-.64 2.8-1.28 4.79-2 6.02z"
                        ></path>
                        <rect
                          width="5"
                          height="3"
                          x="26"
                          y="5"
                          :fill="rectColor('side')"
                          rx=".5"
                        ></rect>
                        <rect
                          width="5"
                          height="3"
                          x="26"
                          y="15"
                          :fill="rectColor('side')"
                          rx=".5"
                        ></rect>
                        <rect
                          width="5"
                          height="3"
                          x="26"
                          y="25"
                          :fill="rectColor('side')"
                          rx=".5"
                        ></rect>
                        <rect
                          width="5"
                          height="3"
                          x="1"
                          y="5"
                          :fill="rectColor('side')"
                          rx=".5"
                        ></rect>
                        <rect
                          width="5"
                          height="3"
                          x="1"
                          y="15"
                          :fill="rectColor('side')"
                          rx=".5"
                        ></rect>
                        <rect
                          width="5"
                          height="3"
                          x="1"
                          y="25"
                          :fill="rectColor('side')"
                          rx=".5"
                        ></rect>
                      </g>
                    </svg>
                  </li>
  
                  <li class="" @click="toggleStucture('right')">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="32"
                      height="32"
                      viewBox="0 0 32 32"
                    >
                      <g
                        fill="none"
                        fill-rule="evenodd"
                        transform="translate(2 4)"
                      >
                        <path
                          :fill="pathColor('right')"
                          d="M4.92 11.25H9.5a.75.75 0 110 1.5H4.92c.87 1.34 1.66 3.56 2.44 6.7.5 1.94 1.1 2.8 1.64 2.8a.75.75 0 110 1.5c-1.48 0-2.45-1.39-3.1-3.94-.82-3.33-1.67-5.5-2.4-6.5a2 2 0 110-2.63c.73-.98 1.58-3.16 2.4-6.49C6.56 1.64 7.53.25 9 .25a.75.75 0 010 1.5c-.55 0-1.15.86-1.64 2.8-.78 3.14-1.57 5.36-2.44 6.7z"
                        ></path>
                        <rect
                          width="12"
                          height="3"
                          x="14"
                          :fill="rectColor('right')"
                          rx=".5"
                        ></rect>
                        <rect
                          width="12"
                          height="3"
                          x="14"
                          y="10.5"
                          :fill="rectColor('right')"
                          rx=".5"
                        ></rect>
                        <rect
                          width="12"
                          height="3"
                          x="14"
                          y="21"
                          :fill="rectColor('right')"
                          rx=".5"
                        ></rect>
                      </g>
                    </svg>
                  </li>
                  <li class="" @click="toggleStucture('left')">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="32"
                      height="32"
                      viewBox="0 0 32 32"
                    >
                      <g
                        fill="none"
                        fill-rule="evenodd"
                        transform="matrix(-1 0 0 1 29 4)"
                      >
                        <path
                          :fill="pathColor('left')"
                          d="M4.92 11.25H9.5a.75.75 0 110 1.5H4.92c.87 1.34 1.66 3.56 2.44 6.7.5 1.94 1.1 2.8 1.64 2.8a.75.75 0 110 1.5c-1.48 0-2.45-1.39-3.1-3.94-.82-3.33-1.67-5.5-2.4-6.5a2 2 0 110-2.63c.73-.98 1.58-3.16 2.4-6.49C6.56 1.64 7.53.25 9 .25a.75.75 0 010 1.5c-.55 0-1.15.86-1.64 2.8-.78 3.14-1.57 5.36-2.44 6.7z"
                        ></path>
                        <rect
                          width="12"
                          height="3"
                          x="14"
                          :fill="rectColor('left')"
                          rx=".5"
                        ></rect>
                        <rect
                          width="12"
                          height="3"
                          x="14"
                          y="10.5"
                          :fill="rectColor('left')"
                          rx=".5"
                        ></rect>
                        <rect
                          width="12"
                          height="3"
                          x="14"
                          y="21"
                          :fill="rectColor('left')"
                          rx=".5"
                        ></rect>
                      </g>
                    </svg>
                  </li>
                </ul>
              </div>
            </div>
          </div> -->

        <div
          class="reset item normal-item"
          title="定位到中心主题"
          @click="reset"
        >
          <svg
            width="16"
            height="16"
            viewBox="0 0 16 16"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M.77 0h3.46c.21 0 .38.17.38.38v.77c0 .22-.17.39-.38.39h-2.7v2.7c0 .2-.16.38-.38.38H.38A.38.38 0 010 4.23V.77C0 .34.34 0 .77 0zm14.45 16h-3.46a.38.38 0 01-.38-.39v-.76c0-.22.17-.39.38-.39h2.7v-2.7c0-.2.17-.38.38-.38h.77c.21 0 .38.18.38.39v3.46c0 .43-.34.77-.77.77zM0 15.23v-3.46c0-.21.17-.39.38-.39h.77c.22 0 .39.18.39.39v2.7h2.69c.21 0 .38.16.38.38v.77c0 .2-.17.38-.38.38H.77a.77.77 0 01-.77-.77zM16 .78v3.46c0 .21-.17.38-.38.38h-.77a.38.38 0 01-.39-.38v-2.7h-2.69a.38.38 0 01-.38-.38V.4c0-.2.17-.38.38-.38h3.46c.43 0 .77.34.77.77zm-8 9.99a2.77 2.77 0 110-5.54 2.77 2.77 0 010 5.54z"
              fill="#2B2F36"
              fill-rule="nonzero"
            ></path>
          </svg>
        </div>
      </ul>
    </div>

    <!-- <div class="top-bar">
        <span class="export" @click="screen_shot">导出图片</span>
      </div> -->

    <div class="jsmind_layout">
      <div
        id="jsmind_container"
        ref="container"
        @click="nodeClick"
        @contextmenu.prevent.stop="nodeClick"
      ></div>
    </div>
    <!-- 方法图 -->
    <el-image-viewer v-if="showImg" :on-close="closeViewer" :src="imgSrc" :url-list="pictureUrlList"/>
  </div>
</template>
  
<script>
import "./jsmind/style/jsmind.css";
import jsMind from "./jsmind/js/jsmind.js";
import ElImageViewer from './imageViewer/index.vue'
export default {
  components:{
    ElImageViewer
  },
  props: ["row"],
  watch: {
    "zoom.value"(val) {
      const zoom = val / 100;
      this.jm.view.setZoom(zoom);
    },
    selectTypes(v) {
      this.loopTreeData(this.mind.data.children, (item) => {
        if (v.length) {
          if (v.includes(item.type)) {
            this.jm.set_node_color(
              item.id,
              this.bgMap[item.type].original,
              "#fff"
            );
          } else {
            this.jm.set_node_color(
              item.id,
              this.bgMap[item.type].transparent,
              "#fff"
            );
          }
        } else {
          this.jm.set_node_color(
            item.id,
            this.bgMap[item.type].transparent,
            "#fff"
          );
        }
      });
    },
   
  },
  computed: {
    pathColor() {
      return function (type) {
        return this.structure.active === type
          ? this.structure.pathActiveColor
          : this.structure.pathOrginalColor;
      };
    },
    rectColor() {
      return function (type) {
        return this.structure.active === type
          ? this.structure.rectActiveColor
          : this.structure.rectOrginalColor;
      };
    },
   
  },
  data() {
    return {
      showImg:false,
      imgSrc:'',
      pictureUrlList:[],
      rowData:[],
      next: true,
      mind: {
        meta: {
          name: "思维导图",
          author: "hizzgdev@163.com",
          version: "0.2",
        },
        format: "node_tree",
        data: {},
      },
      options: {
        container: "jsmind_container", // [必选] 容器的ID
        editable: false, // [可选] 是否启用编辑
        theme: "", // [可选] 主题
        view: {
          engine: "canvas", // 思维导图各节点之间线条的绘制引擎
          hmargin: 120, // 思维导图距容器外框的最小水平距离
          vmargin: 50, // 思维导图距容器外框的最小垂直距离
          line_width: 2, // 思维导图线条的粗细
          line_color: "rgb(25, 144, 255)", // 思维导图线条的颜色
          draggable: true,
        },
        layout: {
          hspace: 100, // 节点之间的水平间距
          vspace: 20, // 节点之间的垂直间距
          pspace: 20, // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
        },
        shortcut: {
          // 禁用快捷键
          enable: false,
        },
      },
      zoom: {
        value: 100, // 层级大小
        min: 10, // 最小层级
        max: 400, // 最大层级
      },
      bgMap: {
        1: {
          original: "rgb(212, 42, 42)",
          transparent: "rgb(212, 42, 42, 0.2)",
        },
        2: {
          original: "rgb(100, 201, 53)",
          transparent: "rgb(100, 201, 53, 0.2)",
        },
        3: {
          original: "rgb(67, 50, 173)",
          transparent: "rgb(67, 50, 173, 0.2)",
        },
        4: {
          original: "rgb(25, 144, 255)",
          transparent: "rgb(25, 144, 255, 0.2)",
        },
      },
      structure: {
        active: "right",
        pathOrginalColor: "#2B2F36",
        pathActiveColor: "#3370FF",
        rectOrginalColor: "#C3C6CB",
        rectActiveColor: "#BACEFD",
      },
      dialogVisible: false,
      selectNodeInfo: {
        id: null,
        Name: "",
      }, // 选中节点信息
      tempNodeInfo: null, // 保存修改之前的信息
      createType: "", // 添加平级or子级
      showMenu: false, // 是否显示右键菜单栏
      menuStyle: {
        top: "",
        bottom: "",
        left: "",
        right: "",
      },

      typeQueue: new Set(["1", "2", "3", "4"]), // 选中types Set
      selectTypes: ["1", "2", "3", "4"], // 选中types Array
    };
  },
  methods: {
    //自定义节点样式http://192.168.1.24:8084/20230307/59b706c15559422998f3e92a3a3b96d1.jpg
    getModelCardDom(modelInfo) {
      //modelInfo.type为数据类型；1为产品分类，2为产品，3为产品架构
      // if (modelInfo.type == 1) {
      //   return `
      //           <div class="model-edit-card" style="width:200px;height:200px;position: relative;" >
      //               <img style="width:100%;height:100%" src="${ modelInfo.pictures.length > 0? this.$p + modelInfo.pictures[0].url: ""}" onerror="this.src='https://p26.toutiaoimg.com/origin/pgc-image/cafb19c6ccac41a3a03fb83826e66534?from=pc';" alt="图片不存在" :preview-src-list="[${ modelInfo.pictures.length > 0? this.$p + modelInfo.pictures[0].url : ""}]"></img>
      //                   <div class="patent">
      //                       <p class="model-title-p">产品类别名称：<span>${modelInfo.productCategoryName}</span></p>
      //                   </div>
      //           </div>
      //           `;
      // } else if (modelInfo.type == 2) {
      //   return `
      //           <div class="model-edit-card" style="width:200px;height:200px;position: relative;" >
      //               <img style="width:100%;height:100%" src="${ modelInfo.pictures.length > 0? this.$p + modelInfo.pictures[0].url: ""}" onerror="this.src='https://p26.toutiaoimg.com/origin/pgc-image/cafb19c6ccac41a3a03fb83826e66534?from=pc';"  alt="" :preview-src-list="[${ modelInfo.pictures.length > 0? this.$p + modelInfo.pictures[0].url: "" }]"></img>
      //                   <div class="patent">
      //                       <p class="model-title-p">产品名称：<span>${ modelInfo.productName}</span></p>
      //                       <p class="model-title-p model-patent" onclick="check(${modelInfo.id},${modelInfo.type},'${modelInfo.productName}')">相关专利：<span>${modelInfo.patentNum}</span></p>
      //                   </div>
      //           </div>
      //           `;
      // } else {
      //   return `
      //           <div class="model-edit-card" style="width:200px;height:200px;position: relative;" >
      //               <img style="width:100%;height:100%" src="${ modelInfo.pictures.length > 0? this.$p + modelInfo.pictures[0].url : ""}" onerror="this.src='https://p26.toutiaoimg.com/origin/pgc-image/cafb19c6ccac41a3a03fb83826e66534?from=pc';" alt="图片不存在" :preview-src-list="[${ modelInfo.pictures.length > 0? this.$p + modelInfo.pictures[0].url: ""}]"></img>
      //                   <div style="position: absolute;bottom: 0;">
      //                       <p class="model-title-p">产品架构名称：<span>${ modelInfo.structureName}</span></p>
      //                       <p class="model-title-p model-patent" onclick="check(${modelInfo.id},${modelInfo.type},'${modelInfo.structureName}')">相关专利：<span>${modelInfo.patentNum}</span></p>
      //                   </div>
      //           </div>
      //           `;
      // }
      if(modelInfo.type == 0){
        return `
                <div class="model-edit-card" style="width:150px;height:40px">
                  
                    <p class="model-title-p"><span>产品专利布局可视化</span></p>
                 
                </div>
                `;
      }else if (modelInfo.type == 1) {
        return `
                <div class="model-edit-card" >
                  <div class="img" onclick="showImage('${ modelInfo.pictures.length > 0? this.$p + modelInfo.pictures[0].url: ""}')">
                    <img style="width:100%;height:100%" src="${ modelInfo.pictures.length > 0? this.$p + modelInfo.pictures[0].url: ""}" onerror="this.src='https://p26.toutiaoimg.com/origin/pgc-image/cafb19c6ccac41a3a03fb83826e66534?from=pc';" alt="图片不存在" :preview-src-list="[${ modelInfo.pictures.length > 0? this.$p + modelInfo.pictures[0].url : ""}]"></img>
                  </div>
                  <div class="patent">
                    <p class="model-title-p"><span>${modelInfo.productCategoryName}</span></p>
                  </div>
                  <div class="icon" style="display:${modelInfo.hasChildren && modelInfo.hasChildren.length>0? "block":"none"}">
                      >>>
                  </div>
                </div>
                `;
      } else if (modelInfo.type == 2) {
        return `
                <div class="model-edit-card">
                  <div class="img" onclick="showImage('${ modelInfo.pictures.length > 0? this.$p + modelInfo.pictures[0].url: ""}')">
                    <img style="width:100%;height:100%" src="${ modelInfo.pictures.length > 0? this.$p + modelInfo.pictures[0].url: ""}" onerror="this.src='https://p26.toutiaoimg.com/origin/pgc-image/cafb19c6ccac41a3a03fb83826e66534?from=pc';"  alt="" :preview-src-list="[${ modelInfo.pictures.length > 0? this.$p + modelInfo.pictures[0].url: "" }]"></img>
                  </div>
                  <div class="patent">
                      <p class="model-title-p"><span>${ modelInfo.productName}</span></p>
                      <p class="model-title-p model-patent" onclick="check(${modelInfo.id},${modelInfo.type},'${modelInfo.productName}')">相关专利：<span>${modelInfo.patentNum}</span></p>
                  </div>
                  <div class="icon" style="display:${modelInfo.hasChildren && modelInfo.hasChildren.length>0? "block":"none"}">
                      >>>
                    </div>
                </div>
                `;
      } else {
        return `
                <div class="model-edit-card">
                  <div class="img" onclick="showImage('${ modelInfo.pictures.length > 0? this.$p + modelInfo.pictures[0].url: ""}')">
                    <img style="width:100%;height:100%" src="${ modelInfo.pictures.length > 0? this.$p + modelInfo.pictures[0].url : ""}" onerror="this.src='https://p26.toutiaoimg.com/origin/pgc-image/cafb19c6ccac41a3a03fb83826e66534?from=pc';" alt="图片不存在" :preview-src-list="[${ modelInfo.pictures.length > 0? this.$p + modelInfo.pictures[0].url: ""}]"></img>
                  </div>
                    <div  class="patent">
                            <p class="model-title-p"><span>${ modelInfo.structureName}</span></p>
                            <p class="model-title-p model-patent" onclick="check(${modelInfo.id},${modelInfo.type},'${modelInfo.pathName}','${modelInfo.productName}')">相关专利：<span>${modelInfo.patentNum}</span></p>
                    </div>
                    <div class="icon" style="display:${ modelInfo.children.length>0? "block":"none"}">
                      >>>
                    </div>
                </div>
                `;
      }
    },
   async getList(row){
      if (row.type == 1) {
      var queryParams = {
        productCategoryId: row.id,
      };
      await this.$api.queryProducts(queryParams).then(res=>{
        row.hasChildren = res.data.list
        this.jm.enable_edit();
        this.jm.update_node('产品类别'+row.id,this.getModelCardDom(row) )
        this.jm.disable_edit();
      })
      //  return a
    } else if (row.type == 2) {
      var queryParams = {
        productId: row.id,
        structureId: 0,
      };
       await this.$api.queryStructures(queryParams).then(res=>{
        row.hasChildren = res.data.children
        this.jm.enable_edit();
        this.jm.update_node('产品'+row.id,this.getModelCardDom(row) )
        this.jm.disable_edit();
      })
    } 
    },
    //查看图片
    showImage(url){
      this.imgSrc = url
      this.pictureUrlList = [url]
    	this.showImg = true
      this.next = false;
    },
    //关闭图片弹窗
    closeViewer(){
      this.showImg = false
    },
    //查看相关专利
    check(id, type,name,productName) {
      // console.log(id,type,name)
      // console.log(name.lastIndexOf('/') == name.length-1)
      // if(name.lastIndexOf('/') == name.length-1){
      //   name = name.substring(0, str.length - 1);
      // }
      if (type == 2) {
        const router = this.$router.resolve({
          path: "/relatedPatentsIndex",
          query: {
            id: id,
            name:name
          },
        });
        window.open(router.href, "_blank");
      } else if (type == 3) {
        name =productName + '/' + name.substring(0, name.length - 1);
        const router = this.$router.resolve({
          path: "/relatedPatentsIndex",
          query: {
            structureId: id,
            name:name
          },
        });
        window.open(router.href, "_blank");
      }
      this.next = false;
    },
    // 筛选树结构
    toggleFilter(item) {
      item.status = !item.status;
      item.status
        ? this.typeQueue.add(item.value)
        : this.typeQueue.delete(item.value);
      this.selectTypes = [...this.typeQueue];
    },

    // 重置视图
    reset() {
      document.querySelector(".root").scrollIntoView({
        block: "center",
        behavior: "smooth",
      });
    },

    // 缩小
    zoomOut() {
      this.jm.view.zoomOut();
      this.zoom.value = parseInt(this.jm.view.actualZoom * 100);
    },
    // 放大
    zoomIn() {
      this.jm.view.zoomIn();
      this.zoom.value = parseInt(this.jm.view.actualZoom * 100);
    },

    // 循环树结构
    loopTreeData(list, callback) {
      (function doOneFloor(list) {
        if (Array.isArray(list)) {
          for (let i = 0; i < list.length; i++) {
            const item = list[i];
            callback(item, i);
            if (item.children && item.children.length > 0) {
              doOneFloor(item.children);
            }
          }
        }
      })(list);
    },

    // 设置背景颜色
    setColor() {
      this.jm.set_node_color("root", this.bgMap[4].original, "#fff");
      this.loopTreeData(this.mind.data.children, (item) => {
        if (this.selectTypes.length) {
          if (this.selectTypes.includes(item.type)) {
            this.jm.set_node_color(
              item.id,
              this.bgMap[item.type].original,
              "#fff"
            );
          } else {
            this.jm.set_node_color(
              item.id,
              this.bgMap[item.type].transparent,
              "#fff"
            );
          }
        } else {
          this.jm.set_node_color(
            item.id,
            this.bgMap[item.type].transparent,
            "#fff"
          );
        }
      });
    },

    // 切换思维导图结构
    toggleStucture(type) {
      if (this.structure.active === type) return;
      this.structure.active = type;
      switch (type) {
        case "side":
          // 两边分布
          this.loopTreeData(this.mind.data.children, (item, i) => {
            if(this.mind.data.children.length < 3){
              item.direction = "right"
            }else{
              item.direction = i % 2 ? "left" : "right";
            }
            
          });
          break;

        case "left":
          // 向左分布
          this.loopTreeData(this.mind.data.children, (item) => {
            item.direction = "left";
          });
          break;

        case "right":
          // 向右分布
          this.loopTreeData(this.mind.data.children, (item) => {
            item.direction = "right";
          });
          break;

        default:
          break;
      }

      this.jm.show(this.mind);
      this.init();
    },

    // 初始化配置
    init() {
      this.jm.view.minZoom = 0.1;
      this.jm.view.maxZoom = 5;
      // this.jm.expand_all()
      // this.setColor()
      // 重写编辑完成事件
      this.jm.view.edit_node_end = () => {
        const node = this.jm.view.get_editing_node();
        const viewData = node._data.view;
        const element = viewData.element;
        element.style.zIndex = "auto";
        if (node.topic === this.editor.value) {
          this.jm.update_node(node.id, node.topic);
          return;
        }
        node.topic = this.editor.value;
        if (!node.topic) {
          this.$message.info("请输入卡片标题");
        }
        this.jm.update_node(node.id, node.topic);

        // TODO 调接口
      };
    },
    // 获取选中标签的 ID
    get_selected_nodeid() {
      const selectedNode = this.jm.get_selected_node();
      if (selectedNode) {
        if (selectedNode.children.length == 0) {
          if (selectedNode.data.rowType == 1) {
            var queryParams = {
              productCategoryId: selectedNode.data.ids,
            };
            this.$api.queryProducts(queryParams).then((res) => {
              if (res.code == 200) {
                this.jm.enable_edit();
                res.data.list.forEach((item) => {
                  var data = {
                    expanded: false,
                    rowType: 2,
                    ids: item.id,
                    productName:item.productName,
                    children: [],
                  };
                  this.jm.toggle_node(selectedNode.id);
                  data.children = item.children ? item.children : [];
                  item.type = 2;
                  this.jm.add_node(
                    selectedNode.id,
                    "产品" + item.id,
                    this.getModelCardDom(item),
                    data
                  );
                });
                this.jm.disable_edit();
              }
            });
          } else if (selectedNode.data.rowType == 2) {
            var queryParams = {
              productId: selectedNode.data.ids,
              structureId: 0,
            };
            this.$api.queryStructures(queryParams).then((res) => {
              if (res.code == 200) {
                this.jm.enable_edit();

                res.data.children.forEach((item) => {
                  var data = {
                    expanded: false,
                    rowType: 3,
                    ids: item.id,
                    productId: selectedNode.data.ids,
                    productName:selectedNode.data.productName,
                  };
                  this.jm.toggle_node(selectedNode.id);
                  data.children = item.children ? item.children : [];
                  item.productName=selectedNode.data.productName,
                  item.type = 3;
                  this.jm.add_node(
                    selectedNode.id,
                    "架构" + item.id,
                    this.getModelCardDom(item),
                    data
                  );
                  // if(item.children&& item.children.length>0){
                  //     this.deepChildren(item.id,item.children)
                  // }
                });

                this.jm.disable_edit();
              }
            });
          } else {
            if ((selectedNode.data.children&&selectedNode.data.children.length==0) ||( selectedNode.data.hasChildren && selectedNode.data.hasChildren.length==0)) {
              return false;
            }
            var queryParams = {
              structureId: selectedNode.data.ids,
              productId: selectedNode.data.productId,
            };
            this.$api.queryStructures(queryParams).then((res) => {
              if (res.code == 200) {
                this.jm.enable_edit();

                res.data.children.forEach((item) => {
                  var data = {
                    expanded: false,
                    rowType: 3,
                    ids: item.id,
                    productId: selectedNode.data.productId,
                    productName:selectedNode.data.productName,
                  };
                  this.jm.toggle_node(selectedNode.id);
                  data.children = item.children ? item.children : [];
                  item.productName=selectedNode.data.productName,
                  item.type = 3;
                  this.jm.add_node(
                    selectedNode.id,
                    "架构" + item.id,
                    this.getModelCardDom(item),
                    data
                  );
                  // if(item.children&& item.children.length>0){
                  //     this.deepChildren(item.id,item.children)
                  // }
                });

                this.jm.disable_edit();
              }
            });
          }
        } else {
          this.jm.toggle_node(selectedNode.id);
        }

        //   return selectedNode.id
      }
      // else {
      //   return null
      // }
    },
    deepChildren(parentId, row) {
      row.forEach((item) => {
        var data = {
          expanded: false,
          rowType: 3,
          ids: item.id,
        };
        data.children = item.children ? item.children : [];
        item.type = 3;
        this.jm.add_node(
          parentId,
          "架构" + item.id,
          this.getModelCardDom(item),
          data
        );
        if (item.children && item.children.length > 0) {
          this.deepChildren(item.id, item.children);
        }
      });
    },

    // 拖拽
    handleDrop(draggingNode, dropNode) {
      // 前一个兄弟节点
      const prevNode = this.jm.find_node_before(dropNode);
      // 获取移动后的node
      const dragForm = {
        modelId: "",
        treeNum: !prevNode ? draggingNode : prevNode.id,
        thisTreeNum: dropNode,
      };
      // console.log("dragForm", dragForm);

      // TODO 调接口
    },
    // 单击重置选中背景颜色
    nodeClick() {
      if (this.next) {
        this.get_selected_nodeid();
      } else {
        this.next = true;
      }

      // const selectedId = this.get_selected_nodeid()
      // if (!selectedId) return
      // const nodeObj = this.jm.get_node(selectedId)
      // this.jm.set_node_color(selectedId, nodeObj.data['background-color'], '#fff')
    },

    // 鼠标滚轮放大缩小
    mouseWheel() {
      if (document.addEventListener) {
        document.addEventListener("domMouseScroll", this.scrollFunc, false);
      }
      this.$refs.container.onmousewheel = this.scrollFunc;
    },
    // 滚轮缩放
    scrollFunc(e) {
      e = e || window.event;
      if (e.wheelDelta) {
        if (e.wheelDelta > 0) {
          this.zoomIn();
        } else {
          this.zoomOut();
        }
      } else if (e.detail) {
        if (e.detail > 0) {
          this.zoomIn();
        } else {
          this.zoomOut();
        }
      }
      e.preventDefault();
      this.jm.resize();
    },

    // 导出图片
    screen_shot() {
      // 去除透明度
      this.loopTreeData(this.mind.data.children, (item) =>
        this.jm.set_node_color(item.id, this.bgMap[item.type].original, "#fff")
      );
      try {
        this.jm.screenshot.shootDownload();
      } catch (error) {
        // console.log(error);
      }
      setTimeout(() => {
        this.setColor();
      }, 1000);
    },
    // 鼠标拖拽
    mouseDrag() {
      // 里层
      const el = document.querySelector(".jsmind-inner");
      // 选中节点
      let selected;

      el.onmousedown = (ev) => {
        // 选中节点
        selected = this.jm.get_selected_node();
        // 标识 是否拖拽节点 避免冲突
        this.dragNodeFlag = !!selected;

        const disX = ev.clientX;
        const disY = ev.clientY;
        const originalScrollLeft = el.scrollLeft;
        const originalScrollTop = el.scrollTop;
        const originalScrollBehavior = el.style["scroll-behavior"];
        const originalPointerEvents = el.style["pointer-events"];
        // auto: 默认值，表示滚动框立即滚动到指定位置。
        el.style["scroll-behavior"] = "auto";
        // 鼠标移动事件是监听的整个document，这样可以使鼠标能够在元素外部移动的时候也能实现拖动
        document.onmousemove = (ev) => {
          if (this.dragNodeFlag) return;
          this.drag = false;
          ev.preventDefault();
          // 计算拖拽的偏移距离
          const distanceX = ev.clientX - disX;
          const distanceY = ev.clientY - disY;

          el.scrollTo(
            originalScrollLeft - distanceX,
            originalScrollTop - distanceY
          );

          // 在鼠标拖动的时候将点击事件屏蔽掉
          el.style["pointer-events"] = "none";
          el.style.cursor = "grabbing";
        };
        document.onmouseup = () => {
          if (!this.dragNodeFlag) {
            el.style["scroll-behavior"] = originalScrollBehavior;
            el.style["pointer-events"] = originalPointerEvents;
            el.style.cursor = "grab";
          }
          document.onmousemove = document.onmouseup = null;
        };
      };
    },
   async getData() {
    if (this.row.type == 1) {
      var queryParams = {
        productCategoryId: this.row.id,
      };
      var a= await this.$api.queryProducts(queryParams)
       return a
    } else if (this.row.type == 2) {
      var queryParams = {
        productId: this.row.id,
        structureId: 0,
      };
      var a= await this.$api.queryStructures(queryParams)
      return a
    }else if (this.row.type == 0){
      var a= await this.$api.queryProductCategorys({})
      return a
    }
  },
  },
 
 async mounted() {
    window.check = this.check;
    window.showImage = this.showImage;
    var list =await this.getData()
    var id = "";
    if (this.row.type == 1) {
      id = "类别";
    } else if (this.row.type == 2) {
      id = "产品";
    } else {
      id = "架构";
    }
    if(this.row.type == 1 || this.row.type == 0){
        var index = 'list'
    }else{
      var index = 'children'
    }
    this.row.hasChildren = list.data[index]
    this.mind.data = {
      id:this.row.type==0?'可视化': id + this.row.id,
      ids: this.row.id,
      topic: this.getModelCardDom(this.row),
      expanded: false,
      rowType: this.row.type,
      productName:this.row.productName,
      row:this.row,
      children: [],
    };
    if(list.code == 200){
        list.data[index].forEach(async item=>{
            item.type = this.row.type + 1;
            if(this.row.type == 1||this.row.type == 0){
                this.getList(item)
                item.hasChildren = this.rowData.children?this.rowData.children:[]
            }
            if(this.row.type == 2){
              item.productName=this.row.productName
            }
            var data = {
              id:item.type == 2?'产品'+item.id:(item.type == 1?'产品类别'+item.id:'架构'+item.id),
              expanded: false,
              topic: this.getModelCardDom(item),
              rowType: this.row.type + 1,
              ids: item.id,
              productId:this.row.id,
              productName:item.productName,
              row:item,
              hasChildren:item.children?item.children: [],
            };
            
            this.mind.data.children.push(data)   
              
        })
    }
      this.jm = jsMind.show(this.options, this.mind);

        // 自定义拖拽完成事件
        // jsMind.draggable.prototype.handleDrag= (srcNode, targetNode, targetDirect) => {
        //   const nextParentId = srcNode.parent.id
        //   this.handleDrop(nextParentId, srcNode.id)
        // }
        this.editor = this.jm.view.e_editor;
        //   this.init()
        this.toggleStucture("side");
        this.mouseWheel();
        this.mouseDrag();
  
    
  },
  beforeDestroy() {
    document.removeEventListener("domMouseScroll", this.scrollFunc, false);
  },
};
</script>


<style lang="less">
.model-edit-card{
  width: 250px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  .img{
    cursor: crosshair;
    width: 100px;
    height: 100px;
  }
  .icon{
    color: black;
    font-size: 12px;
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
}
.patent {
  // position: absolute;
  // bottom: 0;
  padding: 10px;
}
.model-title-p {
  z-index: 999;
  font-size: 16px;
  color: black;
  // word-break: break-all;
  // text-shadow: 1px 1px red;
  margin: 0 0 5px;
}
.model-patent:hover{
  color: #1990ff;
  border-bottom: 1px solid #1990ff;
  cursor: pointer;
}
jmexpander {
  line-height: 8px;
}
.jsmind {
  position: relative;
  padding: 20px;
  height: 100vh;

  &.full {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
  }

  .toolbar {
    float: right;
    z-index: 2;
    position: absolute;
    right: 20px;
    top: 80px;
    z-index: 99;
    border: 1px solid #dee0e3;
    background-color: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 8px 4px rgb(31 35 41 / 6%);
    box-shadow: 0 0 8px 4px rgb(31 35 41 / 6%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: center;

    .toolbar-list {
      padding: 6px 0;

      .item {
        position: relative;
        width: 48px;
        height: 36px;
        cursor: pointer;
        font-size: 14px;
        line-height: 36px;
        text-align: center;
        margin-bottom: 12px;

        svg {
          vertical-align: middle;
        }

        .percent {
          color: rgb(29, 29, 31);
          line-height: 1.45;
        }

        &:hover {
          .scale-slide {
            opacity: 1;
            visibility: visible;
          }
        }

        &.layout {
          &:hover {
            .structure {
              opacity: 1;
              visibility: visible;
            }
          }
        }

        .scale-slide {
          position: absolute;
          top: -7px;
          right: 58px;
          overflow: hidden;
          width: 244px;
          height: 44px;
          opacity: 1;
          -webkit-transition: all 0.1s linear;
          transition: all 0.1s linear;
          opacity: 0;
          visibility: hidden;

          &:hover {
            opacity: 1;
            visibility: visible;
          }

          ul {
            position: absolute;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            width: 244px;
            height: 44px;
            padding: 4px 8px;
            border: 1px solid #dee0e3;
            background-color: #fff;
            border-radius: 5px;
            -webkit-box-shadow: 0 0 8px 4px rgb(31 35 41 / 6%);
            box-shadow: 0 0 8px 4px rgb(31 35 41 / 6%);
            list-style: none;

            .normal-item {
              display: flex;
              width: 36px;
              height: 36px;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              justify-content: center;
              cursor: pointer;
            }

            .slider {
              width: 100%;

              /deep/.el-slider__runway {
                height: 2px;
                background-color: #bbbfc4;

                .el-slider__bar {
                  background: none;
                }

                .el-slider__button {
                  border: 0.5px solid #dee0e3;
                }
              }
            }

            .style__zoom-scroll-bar___3n1YHZLZ {
              display: flex;

              .style__zoom-bar___rp3v2Kdv {
                position: relative;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                width: 120px;
                height: 36px;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                cursor: pointer;

                .style__process-bar___2nCsCTk0 {
                  position: relative;
                  left: 50%;
                  width: 104px;
                  height: 2px;
                  -ms-flex-item-align: center;
                  align-self: center;
                  margin-left: -52px;
                  background-color: #bbbfc4;
                  border-radius: 2px;
                }

                .style__process-btn___azlkuc9i {
                  position: absolute;
                  width: 16px;
                  height: 16px;
                  border: 0.5px solid #dee0e3;
                  background-color: #fff;
                  border-radius: 8px;
                  -webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 15%);
                  box-shadow: 0 2px 3px 0 rgb(0 0 0 / 15%);
                  cursor: pointer;
                }
              }
            }
          }
        }

        .structure {
          position: absolute;
          top: 0;
          right: 58px;
          width: 244px;
          min-height: 120px;
          max-height: calc(100vh - 200px);
          cursor: default;
          opacity: 0;
          overflow-y: overlay;
          -webkit-transition: all 0.1s linear;
          transition: all 0.1s linear;
          visibility: hidden;
          z-index: 1000;

          &:hover {
            opacity: 1;
            visibility: visible;
          }

          .tab-content {
            padding: 24px 24px 10px;
            border: 1px solid #dee0e3;
            background-color: #fff;
            border-radius: 5px;
            -webkit-box-shadow: 0 0 8px 4px rgb(31 35 41 / 6%);
            box-shadow: 0 0 8px 4px rgb(31 35 41 / 6%);

            .tab-label {
              margin-bottom: 12px;
              color: #1f2329;
              font-size: 16px;
              font-weight: 500;
              line-height: 1.5;
              text-align: left;
            }

            .struct-list {
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-orient: horizontal;
              -webkit-box-direction: normal;
              -ms-flex-direction: row;
              flex-direction: row;
              -webkit-box-pack: justify;
              -ms-flex-pack: justify;
              justify-content: space-between;
              margin: 0 0 20px;
              list-style: none;

              li {
                width: 32px;
                height: 32px;
                cursor: pointer;
              }
            }
          }
        }
      }

      .reset {
        margin-bottom: 0;
      }
    }
  }

  .top-bar {
    .filter {
      float: left;

      li {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        margin-right: 20px;
        padding: 0 20px;
        background-color: #ddd;
        border-radius: 10px;
        cursor: pointer;

        &.active {
          color: #fff;
        }

        &.kd {
          &.active {
            background-color: #1990ff;
          }
        }

        &.zsd {
          &.active {
            background-color: #d42a2a;
          }
        }

        &.zskp {
          &.active {
            background-color: #64c935;
          }
        }

        &.st {
          &.active {
            background-color: #4332ad;
          }
        }
      }
    }

    .export {
      float: right;
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      background: #fff;
      border-radius: 10px;
      border: 1px solid #ccc;
      cursor: pointer;
    }
  }

  .jsmind_layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    .jsmind_toolbar {
      width: 100%;
      padding: 0 10px 10px 10px;
      height: auto;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      background-color: #f8f9fa;
      box-shadow: 0 0 4px #b8b8b8;
    }
    /deep/ .el-button--medium,
    /deep/ .el-input--medium {
      margin-top: 10px;
    }
    #jsmind_container {
      flex: 1 1 auto;
    }
    /deep/.el-upload-list {
      display: none !important;
    }
    .pad {
      margin-right: 10px;
    }
    .pad-left {
      margin-left: 10px;
    }
    jmexpander {
      display: none;
    }
    jmnode {
      padding: 0;
      box-shadow: none;
      max-width: unset;
      color: #fff;
      background-color: none;
      border-radius: 0;
      &.selected {
        color: #fff !important;
        background: white;
        border: 1px solid #777;
        transition: 1s;
      }
    }

    //   /deep/ jmnode.selected {
    //     background-color: #b9b9b9;
    //     color: #fff;
    //     box-shadow: 2px 2px 8px #777;
    //   }
    //   /deep/ jmnode:hover {
    //     box-shadow: 2px 2px 8px #777;
    //   }
  }

  .context-menu {
    width: 150px;
    padding: 12px 0px;
    position: fixed;
    z-index: 100;
    background: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
    border-radius: 5px;
    font-size: 12px;
    display: block;
    left: 912px;
    top: 535px;

    .el-menu-item {
      width: 150px;
      height: 40px;
      line-height: 40px;
    }
  }

  .jsmind-inner {
    overflow: scroll;

    &::-webkit-scrollbar {
      height: 10px;
    }
  }

  .form-con {
    padding-top: 20px;
  }
  .ele-width {
    width: 96%;
  }
}
</style>
  