<template>
  <div class="x6-vue-shape" ref="x6VueShapeRef" :class="[{ groups: nodeType == 99.5 }]">
    <div class="node-name" ref="nodeNameRef" v-if="nodeType != 99.5">
      <span class="node-name-title">
        <a-tooltip placement="topLeft" :title="nameVal">
          <span class="x6-vue-shape-name-class">{{ nameVal }}</span>
        </a-tooltip>
      </span>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, inject, watch } from 'vue';
import { useWorkflowStore } from '@/store/modules/workflow';
import X6AddNode from './components/x6-add-node.vue';
import { Tooltip as ATooltip } from 'ant-design-vue';

export default defineComponent({
  name: 'BpmnLaneShape',
  props: {
    // 节点信息
    nodeData: {
      type: Object
    },
    isShowAdd: {
      type: Boolean,
      default: true
    }
  },
  components: { X6AddNode, ATooltip },
  setup(props) {
    // store
    const workflowStore = useWorkflowStore();

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

    // dom
    const nodeNameRef = ref(null);

    const nodeData2 = ref({});

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

    // 边框颜色
    const borderColor = ref('');

    //
    const graph = ref(null);

    // 节点类型
    const nodeType = ref(262);

    onMounted(() => {
      let data = props.nodeData;

      nameVal.value = data?.name;
      nodeType.value = data?.type;
      graph.value = workflowStore.graph;
      if (!data) {
        // 节点
        const node = inject('getNode');
        nodeData2.value = node();
        if (node()?.data) {
          let nodeData = JSON.parse(node().data);
          nameVal.value = nodeData.data.nodeName;
          nodeType.value = nodeData.type;
        }

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

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

    return {
      nodeData2,
      nameVal,
      graph,
      nodeType,
      borderColor,
      nodeNameRef,
      currentNodeData
    };
  }
});
</script>

<style scoped lang="less">
.x6-vue-shape {
  cursor: move;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #adb5b8;

  .node-name {
    height: 100%;
    width: 60px;
    font-size: 15px;
    color: #43505e;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    border-radius: 4px;
    border-right: 1px solid #adb5b8;

    .node-name-title {
      margin: auto;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      writing-mode: vertical-rl; /* 文字竖排 */
      white-space: nowrap; /* 防止文字换行 */
      overflow: hidden; /* 隐藏溢出部分 */
      text-overflow: ellipsis; /* 显示省略号 */
      text-align: center; /* 文字居中 */
    }
  }
}
.groups {
  border-style: dashed;
  border-width: 2px;
}
</style>
