
<template>
  <div class="grid">
    <div class="grid-item" @click="itemClicked(item, index)" :style="style" v-for="(item, index) in list" :key="index">
        <image v-if="item.icon" :src="item.icon" alt="" class="item-icon" ></image>
        <text v-if="item.label" class="item-label">{{item.label}}</text>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cols: {
      type: Number,
      default: 3
    },
    list: {
      type: Array
    },
    border: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    style() {
      const styles = {};
      styles.width = `${weex.config.env.deviceWidth / this.cols * 750 / weex.config.env.deviceWidth}px`;
      if(this.border){
        styles['border-right-width'] = '1px';
        styles['border-bottom-width'] = '1px';
      }
      return styles
    }
  },
  methods: {
    itemClicked(item, index){
      this.$emit('itemClicked', {item, index});
    }
  }
};
</script>
<style scoped>
.grid {
  flex-direction: row;
  flex-wrap: wrap;
}
.grid-border {
  flex-direction: row;
  flex-wrap: wrap;
  border-style: solid;
  border-left-width: 0px;
  border-top-width: 1px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-color: #D9D9D9;
}
.grid-item{
  height: 160px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-color: #D9D9D9;
}

.grid-item-border{
  height: 160px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-style: solid;
  border-left-width: 0px;
  border-top-width: 0px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-color: #D9D9D9;
}

.item-icon{
  width: 60px;
  height: 60px;
}
.item-label{
  font-size: 30px;
  color: #7A7A7A;
  letter-spacing: 0.22px;
}
</style>
