<template>
  <text class="ml-icon" :class="[className || '', size ? `size-${size}` : '', status ? `ss-${status}` : '', name ? `${prefix}${name}` : '', {'is-roll': roll}]" :style="styles" @tap="clickEvent"></text>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MlIcon',
  options: {
    virtualHost: true,
    styleIsolation: 'shared'
  },
  props: {
    name: String,
    status: String,
    roll: Boolean,
    size: String,
    color: String,
    fontSize: String,
    className: String
  },
  data () {
    return {
      prefix: 'mlicon-'
    }
  },
  computed: {
    styles () {
      const fts = this.fontSize ? `font-size: ${this.fontSize};` : ''
      const clr = this.color ? `color: ${this.color};` : ''
      return `${fts}${clr}`
    }
  },
  methods: {
    clickEvent (evnt: Event) {
      this.$emit('tap', { $event: evnt })
      this.$emit('click', { $event: evnt })
    }
  }
})
</script>

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

.ml-icon {
  @keyframes rollCircle {
    0% {
      transform: rotate(0deg)
    }
    to {
      transform: rotate(1turn)
    }
  }
  &.size-large {
    font-size: 44rpx;
  }
  &.size-medium {
    font-size: 40rpx;
  }
  &.size-small {
    font-size: 36rpx;
  }
  &.size-mini {
    font-size: 28rpx;
  }
  &.is-roll {
    display: inline-block;
    animation: rollCircle 1s linear infinite;
  }
  &.ss-primary {
    color: $ml-theme-primary-color;
  }
  &.ss-success {
    color: $ml-theme-success-color;
  }
  &.ss-info {
    color: #909399;
  }
  &.ss-warning {
    color: $ml-theme-warning-color;
  }
  &.ss-danger {
    color: $ml-theme-error-color;
  }
  &.ss-gray {
    color: $ml-gray-color;
  }
  &.ss-blue {
    color: $ml-blue-color;
  }
  &.ss-green {
    color: $ml-green-color;
  }
  &.ss-pink {
    color: $ml-pink-color;
  }
  &.ss-red {
    color: $ml-red-color;
  }
  &.ss-orange {
    color: $ml-orange-color;
  }
  &.ss-purple {
    color: $ml-purple-color;
  }
  &.white {
    color: $ml-white-color;
  }
}
</style>
