<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">Main (主体)</h1>
      <h2 class="component-subtitle">主体是除过Header、Subheader、Nav和Footer（若有）剩余的部分</h2>
      <h3 class="component-notice">可以和Header、Subheader、Nav 、Footer方便的进行上中下布局</h3>
    </hgroup>

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

      <sv-example>
        <h2 slot="title">默认Main</h2>
        <h2 slot="subtitle">没有header和footer，将占满Layout组件</h2>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-main></sv-main>'></sv-code-item>
          </sv-code>
          <sv-code>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">含有Header、Subheader、Nav或者Footer组件的Main</h2>
        <h2 slot="subtitle">通过设置对应的has-xxx属性来控制Main组件的位置</h2>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-main has-header has-nav has-subheader has-footer></sv-main>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>
    </section>

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

      <div class="component-item-content">
        <div class="component-item-content-main api">
          <sv-tabs stripe position="top" slidable>
            <sv-tab :value="0" title="Props">
              <sv-table :data="apiData.props">
                <sv-table-column prop="name" title="名称"></sv-table-column>
                <sv-table-column prop="description" title="描述"></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.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.events">
                <sv-table-column prop="name" title="名称"></sv-table-column>
                <sv-table-column prop="description" title="描述"></sv-table-column>
              </sv-table>
            </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: {
          props: [
            {
              name: 'has-header',
              description: '是否含有Header组件',
              type: 'boolean',
              optional: 'true, false',
              default: 'false'
            },
            {
              name: 'has-nav',
              description: '是否含有Nav组件',
              type: 'boolean',
              optional: 'true, false',
              default: 'false'
            },
            {
              name: 'has-subheader',
              description: '是否含有Subheader组件',
              type: 'boolean',
              optional: 'true, false',
              default: 'false'
            },
            {
              name: 'has-footer',
              description: '是否含有Footer组件',
              type: 'boolean',
              optional: 'true, false',
              default: 'false'
            }
          ],
          slots: [],
          events: []
        }
      }
    }
  }
</script>

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