<template>
  <span class="feature-tooltip">
    {{ label }}
    <!-- 购买插件提示 -->
    <el-tooltip :content="buyTooltip"
                effect="dark"
                placement="top">
      <el-icon class="info-icon"
               @click.prevent.stop="handleBuyClick">
        <el-icon-info-filled />
      </el-icon>
    </el-tooltip>

    <!-- 示例代码提示 -->
    <el-tooltip :content="codeTooltip"
		v-if="isDemo"
                effect="dark"
                placement="top">
      <el-icon class="info-icon"
               @click.prevent.stop="handleCodeClick">
        <el-icon-document />
      </el-icon>
    </el-tooltip>
  </span>
</template>

<script>
export default {
  name: 'FeatureTooltip',
  props: {
    // 功能标签名称
    label: {
      type: String,
      required: true
    },
		isDemo: {
      type: Boolean,
      default: false,
    },
    // 购买提示文本
    buyTooltip: {
      type: String,
      default: '点击购买插件'
    },
    // 示例代码提示文本
    codeTooltip: {
      type: String,
      default: '点击插入示例代码'
    },
    // 购买链接
    buyLink: {
      type: String,
      required: true
    }
  },
  methods: {
    handleBuyClick () {
      window.open('https://avuejs.com/market/detail.html?id='+this.buyLink, '_blank')
    },
    handleCodeClick () {
			this.$emit('code')
		}
	}
}
</script>

<style scoped>
.feature-tooltip {
  display: inline-flex;
  align-items: center;
}

.info-icon {
  margin-left: 4px;
  font-size: 16px;
  color: var(--text-color-placeholder);
  cursor: pointer;
  transition: color 0.3s;
}

.info-icon:hover {
  color: var(--primary-color);
}
</style> 