<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">Tabs（选项卡）</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>
      <div class="component-item-content">
        <div class="component-item-content-main">
          <article class="component-item-code">
            <sv-code language="javascript">
              import {Tabs, Tab} from 'sinoiov-ui'
              Vue.component(Tabs)
              Vue.component(Tab)
            </sv-code>
          </article>
        </div>
      </div>
    </section>

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

      <sv-example>
        <h2 slot="title">默认Tabs</h2>
        <h2 slot="subtitle">默认显示在底部，背景色为白色，激活的tab为蓝色</h2>
        <template slot="preview">
          <sv-tabs>
            <sv-tab :value="0" title="Props">
              <p>属性</p>
              <p>属性</p>
              <p>属性</p>
            </sv-tab>
            <sv-tab :value="1" title="Slots">
              <p>卡槽</p>
              <p>卡槽</p>
              <p>卡槽</p>
              <p>卡槽</p>
            </sv-tab>
            <sv-tab :value="2" title="Events">
              <p>事件</p>
              <p>事件</p>
              <p>事件</p>
            </sv-tab>
          </sv-tabs>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-tabs>'></sv-code-item>
            <sv-code-item code='<sv-tab :value="0" title="Props">' :level="2"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-tab :value="1" title="Slots">' :level="2"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-tab :value="2" title="Events">' :level="2"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-tabs>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">顶部Tabs</h2>
        <h2 slot="subtitle">position属性用来确定选项卡tab的位置，有top和bottom两种取值，默认为bottom</h2>
        <template slot="preview">
          <sv-tabs position="top">
            <sv-tab :value="0" title="Props">
              <p>属性</p>
              <p>属性</p>
              <p>属性</p>
            </sv-tab>
            <sv-tab :value="1" title="Slots">
              <p>卡槽</p>
              <p>卡槽</p>
              <p>卡槽</p>
              <p>卡槽</p>
            </sv-tab>
            <sv-tab :value="2" title="Events">
              <p>事件</p>
              <p>事件</p>
              <p>事件</p>
            </sv-tab>
          </sv-tabs>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-tabs position="top">'></sv-code-item>
            <sv-code-item code='<sv-tab :value="0" title="Props">' :level="2"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-tab :value="1" title="Slots">' :level="2"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-tab :value="2" title="Events">' :level="2"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-tabs>'></sv-code-item>

          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">可滑动的且含有条纹的Tabs</h2>
        <h2 slot="subtitle">添加slidable属性或者向属性传入true，即可添加滑动功能，添加stripe属性或者向属性传入true，添加条纹</h2>
        <template slot="preview">
          <sv-tabs position="top" slidable stripe>
            <sv-tab :value="0" title="Props">
              <p>属性</p>
              <p>属性</p>
              <p>属性</p>
            </sv-tab>
            <sv-tab :value="1" title="Slots">
              <p>卡槽</p>
              <p>卡槽</p>
              <p>卡槽</p>
              <p>卡槽</p>
            </sv-tab>
            <sv-tab :value="2" title="Events">
              <p>事件</p>
              <p>事件</p>
              <p>事件</p>
            </sv-tab>
          </sv-tabs>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-tabs position="top" slidable stripe>'></sv-code-item>
            <sv-code-item code='<sv-tab :value="0" title="Props">' :level="2"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-tab :value="1" title="Slots">' :level="2"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-tab :value="2" title="Events">' :level="2"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-tabs>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">设置tab link 的背景色和激活的tab文字颜色</h2>
        <h2 slot="subtitle">bg-color属性设置背景色，color属性设置文字颜色，两者取值均和Button组件的color属性取值相同，也可参见color组件设置相应的值。当然，你也可以传入颜色的单词或者rgb来精确满足你的色彩要求。</h2>
        <template slot="preview">
          <sv-tabs position="top" slidable stripe bg-color="primary" color="light">
            <sv-tab :value="0" title="Props">
              <p>属性</p>
              <p>属性</p>
              <p>属性</p>
            </sv-tab>
            <sv-tab :value="1" title="Slots">
              <p>卡槽</p>
              <p>卡槽</p>
              <p>卡槽</p>
              <p>卡槽</p>
            </sv-tab>
            <sv-tab :value="2" title="Events">
              <p>事件</p>
              <p>事件</p>
              <p>事件</p>
            </sv-tab>
          </sv-tabs>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-tabs position="top" slidable stripe bg-color="primary" color="light">'></sv-code-item>
            <sv-code-item code='<sv-tab :value="0" title="Props">' :level="2"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-tab :value="1" title="Slots">' :level="2"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-tab :value="2" title="Events">' :level="2"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-tabs>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">添加图标</h2>
        <h2 slot="subtitle">Tabs组件含有icon-position属性，作用为设置icon的位置，其有top,right,bottom,left四种取值，默认为top。Tab组件含有icon属性，通过该属性可以为Tab指定con</h2>
        <template slot="preview">
          <sv-tabs slidable icon-position="top">
            <sv-tab :value="0" title="关闭" icon="close">
              <p>属性</p>
              <p>属性</p>
              <p>属性</p>
            </sv-tab>
            <sv-tab :value="1" title="查询" icon="search">
              <p>卡槽</p>
              <p>卡槽</p>
              <p>卡槽</p>
              <p>卡槽</p>
            </sv-tab>
            <sv-tab :value="2" title="我的" icon="user">
              <p>事件</p>
              <p>事件</p>
              <p>事件</p>
            </sv-tab>
          </sv-tabs>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-tabs slidable icon-position="top">'></sv-code-item>
            <sv-code-item code='<sv-tab :value="0" title="关闭" icon="close">' :level="2"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-tab :value="1" title="查询" icon="search">' :level="2"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-tab :value="2" title="我的" icon="user">' :level="2"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-tabs>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">button样式的tab link</h2>
        <h2 slot="subtitle">tab link默认为文字或者图标或者文字图标样式。可以设置type属性等于button，将其变为button风格的样式</h2>
        <template slot="preview">
          <sv-tabs type="button" icon-position="left" position="top" bg-color="danger">
            <sv-tab :value="0" title="关闭" icon="close">
              <p>属性</p>
              <p>属性</p>
              <p>属性</p>
            </sv-tab>
            <sv-tab :value="1" title="查询" icon="search">
              <p>卡槽</p>
              <p>卡槽</p>
              <p>卡槽</p>
              <p>卡槽</p>
            </sv-tab>
            <sv-tab :value="2" title="我的" icon="user">
              <p>事件</p>
              <p>事件</p>
              <p>事件</p>
            </sv-tab>
          </sv-tabs>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-tabs slidable icon-position="top">'></sv-code-item>
            <sv-code-item code='<sv-tab :value="0" title="关闭" icon="close">' :level="2"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>属性</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-tab :value="1" title="查询" icon="search">' :level="2"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>卡槽</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-tab :value="2" title="我的" icon="user">' :level="2"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='<p>事件</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-tab>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-tabs>'></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">Tabs</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.tabs.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-tab>
            <sv-tab :value="2" title="Events">
              <sv-table :data="apiData.tabs.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">Tab</h1>
          <h1 class="component-item-content-subtitle">Tab组件只能用在Tabs组件内部</h1>
        </div>
        <div class="component-item-content-main api">
          <sv-tabs stripe position="top">
            <sv-tab :value="0" title="Props">
              <sv-table :data="apiData.tab.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.tab.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">
  export default {
    data () {
      return {
        apiData: {
          tabs: {
            props: [
              {
                name: 'active',
                description: '默认激活的tab,取值为子组件Tab组件的value属性值',
                type: 'string,number',
                optional: '-',
                default: '0'
              },
              {
                name: 'position',
                description: 'tab的位置',
                type: 'string',
                optional: 'top,bottom',
                default: 'bottom'
              },
              {
                name: 'stripe',
                description: 'tab是否有条纹',
                type: 'boolean',
                optional: 'true,false',
                default: 'false'
              },
              {
                name: 'sliable',
                description: '是否可以滑动切换',
                type: 'boolean',
                optional: 'true,false',
                default: 'false'
              },
              {
                name: 'fixed',
                description: '是否固定tab。当position属性为top时，tab link固定在页面顶部；当position属性为bottom时，tab link固定在页面底部，tab container占满屏幕剩余部分。',
                type: 'boolean',
                optional: 'true,false',
                default: 'false'
              },
              {
                name: 'bg-color',
                description: 'tab的背景颜色',
                type: 'string',
                optional: 'light,stable,primary,info,success,danger等详见Color组件。也可传入表示颜色的单词或者rgb值。',
                default: 'light'
              },
              {
                name: 'color',
                description: '激活的tab文字颜色',
                type: 'string',
                optional: 'light,stable,primary,info,success,danger等详见Color组件。也可传入表示颜色的单词或者rgb值。',
                default: 'primary'
              },
              {
                name: 'icon-position',
                description: 'tab icon的位置，仅当Tab组件有icon时该属性才起作用',
                type: 'string',
                optional: 'top,right,bottom,left',
                default: 'top'
              },
              {
                name: 'type',
                description: 'tab link的样式，只有一个button取值，以ButtonGroup组件的样式显示。并且此时bg-color属性和stripe属性将失效',
                type: 'string',
                optional: 'button',
                default: '-'
              },
            ],
            events: [
              {
                name: 'tab-active',
                description: '当某个tab签被激活时触发',
                param: '当前被激活的tab实例，有value,title,index三个属性'
              }
            ]
          },
          tab: {
            props: [
              {
                name: 'value',
                description: 'tab的值，该值将作为父组件Tabs组件active值的唯一对应',
                type: 'string,number',
                optional: '-',
                default: '-'
              },
              {
                name: 'title',
                description: 'tab的标题',
                type: 'string',
                optional: '-',
                default: '-'
              },
              {
                name: 'icon',
                description: 'icon图标',
                type: 'string',
                optional: '参见Icon组件',
                default: '-'
              }
            ],
            slots: [
              {
                name: '-',
                description: 'tab内容'
              }
            ]
          }
        }
      }
    },
    methods: {
      openDialog (message, title) {
        this.$dialog(message, title)
      },
      openAlertDialog (message, title, options) {
        this.$dialog.alert(message, title, options).then(() => {})
      },
      openConfirmDialog () {
        this.$dialog.confirm('sinoiovUI框架你喜欢吗？', '调查').then(() => {
          alert('点击了确定，感谢')
        }).catch(() => {
          alert('点击了取消，我会更加努力的')
        })
      },
      openPromptDialog () {
        this.$dialog.prompt({
          inputValidator: (value) => {
            console.log(value)
            if (value.length < 3) {
              return '最少三个字'
            } else {
              return true
            }
          }
        }).then((value) => {
          console.log(value)
        }).catch(() => {

        })
      }
    }
  }
</script>

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