<template>
  <div class="branch-node">
    <!-- <h5 class="node-title">分支节点</h5> -->
    <ul class="branch-list">
      <li v-for="(item, index) in caseList" :key="index" class="branch-item">
        <common-icon name="flow-if" class="icon" size="16"></common-icon>
        <span>case: {{ item.name }}</span>
      </li>
      <li class="branch-item">
        <common-icon name="flow-if" class="icon" size="16"></common-icon>
        <span>default</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'BranchNode',
  inject: ['getNode'],
  data() {
    return {
      node: this.getNode(),
      nodeInfo: this.getNode().getData(),
      caseList: [],
      baseHeight: 36
    };
  },
  computed: {},
  watch: {},
  created() {
    this.setDataFromNode();
  },
  mounted() {
    this.node.on('change:data', this.setDataFromNode);
  },
  methods: {
    // 新增节点port
    addNewPorts(node, ports) {
      ports.forEach((port, index) => {
        if (!node.getPort(port.id)) {
          node.insertPort(index, port);
        }
      });
      this.deletePort();
    },

    // 删除非branchlist的节点
    deletePort() {
      // 右侧面板节点数据
      // 实际port数量
      const ports = this.node.getPorts();
      ports.forEach((port) => {
        if (
          port.type === 'case' &&
          !this.caseList.some((item) => item.uuid === port.id)
        ) {
          this.node.removePort(port.id);
        }
      });
    },
    // 循环判断当前节点port与实际传过来的port数组，判断是否有删除，如果有删除的，调用删除函数删除port

    // 获取非空节点数
    getPortsList(data) {
      if (data?.length) {
        return data.filter((item) => item.id !== '');
      }
      return [];
    },

    // 设置port点
    setDataFromNode() {
      // TODO  分发节点增加point后再去删除时，删除不生效
      const data = this.node.getData();
      this.caseList =
        this.getPortsList(data?.attrsData?.function?.branchList) || [];

      const ports = [];
      this.caseList.forEach((item) => {
        ports.push({
          group: 'output',
          id: item.uuid,
          attrs: {
            circle: {
              r: 5,
              magnet: true,
              stroke: '#B1B1B1',
              strokeWidth: 1,
              fill: '#B1B1B1',
              connectionCount: 1,
              refX: -15,
              refY: -1
            }
          },
          type: 'case'
        });
      });
      this.addNewPorts(this.node, ports);
      this.node.resize(
        this.node.getSize().width,
        this.baseHeight + ports.length * 36
      );
    }
  }
};
</script>

<style scoped lang="scss">
.branch-node {
  border: 2px solid #ccc;
  padding: 0 10px;
  border-radius: 8px;
  width: 200px;
  box-sizing: border-box;
  .node-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 32px;
    border-bottom: 1px solid #eee;
  }
  .branch-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    .branch-item {
      line-height: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ccc;
      .icon {
        margin-right: 5px;
      }
      &:last-child {
        border: none;
      }
    }
  }
}
</style>