<template>
  <el-dialog
    class="nodeDialog"
    title="图标"
    :visible.sync="dialogVisible"
    width="500"
  >
    <div class="item" v-for="item in nodeIconList" :key="item.name">
      <div class="title">{{ item.name }}</div>
      <div class="list">
        <div
          class="icon"
          v-for="icon in item.list"
          :key="icon.name"
          v-html="icon.icon"
          @click="setIcon(item.type, icon.name)"
        ></div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { nodeIconList } from "simple-mind-map/src/svg/icons";

/**
 * @Author: 王林
 * @Date: 2021-06-24 22:53:33
 * @Desc: 节点图标内容设置
 */
export default {
  name: "NodeIcon",
  data() {
    return {
      nodeIconList,
      dialogVisible: false,
      icon: [],
      activeNodes: [],
    };
  },
  created() {
    this.$bus.$on("node_active", (...args) => {
      this.activeNodes = args[1];
      if (this.activeNodes.length > 0) {
        let firstNode = this.activeNodes[0];
        this.icon = firstNode.getData("icon") || [];
      } else {
        this.icon = [];
      }
    });
    this.$bus.$on("showNodeIcon", () => {
      this.dialogVisible = true;
    });
  },
  methods: {
    /**
     * @Author: 王林
     * @Date: 2021-06-23 23:16:56
     * @Desc: 设置icon
     */
    setIcon(type, name) {
      let index = this.icon.findIndex((item) => {
        return item.split("_")[0] === type;
      });
      if (index !== -1) {
        this.icon.splice(index, 1, type + "_" + name);
      } else {
        this.icon.push(type + "_" + name);
      }
      this.activeNodes.forEach((node) => {
        node.setIcon([...this.icon]);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.nodeDialog {
  /deep/ .el-dialog__body {
    padding: 0 20px;
  }

  .item {
    margin-bottom: 20px;
    font-weight: bold;

    .title {
      margin-bottom: 10px;
    }

    .list {
      display: flex;
      flex-wrap: wrap;

      .icon {
        width: 24px;
        height: 24px;
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>