<template>
  <el-tag 
    v-if="item.type === 'Element'"
    type="info"   
    :effect="item.selected ? 'dark' : 'plain'"
    @click="itemClick(item)"
    class="ellipse-tag"
    :class="{'selected-tag': item.selected}"
  > 
    {{ item.name }}
  </el-tag>
  <span 
    :class="getItemClass(item)" 
    @click="itemClick(item)" 
    v-else
    class="element-span"
  >
    {{ item.name }}
  </span>
</template>

<script>
export default {
  name: "formulaItem",
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
  },
  methods: {
    itemClick(item) {
      // 切换选中状态
      item.selected = !item.selected;
      this.$emit('click', {
        selected: item.selected,
        item
      });
    },
    getItemClass(item) {
      return {
        'element-class': true,
        'selected': item.selected
      };
    }
  }
}
</script>

<style scoped lang="scss">
// 共用样式
.element-class, .ellipse-tag {
  display: inline-flex;
  align-items: center; // 纵向居中对齐
  justify-content: center;
  vertical-align: middle; // 确保与其他元素对齐
  box-sizing: border-box;
}

.element-class {
  cursor: pointer;
  padding: 0 3px;
  height: 32px; // 与tag保持一致高度
  
  &.selected {
    color: #f0720a;
  }
}

// 标签样式
.ellipse-tag {
  border-radius: 50px !important; // 椭圆样式
  padding: 0 12px !important;
  height: 32px; // 固定高度确保对齐
  transition: all 0.2s ease; // 平滑过渡效果
  background-color: #E7E7E7 !important; // 默认背景色
  border-color: #E7E7E7 !important;    // 默认边框色
  color: #333 !important;              // 默认文字色
  
  &.selected-tag {
    background-color: #909399 !important; // 选中状态背景色
    border-color: #909399 !important;    // 选中状态边框色
    color: #fff !important;              // 选中状态文字色
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

// 确保span和tag在同一行时对齐
.element-span {
  display: inline-flex;
  align-items: center;
  height: 32px;
}
</style>
    