<template>
  <demo-section>
    <demo-block :title="$t('basicUsage')">
      <van-grid>
        <van-grid-item
          v-for="i in 4"
          :key="i"
          icon="photo-o"
          :text="$t('text')"
        />
      </van-grid>
    </demo-block>

    <demo-block :title="$t('columnNum')">
      <van-grid :column-num="3">
        <van-grid-item
          v-for="i in 6"
          :key="i"
          icon="photo-o"
          :text="$t('text')"
        />
      </van-grid>
    </demo-block>

    <demo-block :title="$t('customContent')">
      <van-grid
        :border="false"
        :column-num="3"
      >
        <van-grid-item>
          <van-image
            fit="contain"
            src="https://img.yzcdn.cn/vant/apple-1.jpg"
          />
        </van-grid-item>
        <van-grid-item>
          <van-image
            fit="contain"
            src="https://img.yzcdn.cn/vant/apple-2.jpg"
          />
        </van-grid-item>
        <van-grid-item>
          <van-image
            fit="contain"
            src="https://img.yzcdn.cn/vant/apple-3.jpg"
          />
        </van-grid-item>
      </van-grid>
    </demo-block>

    <demo-block :title="$t('square')">
      <van-grid square>
        <van-grid-item
          v-for="i in 8"
          :key="i"
          icon="photo-o"
          :text="$t('text')"
        />
      </van-grid>
    </demo-block>

    <demo-block :title="$t('gutter')">
      <van-grid :gutter="10">
        <van-grid-item
          v-for="i in 8"
          :key="i"
          icon="photo-o"
          :text="$t('text')"
        />
      </van-grid>
    </demo-block>

    <demo-block :title="$t('route')">
      <van-grid
        clickable
        :column-num="2"
      >
        <van-grid-item
          icon="home-o"
          :text="$t('vueRoute')"
          to="/"
        />
        <van-grid-item
          icon="search"
          :text="$t('urlRoute')"
          url="https://www.baidu.com"
        />
      </van-grid>
    </demo-block>
  </demo-section>
</template>

<script>
export default {
  i18n: {
    'zh-CN': {
      text: '文字',
      route: '页面导航',
      gutter: '格子间距',
      square: '正方形格子',
      columnNum: '自定义列数',
      customContent: '自定义内容',
      urlRoute: 'URL 跳转',
      vueRoute: '路由跳转'
    },
    'en-US': {
      text: 'Text',
      route: 'Route',
      gutter: 'Gutter',
      square: 'Square',
      columnNum: 'Column Num',
      customContent: 'Custom Content',
      urlRoute: 'URL',
      vueRoute: 'Vue Router'
    }
  }
};
</script>

<style lang="less">
@import '../../style/var';

</style>
