<template>
 <span :class='iconClass' class='m-icon-bgcolor' :style='styles' @click="handleClick">
      <span class='path1' style='display:inline'></span>
      <span class='path2' style='display:inline'></span>
      <span class='path3' style='display:inline'></span>
      <span class='path4' style='display:inline'></span>
      <span class='path5' style='display:inline'></span>
      <span class='path6' style='display:inline'></span>
      <span class='path7' style='display:inline'></span>
      <span class='path8' style='display:inline'></span>
  </span>
</template>

<script>
export default {
  name: 'chaos-icon',
  props: {
    icon: String,
    cls: String,
    disabled: Boolean,
    active: Boolean,
    styles: Object
  },
  data:function(){
    return {
        iconClass: [{
          'icon' :true,
          'icon-disabled' :this.disabled,
          'icon-active': this.active
        },
        this.cls, this.icon]
    };

  },
  watch:{
    icon:function(){
      this.iconClass = [{
          'icon' :true,
          'icon-disabled' :this.disabled,
          'icon-active': this.active
       },
       this.cls, this.icon]
    }
  },
  methods: {
    handleClick (e) {
      this.$emit('click', e)
    }
  }
}
</script>
