<template>
<div :class="['debug_node_item', nodeData.status]" :title="nodeData.name">
  <template v-if="nodeData.status == 'running'">
    <a-icon type="sync" spin />
  </template>
  <template v-else-if="nodeData.status == 'success'">
    <a-icon type="check-circle" />
  </template>
  <template v-else-if="nodeData.status == 'failed'">
    <a-icon type="close-circle" />
  </template>
  <template v-else>
    <svg-icon
      class="icon_controls"
      v-if="nodeData.type"
      :type="nodeData.type"
    />
  </template>
  <a-icon class="type_icon" v-if="nodeData.nodeType == 1" type="pic-left" />
  <a-icon class="type_icon" v-if="nodeData.nodeType == 2" type="database" />
  {{ nodeData.name }}
</div>
</template>

<script>
export default {
  inject: ["nodeData"],
  data() {
    return {
    };
  },
  mounted() {},
  methods: {}
};
</script>
<style lang="less" scoped>
.debug_node_item {
  width: 200px;
  padding: 6px 12px;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(105,202,255, .4);
  border-radius: 8px;
  background: linear-gradient(90deg, #F5F8FF 0%, #E1E8FF 100%);
  &.default {
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
  }
  &.running {
    .anticon {
      color: #5f95ff;
    }
  }
  &.success {
    .anticon {
      color: #52c41a;
    }
  }
  &.failed {
    .anticon {
      color: #ff4d4f;
    }
  }
  .type_icon.anticon {
    color: #5f95ff;
	  margin-left: 3px;
  }
}
</style>