<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">Button (按钮)</h1>
      <h2 class="component-subtitle">按钮是移动app不可或缺的一部分，就像Header一样。不同风格的app，需要的不同按钮的样式。</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">
        <fieldset class="component-item-content-hgroup">
          <legend class="component-item-content-title">按钮颜色</legend>
          <div class="component-item-content-subtitle">按钮颜色有：默认、白色，灰色、蓝色、浅蓝色、绿色、黄色、红色、橙色、紫色。
            通过设置color为light、stable、primary、info、success、warning、danger、lively、royal创建不同颜色的按钮，不设置为默认样式。</div>
        </fieldset>
        <div class="component-item-content-main">
          <article class="component-item-preview">
            <sv-button>默认</sv-button>
            <sv-button color="light">白色</sv-button>
            <sv-button color="stable">灰色</sv-button>
            <sv-button color="primary">蓝色</sv-button>
            <sv-button color="info">信息</sv-button>
            <sv-button color="success">成功</sv-button>
            <sv-button color="warning">警告</sv-button>
            <sv-button color="danger">危险</sv-button>
            <sv-button color="lively">橙色</sv-button>
            <sv-button color="royal">紫色</sv-button>
          </article>
          <article class="component-item-code">
            <sv-code>
              <sv-code-item code='<sv-button>默认</sv-button>'></sv-code-item>
              <sv-code-item code='<sv-button color="light">白色</sv-button>'></sv-code-item>
              <sv-code-item code='<sv-button color="stable">灰色</sv-button>'></sv-code-item>
              <sv-code-item code='<sv-button color="primary">蓝色</sv-button>'></sv-code-item>
              <sv-code-item code='<sv-button color="info">信息</sv-button>'></sv-code-item>
              <sv-code-item code='<sv-button color="success">成功</sv-button>'></sv-code-item>
              <sv-code-item code='<sv-button color="warning">警告</sv-button>'></sv-code-item>
              <sv-code-item code='<sv-button color="danger">危险</sv-button>'></sv-code-item>
              <sv-code-item code='<sv-button color="lively">橙色</sv-button>'></sv-code-item>
              <sv-code-item code='<sv-button color="royal">紫色</sv-button>'></sv-code-item>
            </sv-code>
          </article>
        </div>
      </div>

      <div class="component-item-content">
        <fieldset class="component-item-content-hgroup">
          <legend class="component-item-content-title">按钮尺寸</legend>
          <div class="component-item-content-subtitle">按钮尺寸有：小、默认（中）、大、充满。
            通过设置size为small、large、full将按钮设置为小、大、充满父容器的尺寸，不设置为默认（中）尺寸。full尺寸的按钮一般用在Footer组件中。</div>
        </fieldset>
        <div class="component-item-content-main">
          <article class="component-item-preview">
            <sv-button size="small">small</sv-button>
            <sv-button>default</sv-button>
            <sv-button size="large">large</sv-button>
            <sv-button color="lively" size="full">full</sv-button>
          </article>
          <article class="component-item-code">
            <sv-code>
              <sv-code-item code='<sv-button size="small">small</sv-button>'></sv-code-item>
              <sv-code-item code='<sv-button>default</sv-button>'></sv-code-item>
              <sv-code-item code='<sv-button size="large">large</sv-button>'></sv-code-item>
              <sv-code-item code='<sv-button color="lively" size="full">full</sv-button>'></sv-code-item>
            </sv-code>
          </article>
        </div>
      </div>

      <div class="component-item-content">
        <fieldset class="component-item-content-hgroup">
          <legend class="component-item-content-title">按钮类型</legend>
          <div class="component-item-content-subtitle">按钮类型有：outline。
            通过设置type为outline将按钮设置为仅含边框，不设置为默认（有背景色）。
          </div>
        </fieldset>
        <div class="component-item-content-main">
          <article class="component-item-preview">
            <sv-button type="outline" color="primary">Outline</sv-button>
          </article>
          <article class="component-item-code">
            <sv-code>
              <sv-code-item code='<sv-button type="outline" color="success">Outline</sv-button>'></sv-code-item>
            </sv-code>
          </article>
        </div>
      </div>

      <div class="component-item-content">
        <fieldset class="component-item-content-hgroup">
          <legend class="component-item-content-title">按钮形状</legend>
          <div class="component-item-content-subtitle">按钮形状有：圆角、直角、圆形。
            通过设置shape为line或者circle将按钮设置为直角按钮或圆形按钮，不设置为默认（圆角）。
          </div>
        </fieldset>
        <div class="component-item-content-main">
          <article class="component-item-preview">
            <sv-button shape="line" color="primary">Line</sv-button>
            <sv-button color="primary">Default</sv-button>
            <sv-button shape="circle" color="primary">Circle</sv-button>
          </article>
          <article class="component-item-code">
            <sv-code>
              <sv-code-item code='<sv-button shape="line" color="primary">Line</sv-button>'></sv-code-item>
              <sv-code-item code='<sv-button color="primary">Default</sv-button>'></sv-code-item>
              <sv-code-item code='<sv-button shape="circle" color="primary">Circle</sv-button>'></sv-code-item>
            </sv-code>
          </article>
        </div>
      </div>
    </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-header">-->
        <!--<h1 class="component-item-content-title">input 类型</h1>-->
        <!--</div>-->
        <div class="component-item-content-main api">
          <sv-tabs>
            <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-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: 'color',
              description: '颜色',
              type: 'string',
              optional: 'light,stable,primary,info,success,warning,danger,lively,royal',
              default: '-'
            },
            {
              name: 'size',
              description: '大小',
              type: 'string',
              optional: 'small,large,full',
              default: '-'
            },
            {
              name: 'type',
              description: '类型',
              type: 'string',
              optional: 'outline',
              default: '-'
            },
            {
              name: 'shape',
              description: '形状',
              type: 'string',
              optional: 'line,circle',
              default: '-'
            }
          ],
          slots: [],
          events: [
            {
              name: 'click',
              description: '点击按钮时触发'
            }
          ]
        }
      }
    }
  }
</script>

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