<template>
  <div class="x6-vue-shape">
    <div class="icon">
      <svg class="svg-img" aria-hidden="true">
        <use :xlink:href="`#${iconClass}`"></use>
      </svg>
    </div>
    <div class="span">
      <a-tooltip placement="topLeft" :title="nameVal">
        <span class="x6-vue-shape-name-class">{{ nameVal }}</span>
      </a-tooltip>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  name: 'DragNodeItem',
  props: {
    // 节点信息
    nodeData: {
      type: Object
    }
  },
  setup(props) {
    // 名称
    const nameVal = ref('');
    // 流程图标class
    const iconClass = ref('');

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

      iconClass.value = data?.icon;
      nameVal.value = data?.name;
    });

    return {
      nameVal,
      iconClass,
    };
  }
});
</script>

<style scoped lang="less">
.x6-vue-shape {
  cursor: move;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 46px;
  border: 1px rgba(197, 207, 209, 0.6) solid;
  border-radius: 4px;
  position: relative;
  padding: 12px 16px;
  box-shadow: 0 0 2px rgba(197, 207, 209, 0.6);

  &:hover {
    box-shadow: 0 0 8px 1px #c5d9ff;
  }

  .icon {
    width: 20px;
    height: 20px;

    .svg-img {
      width: 20px;
      height: 20px;
    }
  }

  .span {
    position: relative;
    padding-left: 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
  .x6-vue-shape-name-class {
    color: #43505e;
    font-size: 16px;
  }
}
</style>
