<script>
import MIX_EVENT from '../mixins/event';

export default {
  name: 'Icon',
  mixins: [MIX_EVENT],
  render(createElement) {
    if (this.src) {
      return createElement('img', { class: 'zui-icon__img', attrs: { src: this.src }, style: this.svgStyleRender });
    }
    if (this.svg) {
      return createElement('svg', { class: 'zui-icon__svg', attrs: { 'aria-hidden': true }, style: this.svgStyleRender }, [
        createElement('use', { attrs: { 'xlink:href': `#${this.classPrefix}${this.name}` } }),
      ]);
    }
    return createElement('i', { class: { 'zui-icon': true, ...this.classRender }, style: this.styleRender, on: this.bindEvents });
  },
  props: {
    name: {
      type: String,
      default: '',
    },
    fontFamily: {
      type: String,
      default: 'iconfont',
    },
    classPrefix: {
      type: String,
      default: 'icon-',
    },
    size: [Number, String],
    unit: {
      type: String,
      default: 'rem',
    },
    color: String,
    svg: Boolean,
    src: String,
  },
  computed: {
    fontSize() {
      return Number(this.size);
    },
    classRender() {
      const fontFamily = this.fontFamily || '';
      const iconClass = `${this.classPrefix}${this.name}`;
      return {
        [fontFamily]: true,
        [iconClass]: true,
      };
    },
    svgStyleRender() {
      return {
        height: `${this.fontSize}${this.unit}`,
        width: `${this.fontSize}${this.unit}`,
        'vertical-align': `${-this.fontSize * 0.14}${this.unit}`,
      };
    },
    styleRender() {
      return {
        fontSize: `${this.fontSize}${this.unit}`,
        color: this.color,
      };
    },
  },
};
</script>

<style lang="scss">
@import './index.scss';
</style>
