<template>
  <div class="x6-vue-shape" :class="[{ 'flow-condition': [60, 248].includes(currentType) }, { 'flow-convergence': currentType == 61 }]">
    <div class="text-container">
      <img :src="activeIconSrc" alt="" class="svg-img" v-if="![60, 248].includes(currentType)" />
      <a-tooltip placement="topLeft" :title="nameVal">
        <span class="x6-vue-shape-name-class">{{ nameVal }}</span>
      </a-tooltip>
      <img :src="activeIconSrc" alt="" class="svg-img" v-if="[60, 248].includes(currentType)" />
    </div>
    <!-- 加号 -->
    <div class="x6-shape-add" v-if="currentType != 248 && nodeData?.id && currentNodeData?.nodeId && currentNodeData.nodeId == nodeData.id">
      <template v-for="item in addButtonList" :key="item.type">
        <div :class="item.class" v-if="currentNodeData.groupList.find(gItem => gItem.name == item.type)">
          <a-popover placement="right" style="border-radius: 5px">
            <template #content>
              <X6AddNode :type="item.type" :node="nodeData" @addNode="addNode" />
            </template>
            <img src="@/assets/images/add.svg" alt="" class="shape-img" />
          </a-popover>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, inject, watch, computed } from 'vue';
import { useWorkflowStore } from '@/store/modules/workflow';
import X6ShapeUtil from '../utils/x6-shape-util';
import X6AddNode from './components/x6-add-node.vue';
import { Tooltip as ATooltip, Popover as APopover } from 'ant-design-vue';
import { getFlowBaseIcon } from '@/utils/common/util';

export default defineComponent({
  name: 'X6CircleShape',
  components: { X6AddNode, ATooltip, APopover },
  setup(props) {
    // store
    const workflowStore = useWorkflowStore();

    const { canAdd, addNodeItem } = X6ShapeUtil();

    // 名称
    const nameVal = ref('');

    const nodeData = ref({});

    // 当前node数据
    const currentNodeData = ref({
      nodeId: '',
      groupList: []
    });

    // 图片列表
    const iconList = ref(getFlowBaseIcon());

    //
    const graph = ref(null);

    // 当前节点类型
    const currentType = ref(10);
    // 流程图标class
    const iconClass = ref('');

    // 添加按钮列表
    const addButtonList = ref([
      {
        type: 'top',
        class: 'shape-top'
      },
      {
        type: 'right',
        class: 'shape-right'
      },
      {
        type: 'bottom',
        class: 'shape-bottom'
      },
      {
        type: 'left',
        class: 'shape-left'
      }
    ]);

    /**
     * 图标
     */
    const activeIconSrc = computed(() => {
      const icon = iconList.value.find(t => t.name == iconClass.value);
      return icon ? icon.url : '';
    });

    onMounted(() => {
      graph.value = workflowStore.graph;

      // 节点
      const node = inject('getNode');
      nodeData.value = node();
      if (node()?.data) {
        let nodeData = JSON.parse(node().data);
        currentType.value = nodeData.type;
        iconClass.value = nodeData?.icon;

        nameVal.value = nodeData.data.nodeName;
      }

      if (node()) {
        node().on('change:data', ({ current }) => {
          let nodeData = JSON.parse(current);
          nameVal.value = nodeData.data.nodeName;
        });
      }
    });

    // 添加节点
    const addNode = (type, nodeItem) => {
      if (canAdd(nodeItem)) {
        const position = nodeData.value.position();
        let { x, y } = position;

        const adjustedPosition = adjustPosition(x, y, type, currentType.value, nodeItem.type);
        x = adjustedPosition.x;
        y = adjustedPosition.y;

        addNodeItem(nodeItem, x, y, type, currentNodeData.value, nodeData.value);
      }
    };

    const adjustPosition = (x, y, type, currentType, nodeType) => {
      const isCurrentType10Or11 = [10, 11].includes(currentType);
      const isNodeType50Or51 = [50, 51].includes(nodeType);

      switch (type) {
        case 'top':
          if (isCurrentType10Or11) {
            x = isNodeType50Or51 ? x + 8 : x - 80;
            y -= 200;
          } else if (currentType === 60) {
            if (nodeType === 11) {
              x += 38;
            } else {
              x = isNodeType50Or51 ? x + 46 : x - 40;
            }
            y -= 200;
          }
          break;
        case 'right':
          if (isCurrentType10Or11) {
            y = isNodeType50Or51 ? y - 32 : y - 20;
            x += 200;
          } else if (currentType === 60) {
            y = isNodeType50Or51 ? y - 32 : y - 20;
            x += 300;
          }
          break;
        case 'bottom':
          if (isCurrentType10Or11) {
            x = isNodeType50Or51 ? x + 6 : x - 80;
            y += 150;
          } else if (currentType === 60) {
            if (nodeType === 11) {
              x += 42;
            } else {
              x = isNodeType50Or51 ? x + 46 : x - 40;
            }
            y += 150;
          }
          break;
        case 'left':
          if (isCurrentType10Or11) {
            y = isNodeType50Or51 ? y - 32 : y - 20;
            x = isNodeType50Or51 ? x - 200 : x - 350;
          } else if (currentType === 60) {
            y = isNodeType50Or51 ? y - 32 : y - 20;
            x = isNodeType50Or51 ? x - 200 : x - 350;
          }
          break;
      }

      return { x, y };
    };

    watch(
      () => workflowStore.nodeData,
      val => {
        currentNodeData.value = val;
      },
      { deep: true, immediate: true }
    );

    return {
      nodeData,
      nameVal,
      addNode,
      graph,
      iconList,
      iconClass,
      currentType,
      activeIconSrc,
      adjustPosition,
      currentNodeData,
      addButtonList
    };
  }
});
</script>

