<!--
 * @Author: Devin
 * @Date: 2023-02-07 11:18:18
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-07 15:36:19
 * @Description: 
-->
<template>
  <el-tooltip :bind="tooltipAttr">
    <template #content>
      <slot name="pop"></slot>
    </template>

    <template v-if="type === 'color'">
      <svg class="__common-icon-svg" aria-hidden="true" @click.stop="onClick">
        <use :xlink:href="colorIconName"></use>
      </svg>
    </template>

    <template v-else>
      <i :class="`iconfont icon-${name} ${disabled ? 'disabled' : ''}`"></i>
    </template>
  </el-tooltip>
</template>

<script setup>
import { computed, defineEmits } from 'vue';
// import '../../assets/icon/menu/iconfont.js';
// import '../../assets/icon/common/iconfont.js';
// import '../../assets/icon/tool/iconfont.js';

const emits = defineEmits(['onClick']);
const props = defineProps({
  name: {
    type: String,
    required: true,
    default: () => ''
  },
  size: {
    type: Number,
    required: true,
    default: () => 12
  },
  popContent: {
    type: String,
    default: () => ''
  },
  disabled: {
    type: Boolean,
    default: () => false
  },
  type: {
    type: String,
    default: () => 'color'
  },
  tooltipAttr: {
    type: Object,
    default: () => {}
  }
});

const colorIconName = computed(() => {
  let newName = '';
  if (props.name.startsWith('color-')) {
    newName = `icon-${props.name.slice('color-'.length)}`;
  }
  return newName;
});

function onClick() {
  emits('onClick');
}
</script>

<style scoped lang="scss">
@import '../../assets/icon/common/iconfont.css';
// @import '../../assets/icon/tool/iconfont.css';
// @import '../../assets/icon/menu/iconfont.css';
.__common-icon-svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.disabled {
  color: #ccc;
  cursor: not-allowed;
}
</style>