<template>
  <el-icon v-if="props.type === 1" :style="customStyle" :class="['el-icon', props.class]">
    <component :is="iconName" />
  </el-icon>
  <svg aria-hidden="true" :style="customStyle" :class="['el-icon', props.class]" v-else>
    <use :xlink:href="iconName" fill="currentColor" />
  </svg>
</template>

<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { addUnit } from '@/utils/util'

// 定义组件属性
const props = withDefaults(
  defineProps<{
    // 图标类型：1.element-plus图标，2.SVG图标
    type?: any
    // 图标名称
    name: any
    // 图标颜色
    color?: string
    // 图标大小
    size?: string | number
    // 图标类名
    class?: string
    // 图标样式
    style?: Record<string, any>
  }>(),
  {
    type: 1,
    name: '',
    size: 'var(--el-font-size-medium)',
    class: '',
    style: () => ({})
  }
)

// 图标名称
const iconName = computed(() => {
  if (props.type === 1) {
    return props.name
  } else if (props.type === 2) {
    if (!props.name.startsWith('icon-')) {
      return `#icon-${props.name}`
    }
    return `#${props.name}`
  }
  return ''
})

// 自定义样式
const customStyle = computed<CSSProperties>(() => {
  return {
    ...props.style,
    fontSize: addUnit(props.size),
    width: addUnit(props.size),
    height: addUnit(props.size),
    ...(props.color ? { color: props.color } : {})
  }
})
</script>
