<template>
  <a href="javascript:;" class="bsui-grid" @click="onClick" :style="style">
    <div class="bsui-grid-inner">
<div class="bsui-grid__icon" v-if="hasIconSlot||icon">
      <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>

    </div>
   </a>
</template>

<script>

export default {
  name:'grid-item',

  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('item-click');
      //go(this.link, this.$router)
    },

  },
  data () {
    return {
      hasIconSlot: false,
      hasLabelSlot: false,
      hasNumSlot: false
    }
  },
}
</script>
<style lang="less">
.bsui-grid__num{
    text-align: center;
    font-size: 2.4rem;
    line-height:3.2rem;
}


.smallIcon{
  width:18px;
  height:18px;
  position:absolute;
  left:4.5rem;
}

</style>