<template>
  <div class='example-grid-menu'>
    <div class='content'>
      <div class='title'>普通用法</div>
      <BKGridMenu v-bind="normalMenu"></BKGridMenu>
    </div>

    <div class='content'>
      <div class='title'>一排三个</div>
      <BKGridMenu v-bind="twoMenu"></BKGridMenu>
    </div>

    <div class='content'>
      <div class='title'>没有边框</div>
      <BKGridMenu v-bind="noBorderMenu"></BKGridMenu>
    </div>
    
  </div>
</template>
<script>
import BKGridMenu from '@/components/BKGridMenu'

export default {
  components: {
    BKGridMenu
  },
  data () {
    return {
      normalMenu: {
        border: true,
        list: [
          {
            text: '文字',
            icon: '/static/images/picture.svg',
            isNew: true
          },
          {
            text: '文字',
            icon: '/static/images/picture.svg'
          },
          {
            text: '文字',
            icon: '/static/images/picture.svg'
          },
          {
            text: '文字',
            icon: '/static/images/picture.svg'
          },
          {
            text: '文字',
            icon: '/static/images/picture.svg'
          },
          {
            text: '文字',
            icon: '/static/images/picture.svg'
          }
        ],
        itemClick: this.itemClick
      },
      twoMenu: {
        border: true,
        list: [
          {
            text: '文字',
            icon: '/static/images/picture.svg',
            isNew: true
          },
          {
            text: '文字',
            icon: '/static/images/picture.svg'
          },
          {
            text: '文字',
            icon: '/static/images/picture.svg'
          }
        ],
        itemClick: this.itemClick
      },
      noBorderMenu: {
        list: [
          {
            text: '文字',
            icon: '/static/images/picture.svg'
          },
          {
            text: '文字',
            icon: '/static/images/picture.svg'
          },
          {
            text: '文字',
            icon: '/static/images/picture.svg'
          },
          {
            text: '文字',
            icon: '/static/images/picture.svg'
          },
          {
            text: '文字',
            icon: '/static/images/picture.svg'
          },
          {
            text: '文字',
            icon: '/static/images/picture.svg'
          },
          {
            text: '文字',
            icon: '/static/images/picture.svg'
          },
          {
            text: '文字',
            icon: '/static/images/picture.svg'
          }
        ],
        itemClick: this.itemClick
      }
    }
  },
  mounted () {
    wx.setNavigationBarTitle({
      title: 'BKGridMenu 格子菜单'
    })
  },
  methods: {
    itemClick (e) {
      console.log(e)
    }
  }
}
</script>
<style scoped>
.tuitui-step {
  padding: 0 40px;
}
.title {
  font-size: 26px;
  font-weight: 600;
  color: #ccc;
  margin-bottom: 20px;
  margin-top: 40px;
  margin-left: 40px;
}
</style>
