<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">ButtonGroup (按钮组)</h1>
      <h2 class="component-subtitle">按钮组是常见的web组件，ButtonGroup需要和Button组件配合使用</h2>
      <h3 class="component-notice">基本用法和Button组件相同</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">
          <sv-button-group>
            <sv-button>左手</sv-button>
            <sv-button>猪手</sv-button>
            <sv-button>右手</sv-button>
          </sv-button-group>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-button-group>'></sv-code-item>
            <sv-code-item code='<sv-button>左手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>猪手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>右手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-button-group>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">不同颜色</h2>
        <h2 slot="subtitle">通过color属性为按钮设置颜色，取值和Button组件完全一样</h2>
        <template slot="preview">
          <sv-button-group color="danger">
            <sv-button>左手</sv-button>
            <sv-button>猪手</sv-button>
            <sv-button>右手</sv-button>
          </sv-button-group>
          <sv-button-group color="primary">
            <sv-button>左手</sv-button>
            <sv-button>猪手</sv-button>
            <sv-button>右手</sv-button>
          </sv-button-group>
          <sv-button-group color="success">
            <sv-button>左手</sv-button>
            <sv-button>猪手</sv-button>
            <sv-button>右手</sv-button>
          </sv-button-group>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-button-group color="danger">'></sv-code-item>
            <sv-code-item code='<sv-button>左手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>猪手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>右手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-button-group>'></sv-code-item>
          </sv-code>
          <sv-code>
            <sv-code-item code='<sv-button-group color="primary">'></sv-code-item>
            <sv-code-item code='<sv-button>左手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>猪手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>右手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-button-group>'></sv-code-item>
          </sv-code>
          <sv-code>
            <sv-code-item code='<sv-button-group color="success">'></sv-code-item>
            <sv-code-item code='<sv-button>左手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>猪手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>右手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-button-group>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">不同尺寸</h2>
        <h2 slot="subtitle">通过size属性设置按钮大小，有small,default(或者不写),large三种取值，default</h2>
        <template slot="preview">
          <sv-button-group size="small">
            <sv-button>左手</sv-button>
            <sv-button>猪手</sv-button>
            <sv-button>右手</sv-button>
          </sv-button-group>
          <sv-button-group size="default">
            <sv-button>左手</sv-button>
            <sv-button>猪手</sv-button>
            <sv-button>右手</sv-button>
          </sv-button-group>
          <sv-button-group size="large">
            <sv-button>左手</sv-button>
            <sv-button>猪手</sv-button>
            <sv-button>右手</sv-button>
          </sv-button-group>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-button-group size="small">'></sv-code-item>
            <sv-code-item code='<sv-button>左手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>猪手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>右手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-button-group>'></sv-code-item>
          </sv-code>
          <sv-code>
            <sv-code-item code='<sv-button-group size="default">'></sv-code-item>
            <sv-code-item code='<sv-button>左手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>猪手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>右手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-button-group>'></sv-code-item>
          </sv-code>
          <sv-code>
            <sv-code-item code='<sv-button-group size="large">'></sv-code-item>
            <sv-code-item code='<sv-button>左手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>猪手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>右手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-button-group>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">圆角样式</h2>
        <h2 slot="subtitle">设置shape属性为circle，可以显示一个圆角样式的button group，shape属性只有一个circle取值</h2>
        <template slot="preview">
          <sv-button-group shape="circle" color="info">
            <sv-button>左手</sv-button>
            <sv-button>猪手</sv-button>
            <sv-button>右手</sv-button>
          </sv-button-group>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-button-group shape="circle" color="info">'></sv-code-item>
            <sv-code-item code='<sv-button>左手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>猪手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>右手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-button-group>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">高亮效果</h2>
        <h2 slot="subtitle">设置highlight属性值为true，被点击的按钮就会高亮显示</h2>
        <template slot="preview">
          <sv-button-group color="info" :highlight="true">
            <sv-button>左手</sv-button>
            <sv-button>猪手</sv-button>
            <sv-button>右手</sv-button>
          </sv-button-group>
          <sv-button-group color="royal" :highlight="true">
            <sv-button>左手</sv-button>
            <sv-button>猪手</sv-button>
            <sv-button>右手</sv-button>
          </sv-button-group>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-button-group color="info" :highlight="true">'></sv-code-item>
            <sv-code-item code='<sv-button>左手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>猪手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>右手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-button-group>'></sv-code-item>
          </sv-code>
          <sv-code>
            <sv-code-item code='<sv-button-group color="royal" :highlight="true">'></sv-code-item>
            <sv-code-item code='<sv-button>左手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>猪手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-button>右手</sv-button>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-button-group>'></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-header">-->
        <!--<h1 class="component-item-content-title">input 类型</h1>-->
        <!--</div>-->
        <div class="component-item-content-main api">
          <sv-tabs position="top">
            <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="260"></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: '参见Button组件',
              default: 'light'
            },
            {
              name: 'size',
              description: '大小',
              type: 'string',
              optional: 'small,large,default或者不写',
              default: 'default'
            },
            {
              name: 'shape',
              description: '形状',
              type: 'string',
              optional: 'circle',
              default: '-'
            },
            {
              name: 'highlight',
              description: '是否高亮显示当前被点击的按钮',
              type: 'boolean',
              optional: 'false,true',
              default: 'false'
            }
          ],
          slots: [],
          events: [
            {
              name: 'click',
              description: '点击按钮时的回调，回调参数为当前被点击按钮的索引'
            }
          ]
        }
      }
    }
  }
</script>

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