<template>
  <div class="handling-object">
    <!-- 左侧内容：L:名称+规格 -->
    <div class="handling-item left">
      <div class="table-icon left-icon"></div>
      <span style="margin-left: 4px;">{{ leftContent }}</span>
    </div>
    <!-- 右侧内容：R:名称+规格 -->
    <div class="handling-item right">
      <div class="table-icon right-icon"></div>
      <span style="margin-left: 4px;">{{ rightContent }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HandlingObjectLabel',
  props: {
    injectData: {
      type: Object,
      default: () => ({}),
      required: true
    }
  },
  computed: {
    // 拆分左侧内容（L:xxx）
    leftContent() {
      const handlingStr = this.injectData.handingObject || '';
      const leftPart = handlingStr.split(',')[0] || ''; // 取第一个逗号前的部分
      return leftPart.replace('L:', ''); // 移除前缀"L:"
    },
    // 拆分右侧内容（R:xxx）
    rightContent() {
      const handlingStr = this.injectData.handingObject || '';
      const rightPart = handlingStr.split(',')[1] || ''; // 取第一个逗号后的部分
      return rightPart.replace('R:', ''); // 移除前缀"R:"
    }
  }
};
</script>
<style scoped>
.handling-object {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  padding: 4px 8px;
}

.handling-item {
  display: flex;
  align-items: center;
  gap: 2px;
  /* 防止子元素被压缩 */
  flex-shrink: 0;
}

.table-icon {
  width: 12px;
  height: 12px;
  background-size: cover;
  background-repeat: no-repeat;
  /* 固定图标尺寸，不被挤压 */
  flex-shrink: 0;
}

/* 左侧图标 */
.left-icon {
  background-image: url('../../../../assets/img/leftTable.png');
}

/* 右侧图标 */
.right-icon {
  background-image: url('../../../../assets/img/rightTable.png');
}
</style>
