<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">InputNumber (数字输入框)</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">通过v-model绑定当前值，为数字类型</h2>
        <template slot="preview">
          <sv-button @click="showFullPage = true"></sv-button>
          <sv-full-page v-if="showFullPage">
            <sv-full-page-item>1</sv-full-page-item>
            <sv-full-page-item>2</sv-full-page-item>
          </sv-full-page>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-input-number v-model="value"></sv-input-number>'></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 no-header">
        <!--<div class="component-item-content-header">-->
          <!--<h1 class="component-item-content-title">Icon</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.props">
                <sv-table-column prop="name" title="名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="100"></sv-table-column>
                <sv-table-column prop="type" title="类型"></sv-table-column>
                <sv-table-column prop="optional" title="可选值" nowrap></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="事件名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="160"></sv-table-column>
                <sv-table-column prop="param" title="回调参数" width="300"></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 {
        showFullPage: false,
        apiData: {
          props: [
            {
              name: 'value',
              description: '输入框的值，通过v-model指定',
              type: 'number',
              optional: '-',
              default: '1'
            },
            {
              name: 'min',
              description: '最小值',
              type: 'number',
              optional: '-',
              default: '-Infinity'
            },
            {
              name: 'max',
              description: '最大值',
              type: 'number',
              optional: '-',
              default: 'Infinity'
            },
            {
              name: 'step',
              description: '步数，每次加减的步数，可以是小数',
              type: 'number',
              optional: '-',
              default: '1'
            },
            {
              name: 'size',
              description: '尺寸',
              type: 'string',
              optional: 'small, large',
              default: '-'
            },
            {
              name: 'disabled',
              description: '禁用状态',
              type: 'boolean',
              optional: 'true,false',
              default: 'false'
            },
            {
              name: 'readonly',
              description: '只读状态',
              type: 'boolean',
              optional: 'true,false',
              default: 'false'
            },
            {
              name: 'editable',
              description: '是否可编辑',
              type: 'boolean',
              optional: 'true,false',
              default: 'true'
            }
          ],
          slots: [],
          events: [
            {
              name: 'change',
              description: '值发生改变时触发',
              param: '当前值'
            },
            {
              name: 'plus',
              description: '点击加号时触发',
              param: '有两个参数，第一个是当前值，第二个是上一次的值'
            },
            {
              name: 'minus',
              description: '点击减号时触发',
              param: '有两个参数，第一个是当前值，第二个是上一次的值'
            }
          ]
        }
      }
    },
    methods: {
      handleChange (value) {
        console.log(value)
      },
      handleMinus (value, event) {
        console.log(value, event)
      }
    }
  }
</script>

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