<style scoped lang="less">
.text-container {
  padding: 8px;
  width: 100%;
  height: 36px;
  line-height: 18px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  font-size: 16px;
  color: #60666b;
}
.flow-condition {
  .text-container {
    display: flex;
    align-items: center;
    text-align: left;
  }
  .x6-vue-shape-name-class {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100% - 25px);
  }
  .svg-img {
    margin-left: 5px;
    margin-right: 0px;
    margin-bottom: 0px;
  }
}
.flow-convergence {
  background-color: #4c8dff !important;
  .text-container {
    color: #fff !important;
  }
}
.svg-img {
  margin-right: 5px;
  margin-bottom: 3px;
}
.x6-vue-shape {
  cursor: move;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #c5cfd166;
}

.x6-shape-add {
  position: absolute;
  width: 100%;
  height: 100%;
  .shape-top,
  .shape-right,
  .shape-bottom,
  .shape-left {
    position: absolute;
    &::before {
      position: absolute;
      left: 19px;
      top: 31px;
      content: '';
      width: 1.5px;
      height: 45px;
      background: #ccc;
    }
  }
  .shape-top {
    left: 50%;
    margin-left: -19px;
    top: -78px;
  }
  .shape-right {
    right: -80px;
    top: -1px;
    &::before {
      width: 45px;
      height: 1px;
      top: 18px;
      left: -41px;
    }
  }
  .shape-bottom {
    left: 50%;
    bottom: -78px;
    margin-left: -19px;
    &::before {
      left: 19px;
      top: -40px;
    }
  }
  .shape-left {
    left: -80px;
    top: -1px;
    &::before {
      width: 45px;
      height: 1px;
      top: 18px;
      left: 34px;
    }
  }
  .shape-img {
    cursor: pointer;
    width: 38px;
  }
}
.ant-menu-vertical {
  border: 0px !important;
}
:deep(.ant-menu-item) {
  width: 240px !important;
  height: 40px;
  line-height: 40px;
  color: #000;
  font-size: 14px;
  margin-left: -16px !important;
  margin-right: -16px !important;
  margin-bottom: 0px !important;
  &:hover {
    background: #f5f5f5;
    color: #000;
  }
}
:deep(.ant-menu-title-content) {
  display: flex;
  align-items: center;
}
</style>
