<template>
  <div class="x6-vue-shape" :class="[{ 'business-img': !nameVal }]">
    <div class="icon">
      <svg class="svg-img" aria-hidden="true" v-if="type == 'base'">
        <use :xlink:href="`#${iconClass}`"></use>
      </svg>
      <img v-lazy="activeIconSrc" alt="" v-if="type == 'bpmn'" />
    </div>
    <div class="span" v-if="nameVal">
      <a-tooltip placement="topLeft" :title="nameVal">
        <span class="x6-vue-shape-name-class">{{ nameVal }}</span>
      </a-tooltip>
    </div>
  </div>
</template>

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

export default defineComponent({
  name: 'DragNewNodeItem',
  props: {
    // 节点信息
    nodeData: {
      type: Object
    },
    // 图片列表
    iconList: {
      type: Array,
      default: []
    },
    type: {
      type: String,
      default: 'base'
    }
  },
  setup(props) {
    // 名称
    const nameVal = computed(() => {
      if (props.nodeData?.name) {
        return props.nodeData?.name;
      }
      return '';
    });
    // 流程图标class
    const iconClass = computed(() => {
      if (props.nodeData?.icon) {
        return props.nodeData?.icon;
      }
      return '';
    });

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

    onMounted(() => {});

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

<style scoped lang="less">
.x6-vue-shape {
  cursor: move;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 69px;
  position: relative;
  padding: 10px 4px;
  box-sizing: border-box;

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

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

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

  .span {
    text-align: center;
    width: 100%;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
  .x6-vue-shape-name-class {
    color: #60666b;
    font-size: 15px;
  }
}

.business-img {
  padding: 0;
  height: 50px;

  .icon {
    width: auto;
    height: auto;
  }

  img {
    width: 30px;
    height: 30px;
  }
}
</style>
