<template>
  <div class="component-wrapper">
    <sv-header :title="title" :color="color">
      <template slot="left">
        <sv-icon icon="arrow-left" v-if="leftValue !== 0 && color !== 'light'" size="large" color="light" @click="goBack"></sv-icon>
        <sv-icon icon="arrow-left" v-if="leftValue !== 0 && color === 'light'" size="large" @click="goBack"></sv-icon>
        <span v-if="leftValue === 2" @click="goBack">返回</span>
      </template>
      <div class="title" v-if="showTitle">自定义标的标题文字</div>
      <template slot="right">
        <sv-icon icon="menu" v-if="rightValue === 1 && color !== 'light'" size="large" color="light"></sv-icon>
        <sv-icon icon="menu" v-if="rightValue === 1 && color === 'light'" size="large"></sv-icon>
        <span v-if="rightValue === 2">分享</span>
      </template>
    </sv-header>
    <sv-main has-header>
      <hgroup class="component-hgroup">
        <h1 class="component-title">Header (头部)</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">默认背景色为白色，固定在顶部。可以通过无名slot或者title属性来设置标题，slot更灵活。</h2>
          <template slot="preview">
            <sv-button size="small" @click="showTitle = false; title = '标题文字'">通过title设置</sv-button>
            <sv-button size="small" @click="showTitle = true; title = ''">通过slot自定义</sv-button>
          </template>
          <template slot="code">
            <sv-code>
              <sv-code-item code='<sv-header title="标题文字"></sv-header>'></sv-code-item>
            </sv-code>
            <sv-code>
              <sv-code-item code='<sv-header>'></sv-code-item>
              <sv-code-item code='<div class="title">自定义标的标题文字</div>' :level="2"></sv-code-item>
              <sv-code-item code='</sv-header>'></sv-code-item>
            </sv-code>
          </template>
        </sv-example>

        <sv-example>
          <h2 slot="title">颜色</h2>
          <h2 slot="subtitle">同Bar组件的color，具体参见Bar组件</h2>
          <template slot="preview">
            <sv-button size="small" @click="color = 'danger'">设置为红色</sv-button>
            <sv-button size="small" @click="color = 'success'">设置为绿色</sv-button>
            <sv-button size="small" @click="color = 'light'">重置</sv-button>
          </template>
          <template slot="code">
            <sv-code>
              <sv-code-item code='<sv-header title="标题文字" color="danger"></sv-header>'></sv-code-item>
              <sv-code-item code='<sv-header title="标题文字" color="success"></sv-header>'></sv-code-item>
            </sv-code>
            <sv-code>
            </sv-code>
          </template>
        </sv-example>

        <sv-example>
          <h2 slot="title">左侧和右侧</h2>
          <h2 slot="subtitle">左右两侧显示内容</h2>
          <template slot="preview">
            <div class="code-item">
              <h2 class="code-item-title">左侧显示内容</h2>
              <sv-radio-group type="list" v-model="leftValue">
                <sv-radio :value="0">不显示</sv-radio>
                <sv-radio :value="1">仅图标</sv-radio>
                <sv-radio :value="2">图标加文字</sv-radio>
              </sv-radio-group>
            </div>
            <div class="code-item">
              <h2 class="code-item-title">右侧显示内容</h2>
              <sv-radio-group type="list" v-model="rightValue" align="right">
                <sv-radio :value="0">不显示</sv-radio>
                <sv-radio :value="1">仅图标</sv-radio>
                <sv-radio :value="2">图标加文字</sv-radio>
              </sv-radio-group>
            </div>
          </template>
          <template slot="code">
            <sv-code>
              <sv-code-item code='<sv-header title="标题文字">'></sv-code-item>
              <sv-code-item code='<sv-icon slot="left" icon="arrow-left" size="large" color="light"></sv-icon>' :level="2"></sv-code-item>
              <sv-code-item code='</sv-header>'></sv-code-item>
            </sv-code>
            <sv-code>
              <sv-code-item code='<sv-header title="标题文字">'></sv-code-item>
              <sv-code-item code='<sv-icon slot="right" icon="menu" size="large" color="light"></sv-icon>' :level="2"></sv-code-item>
              <sv-code-item code='</sv-header>'></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="描述"></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>
    </sv-main>
  </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 {
        title: '标题文字',
        showTitle: false,
        color: 'light',
        leftValue: 0,
        rightValue: 0,
        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: {
      goBack () {
        window.history.back()
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../../src/styles/base";
  @import "../../styles/components";
  .title{
    font-style: italic;
    color: orange;
  }
  .code-item{
    &:not(:first-child){
      margin-top: pxToRem(20);
    }
    .code-item-title{
      margin-bottom: pxToRem(10);
    }
  }
</style>
