<template>
  <!-- 网络图标 -->
  <img
    v-if="isNetworkIcon"
    class="category-icon image-icon"
    :src="value"
    alt="栏目图标"
    :style="{ width: sizeWidth }"
  />
  <!-- class图标 -->
  <i
    v-else-if="isClassIcon"
    class="category-icon"
    :class="value"
    :style="{ 'font-size': size }"
  ></i>
  <!-- 不正确的图标 -->
  <span class="category-icon holder" v-else-if="withHolder"><em>x</em></span>
</template>

<script>

export default {
  name: 'CategoryIcon',
  props: {
    // 图标值
    value: {},
    // 尺寸
    size: {
      default: 'inherit'
    },
    // 如果图标不存在，是否显示占位符
    withHolder: {
      default: true
    }
  },
  computed: {
    // size对应的width值
    sizeWidth () {
      if (this.size === 'inherit') {
        return '16px'
      }
      return this.size
    },
    // 判断是否为class图标
    isClassIcon () {
      if (this.value == null || this.value === '') {
        return false
      }
      return !this.value.startsWith('/') &&
        !this.value.startsWith('http://') && !this.value.startsWith('https://')
    },
    // 判断是否为网络图标
    isNetworkIcon () {
      if (this.value == null || this.value === '') {
        return false
      }
      return this.value.startsWith('/') ||
        this.value.startsWith('http://') || this.value.startsWith('https://')
    }
  }
}
</script>

<style scoped lang="scss">
.holder {
  width: 16px !important;
  height: 16px !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: red !important;
  background: #e0e0e0;
  em {
    position: relative;
    top: -1px;
    font-style: normal;
  }
}
</style>
