<template>
  <image class="z-svg" :class="classBind" :src="src" mode="aspectFit" :style="{ width: svgWidth, height: svgHeight }" @click="$emit('click')" />
</template>

<script>
export default {
  name: 'ZSvg',
  props: {
    name: {
      type: String,
      required: true,
    },
    size: {
      type: [Number, String],
      default: 'inherit',
    },
    width: String,
    height: String,
  },
  computed: {
    classBind() {
      const normalClass = '';
      if (this.$options && this.$options.propsData && this.$options.propsData.className) {
        return normalClass + ' ' + this.$options.propsData.className;
      }
      return normalClass;
    },
    src({ name }) {
      return this.formatImagePath(name, 'svg')
    },
    svgWidth({ width, size }) {
      if (![undefined, null, ''].includes(width)) return width;
      if (typeof size === 'number') {
        return `${size}px`;
      } else {
        return size;
      }
    },
    svgHeight({ height, size }) {
      if (![undefined, null, ''].includes(height)) return height;
      if (typeof size === 'number') {
        return `${size}px`;
      } else {
        return size;
      }
    },
  },
}
</script>

<style lang="scss">
.z-svg {
  font-size: 0;
}
</style>