<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">Badge (角标)</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">
        <fieldset class="component-item-content-hgroup">
          <legend class="component-item-content-title">角标颜色</legend>
          <div class="component-item-content-subtitle">通过设置color来改变角标颜色。颜色参见Color组件，不设置默认颜色为红色。</div>
        </fieldset>
        <div class="component-item-content-main">
          <article class="component-item-preview">
            <sv-badge>2</sv-badge>
            <sv-badge color="primary">2</sv-badge>
            <sv-badge color="stable">12</sv-badge>
            <sv-badge color="success">128</sv-badge>
          </article>
          <article class="component-item-code">
            <sv-code>
              <sv-code-item code='<sv-badge>2</sv-badge>'></sv-code-item>
              <sv-code-item code='<sv-badge color="primary">2</sv-badge>'></sv-code-item>
              <sv-code-item code='<sv-badge color="stable">12</sv-badge>'></sv-code-item>
              <sv-code-item code='<sv-badge color="success">128</sv-badge>'></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">通过设置width属性来改变角标宽度，例如width="100"。如果没有单位，则默认为px（像素）</div>
        </fieldset>
        <div class="component-item-content-main">
          <article class="component-item-preview">
            <sv-badge width="100">100px</sv-badge>
          </article>
          <article class="component-item-code">
            <sv-code>
              <sv-code-item code='<sv-badge width="100">100px</sv-badge>'></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">角标类型有：fill，outline。
            通过设置type为outline将角标设置为仅含边框，默认为fill。
          </div>
        </fieldset>
        <div class="component-item-content-main">
          <article class="component-item-preview">
            <sv-badge type="outline">3</sv-badge>
          </article>
          <article class="component-item-code">
            <sv-code>
              <sv-code-item code='<sv-badge type="outline">3</sv-badge>'></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">设置circle属性为true，角标将一直以圆形显示</div>
        </fieldset>
        <div class="component-item-content-main">
          <article class="component-item-preview">
            <sv-badge :circle="true">4</sv-badge>
            <sv-badge :circle="true">44</sv-badge>
            <sv-badge :circle="true">444</sv-badge>
          </article>
          <article class="component-item-code">
            <sv-code>
              <sv-code-item code='<sv-badge :circle="true">4</sv-badge>'></sv-code-item>
              <sv-code-item code='<sv-badge :circle="true">44</sv-badge>'></sv-code-item>
              <sv-code-item code='<sv-badge :circle="true">444</sv-badge>'></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、normal、large将按钮设置为小、中、大的尺寸，不设置为默认（中）尺寸。</div>
        </fieldset>
        <div class="component-item-content-main">
          <article class="component-item-preview">
            <sv-badge size="small">10</sv-badge>
            <sv-badge size="normal">10</sv-badge>
            <sv-badge size="large">10</sv-badge>
          </article>
          <article class="component-item-code">
            <sv-code>
              <sv-code-item code='<sv-badge size="small">10</sv-badge>'></sv-code-item>
              <sv-code-item code='<sv-badge size="normal">10</sv-badge>'></sv-code-item>
              <sv-code-item code='<sv-badge size="large">10</sv-badge>'></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-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>
</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: 'danger'
            },
            {
              name: 'size',
              description: '大小',
              type: 'string',
              optional: 'small,normal,large',
              default: 'normal'
            },
            {
              name: 'type',
              description: '类型',
              type: 'string',
              optional: 'outline,fill',
              default: 'fill'
            },
            {
              name: 'circle',
              description: '总是以圆形显示',
              type: 'boolean',
              optional: 'true,false',
              default: 'false'
            }
          ],
          slots: [
            {
              name: '-',
              description: '显示内容'
            }
          ],
          events: []
        }
      }
    }
  }
</script>

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