<template>
  <div class="inline-container">
    <!-- 元素标签 -->
    <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}"
    > 
      <span style="z-index: 2;">{{ item.name }}</span>
    </el-tag>
    <span 
      :class="getItemClass(item)" 
      @click="itemClick(item)" 
      v-else
      class="element-span"
    >
      {{ item.name }}
    </span>
    
    <!-- 光标指示器 - 选中时或强制显示时显示 -->
    <span v-if="isShowCursor&&(item.selected || showCursor)" class="cursor-blink"></span>
  </div>
</template>

<script>
export default {
  name: "formulaItem",
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    // 新增属性：用于强制显示光标
    showCursor: {
      type: Boolean,
      default: false
    },
    isShowCursor: {
      type: Boolean,
      default: true
    }//是否显示光标
  },
  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;
  font-size: 21px; // 与公式编辑器保持一致字体大小
}

.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);
    padding: 0 15px !important;
    margin-left: 8px;
    margin-right: 5px;
  }
}

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

// 新增样式
.inline-container {
  display: inline-flex;
  align-items: center;
  padding-bottom: 5px;
}

// 光标样式 - 模拟输入框闪烁效果
.cursor-blink {
  width: 2px;
  height: 1.4em;
  background-color: #333;
  margin: 0 1px;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  from, to { background-color: transparent }
  50% { background-color: #333 }
}

</style>
