<template>
  <a href="javascript:;" class="bsui-grid" @click="onClick" :style="style">
    <abstract-button  class=" mu-raised-button mu-raised-button-inverse " :centerRipple="false">
      <div class="bsui-grid__icon" v-if="hasIconSlot||icon">
        <div class="smallIcon" v-if="iconstate" @click="smalliconClick">
            <img :src='"./"+iconstate+".jpg"'>
        </div>
        <slot name="icon"><img :src="icon" alt=""/></slot>
      </div>
      <p class="bsui-grid__num" v-if="hasNumSlot||num" :style='{color:numcolor}'>
        <slot name="num"><span></span></slot>
      </p>
      <p v-if="hasLabelSlot||label" class="bsui-grid__label">
        <slot name="label">
          <span v-html="label"></span>
        </slot>
      </p>
      <slot></slot>
    </abstract-button>
   </a>
</template>

<script>
import abstractButton from '../internal/abstractButton'
import routerMixin from '../internal/routerMixin'
export default {
  name:'grid-item-raised',
  props:["icon","label","link","num","numcolor","iconstate", "cmp_type"],
  mounted () {
    this.$slots.icon && (this.hasIconSlot = true)
    this.$slots.label && (this.hasLabelSlot = true)
    this.$slots.num && (this.hasNumSlot = true)
  },
  computed: {
    style () {

      const rows = this.$parent.rows;

      if (!rows || rows === 3) {
        return ;
      }

      const styles = {};

      styles.width = `${100 / rows}%`

      return styles;
    }
  },
  methods: {
    onClick () {
      this.$emit('itemClick');
      this.$emit('item-click');
      //go(this.link, this.$router)
    },
    smalliconClick () {

      this.$emit('onsmallIconClick',this.state,this.mykey);
    }
  },
  data () {
    return {
      hasIconSlot: false,
      hasLabelSlot: false,
      hasNumSlot: false
    }
  },
  components:{
    'abstract-button': abstractButton,
  },
}
</script>
<style lang="less">
.bsui-grid__num{
    text-align: center;
    font-size: 2.4rem;
    line-height:3.2rem;
}

.bsui-grid .mu-raised-button{
  box-shadow:none;
    height: inherit;
    line-height: inherit;
}
.bsui-grid .mu-raised-button:active {
    box-shadow:none;
}
.smallIcon{
  width:18px;
  height:18px;
  position:absolute;
  left:4.5rem;
}

</style>