<template>
  <sv-layout>
    <sv-header>
      <sv-icon slot="left" icon="arrow-left" size="large" @click="back"></sv-icon>
      主标题
      <sv-icon icon="menu" size="large" slot="right"></sv-icon>
    </sv-header>
    <sv-subheader>副标题</sv-subheader>
    <sv-main has-subheader>
      <div class="component-wrapper">
        <hgroup class="component-hgroup">
          <h1 class="component-title">Subheader (副标题)</h1>
          <h2 class="component-subtitle">位于Header的下方</h2>
          <h3 class="component-notice">Subheader同样是固定在顶部，只是是在Header的下面，就算没有Header，Subheader这个样式也会距离顶部有一个Header的距离。用法和Header几乎完全一样。</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">
              用法和Header组件是一样的，具体参见Header组件
            </template>
            <template slot="code">
              <sv-code>
                <sv-code-item code='<sv-subheader>副标题</sv-subheader>'></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 position="top" stripe 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="描述" width="60"></sv-table-column>
                    <sv-table-column prop="type" title="类型"></sv-table-column>
                    <sv-table-column prop="optional" title="可选值" width="100"></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>
    </sv-main>
  </sv-layout>
</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: 'title',
              description: '标题',
              type: 'string',
              optional: '-',
              default: '-'
            },
            {
              name: 'color',
              description: '颜色',
              type: 'string',
              optional: '官方内置的所有颜色',
              default: 'light'
            }
          ],
          slots: [
            {
              name: 'left',
              description: '左边显示元素'
            },
            {
              name: 'right',
              description: '右边显示元素'
            }
          ],
          events: []
        }
      }
    },
    methods: {
      back () {
        window.history.back()
      }
    }
  }
</script>

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