<template>
  <svg class="sv-icon-wrapper" :style="sizeStyle" @click="handleClick">
    <use v-bind:xlink:href="iconHref" class="sv-icon" :class="colorClass" :style="styles"/>
  </svg>
</template>

<script type="text/ecmascript-6">
  import v from '../../scripts/var'
  export default {
    name: 'svIcon',
    data () {
      return {
        styles: {}
      }
    },
    props: {
      icon: {
        type: [String, Object]
      },
      size: {
        type: [String, Number],
        default: 32
      },
      width: {
        type: [String, Number],
        default: ''
      },
      height: {
        type: [String, Number],
        default: ''
      },
      color: String
    },
    computed: {
      iconHref () {
        if (this.icon) {
          let icon = this.icon
          if (typeof this.icon === 'object') {
            Object.keys(this.icon).forEach(key => {
              if (this.icon[key]) {
                icon = key
              }
            })
          }
          return `#sv-icon-${icon}`
        }
        return ''
      },
      sizeStyle () {
        let width
        let height
        if (typeof this.size === 'number') {
          width = height = this.size
        } else {
          if (window.parseFloat(this.size)) {
            width = height = window.parseFloat(this.size)
          } else {
            if (this.size === 'small') {
              width = height = 22
            } else if (this.size === 'large') {
              width = height = 42
            } else {
              width = height = 32
            }
          }
        }

        if (this.width) {
          width = this.width
        }
        if (this.height) {
          height = this.height
        }
        return {
          width: `${width / v.getDesignDraftHtmlFontSize()}rem`,
          height: `${height / v.getDesignDraftHtmlFontSize()}rem`
        }
      },
      colorClass () {
        let colorsObject = {
          light: 'light',
          stable: 'stable',
          primary: 'primary',
          info: 'info',
          danger: 'danger',
          success: 'success',
          warning: 'warning',
          lively: 'lively',
          royal: 'royal'
        }

        if (colorsObject[this.color]) {
          return `sv-icon-${this.color}`
        } else {
          this.$set(this.styles, 'fill', this.color)
        }
      }
    },
    methods: {
      handleClick (event) {
        this.$emit('click', event)
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";
  .sv-icon-wrapper{
    .sv-icon{
      fill:#999;
      &.sv-icon-stable{
        fill:$color-stable;
      }
      &.sv-icon-info{
        fill:$color-info;
      }
      &.sv-icon-primary{
        fill:$color-primary;
      }
      &.sv-icon-warning{
        fill:$color-warning;
      }
      &.sv-icon-success{
        fill:$color-success;
      }
      &.sv-icon-danger{
        fill:$color-danger;
      }
      &.sv-icon-royal{
        fill:$color-royal;
      }
      &.sv-icon-lively{
        fill:$color-lively;
      }
    }
  }
</style>
