<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">Grid (九宫格)</h1>
      <h2 class="component-subtitle">九宫格布局在移动端非常常见</h2>
      <h3 class="component-notice">自定义非常方便</h3>
    </hgroup>

    <section class="component-item">
      <hgroup class="component-item-hgroup">
        <h1 class="component-item-title">代码示例</h1>
      </hgroup>

      <sv-example>
        <h2 slot="title">基本用法</h2>
        <h2 slot="subtitle">最简单定义一个九宫格的用法</h2>
        <template slot="preview">
          <sv-grid>
            <sv-grid-cell>昨天</sv-grid-cell>
            <sv-grid-cell>今天</sv-grid-cell>
            <sv-grid-cell>明天</sv-grid-cell>
            <sv-grid-cell>后天</sv-grid-cell>
          </sv-grid>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-grid>'></sv-code-item>
            <sv-code-item code='<sv-grid-cell>昨天</sv-grid-cell>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-grid-cell>今天</sv-grid-cell>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-grid-cell>明天</sv-grid-cell>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-grid-cell>后天</sv-grid-cell>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-grid>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">控制每行单元格数量</h2>
        <h2 slot="subtitle">cols属性可以传入数字来控制每行单元格数量，默认值为3。注意：当传入的cols值大于单元格总数量时，则会在一行展示全部的单元格</h2>
        <template slot="preview">
          <sv-grid :cols="2">
            <sv-grid-cell>昨天</sv-grid-cell>
            <sv-grid-cell>今天</sv-grid-cell>
            <sv-grid-cell>明天</sv-grid-cell>
            <sv-grid-cell>后天</sv-grid-cell>
          </sv-grid>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-grid :cols="2">'></sv-code-item>
            <sv-code-item code='<sv-grid-cell>昨天</sv-grid-cell>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-grid-cell>今天</sv-grid-cell>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-grid-cell>明天</sv-grid-cell>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-grid-cell>后天</sv-grid-cell>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-grid>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">带有icon的单元格</h2>
        <h2 slot="subtitle">icon取值参见Icon组件。可以通过icon属性指定，也可通过名为icon的slot自定义</h2>
        <template slot="preview">
          <sv-grid>
            <sv-grid-cell icon="close">昨天</sv-grid-cell>
            <sv-grid-cell>
              <sv-icon icon="search" color="danger" slot="icon"></sv-icon>
              今天
            </sv-grid-cell>
            <sv-grid-cell>
              <sv-icon icon="user" color="info" slot="icon"></sv-icon>
              明天
            </sv-grid-cell>
            <sv-grid-cell icon="exit">后天</sv-grid-cell>
          </sv-grid>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-grid>'></sv-code-item>
            <sv-code-item code='<sv-grid-cell icon="close">昨天</sv-grid-cell>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-grid-cell>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-icon icon="search" color="danger" slot="icon"></sv-icon>' :level="3"></sv-code-item>
            <sv-code-item code='<span>今天</span>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-grid-cell>' :level="2"></sv-code-item>

            <sv-code-item code='<sv-grid-cell>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-icon icon="user" color="info" slot="icon"></sv-icon>' :level="3"></sv-code-item>
            <sv-code-item code='<span>明天</span>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-grid-cell>' :level="2"></sv-code-item>

            <sv-code-item code='<sv-grid-cell icon="exit">后天</sv-grid-cell>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-grid>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">没有边框</h2>
        <h2 slot="subtitle">has-border为false时，单元格没有边框，默认为true</h2>
        <template slot="preview">
          <sv-grid :has-border="false">
            <sv-grid-cell icon="close">昨天</sv-grid-cell>
            <sv-grid-cell icon="search">今天</sv-grid-cell>
            <sv-grid-cell  icon="user">明天</sv-grid-cell>
            <sv-grid-cell icon="exit">后天</sv-grid-cell>
          </sv-grid>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-grid :has-border="false">'></sv-code-item>
            <sv-code-item code='<sv-grid-cell>昨天</sv-grid-cell>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-grid-cell>今天</sv-grid-cell>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-grid-cell>明天</sv-grid-cell>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-grid-cell>后天</sv-grid-cell>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-grid>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>
    </section>

    <section class="component-item api">
      <hgroup class="component-item-hgroup">
        <h1 class="component-item-title">API</h1>
      </hgroup>

      <div class="component-item-content">
        <div class="component-item-content-header">
          <h1 class="component-item-content-title">Grid</h1>
          <h1 class="component-item-content-subtitle"></h1>
        </div>
        <div class="component-item-content-main api">
          <sv-tabs stripe position="top">
            <sv-tab :value="0" title="Props">
              <sv-table :data="apiData.grid.props">
                <sv-table-column prop="name" title="名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="200"></sv-table-column>
                <sv-table-column prop="type" title="类型"></sv-table-column>
                <sv-table-column prop="optional" title="可选值"></sv-table-column>
                <sv-table-column prop="default" title="默认值"></sv-table-column>
              </sv-table>
            </sv-tab>
            <sv-tab :value="1" title="Slots">
              <sv-table :data="apiData.grid.slots">
                <sv-table-column prop="name" title="名称"></sv-table-column>
                <sv-table-column prop="description" title="描述"></sv-table-column>
              </sv-table>
            </sv-tab>
            <sv-tab :value="2" title="Events">
              <sv-table :data="apiData.grid.events">
                <sv-table-column prop="name" title="事件名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="200"></sv-table-column>
                <sv-table-column prop="param" title="回调参数" width="300"></sv-table-column>
              </sv-table>
            </sv-tab>
          </sv-tabs>
        </div>
      </div>
      <div class="component-item-content">
        <div class="component-item-content-header">
          <h1 class="component-item-content-title">GridCell</h1>
          <h1 class="component-item-content-subtitle">和父组件TimelineItem相同的属性优先级高于父组件，即会覆盖父组件的值</h1>
        </div>
        <div class="component-item-content-main api">
          <sv-tabs stripe position="top">
            <sv-tab :value="0" title="Props">
              <sv-table :data="apiData.gridCell.props">
                <sv-table-column prop="name" title="名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="300"></sv-table-column>
                <sv-table-column prop="type" title="类型"></sv-table-column>
                <sv-table-column prop="optional" title="可选值"></sv-table-column>
                <sv-table-column prop="default" title="默认值"></sv-table-column>
              </sv-table>
            </sv-tab>
            <sv-tab :value="1" title="Slots">
              <sv-table :data="apiData.gridCell.slots">
                <sv-table-column prop="name" title="名称"></sv-table-column>
                <sv-table-column prop="description" title="描述"></sv-table-column>
              </sv-table>
            </sv-tab>
            <sv-tab :value="2" title="Events">
            </sv-tab>
          </sv-tabs>
        </div>
      </div>
    </section>
  </div>
</template>

<script type="text/ecmascript-6">
  import Code from '../components/Code.vue'
  import CodeItem from '../components/CodeItem.vue'
  export default {
    components: {
      svCode: Code,
      svCodeItem: CodeItem
    },
    data () {
      return {
        apiData: {
          grid: {
            props: [
              {
                name: 'cols',
                description: '每行单元格数量，即列数',
                type: 'number',
                optional: '-',
                default: '3'
              },
              {
                name: 'has-border',
                description: '是否有边框',
                type: 'Boolean',
                optional: 'true,false',
                default: 'true'
              }
            ],
            slots: [
//              {
//                name: 'time',
//                description: '时间'
//              }
            ],
            events: [
//              {
//                name: 'click',
//                description: '点击按钮时的回调，回调参数为当前被点击按钮的索引'
//              }
            ]
          },
          gridCell: {
            props: [
              {
                name: 'icon',
                description: '方格中显示的Icon，取值为Icon组件的值',
                type: 'string',
                optional: '-',
                default: '-'
              }
            ],
            slots: [
              {
                name: 'icon',
                description: '方格中的icon，常使用Icon组件'
              }
            ],
            events: []
          },
        }
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../src/styles/base";
  @import "../styles/components";
</style>
