<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">Input (输入框)</h1>
      <h2 class="component-subtitle">基本表单组件，支持 input 和 textarea，并在原生控件基础上进行了功能扩展，可以组合使用</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">input 类型</h2>
        <h2 slot="subtitle">input 类型有：text(文本)、password(密码)、search(搜索)、integer(整数-包括负整数，正整数)、number(数字-包括整数和小数。小数保留两位有效数字)。
          通过type属性设置不同类型的输入框，不设置默认为text。</h2>
        <template slot="preview">
          <sv-input placeholder="type=text"></sv-input>
          <br/>
          <sv-input type="password" placeholder="type=password" clearable></sv-input>
          <br/>
          <sv-input type="search" placeholder="type=search"></sv-input>
          <br/>
          <sv-input type="integer" placeholder="type=integer"></sv-input>
          <br/>
          <sv-input type="number" placeholder="type=number"></sv-input>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-input placeholder="type=text"></sv-input>'></sv-code-item>
            <sv-code-item code='<sv-input type="password" placeholder="type=password" clearable></sv-input>'></sv-code-item>
            <sv-code-item code='<sv-input type="search" placeholder="type=search"></sv-input>'></sv-code-item>
            <sv-code-item code='<sv-input type="integer" placeholder="type=integer"></sv-input>'></sv-code-item>
            <sv-code-item code='<sv-input type="number" placeholder="type=number"></sv-input>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>


      <sv-example>
        <h2 slot="title">带单位的input</h2>
        <h2 slot="subtitle">通过指定unit属性，来显示一个带unit单位的input</h2>
        <template slot="preview">
          <sv-input placeholder="输入框带单位元" unit="元"></sv-input>
          <br/>
          <sv-input placeholder="输入框带单位千克" unit="千克"></sv-input>
          <br>
          <sv-input placeholder="单位太长超出的会被省略" unit="单位太长超出的会被省略"></sv-input>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-input placeholder="输入框带单位元" unit="元"></sv-input>'></sv-code-item>
            <sv-code-item code='<sv-input placeholder="输入框带单位千克" unit="千克"></sv-input>'></sv-code-item>
            <sv-code-item code='<sv-input placeholder="单位太长超出的会被省略" unit="单位太长超出的会被省略"></sv-input>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>


      <sv-example>
        <h2 slot="title">带有icon的input</h2>
        <h2 slot="subtitle">通过指定icon属性，来为input添加icon，默认加在左边。你还可以通过icon-position属性，设置值为right，将icon显示在右侧。icon的取值请查阅Icon组件</h2>
        <template slot="preview">
          <sv-input placeholder="icon=user，icon-position默认为left" icon="user" maxlength="10"></sv-input>
          <br/>
          <sv-input icon="password" icon-position="right" placeholder="icon=password，icon-position设置为right" ></sv-input>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-input icon="user" placeholder="icon=user，icon-position默认为left"></sv-input>'></sv-code-item>
            <sv-code-item code='<sv-input icon="password" icon-position="right" placeholder="icon=password，icon-position设置为right" ></sv-input>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">只读或禁用</h2>
        <h2 slot="subtitle">只读和禁用的相同之处是：1.只能查看不能输入或修改；2.不会弹出键盘。区别在于两个方面：1.外观 禁用为灰色背景；2.事件 只读时可以绑定事件，禁用时所有事件失效。</h2>
        <template slot="preview">
          <sv-input placeholder="只读" readonly></sv-input>
          <br>
          <sv-input placeholder="禁用" disabled></sv-input>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-input placeholder="只读" readonly></sv-input>'></sv-code-item>
            <sv-code-item code='<sv-input placeholder="禁用" disabled></sv-input>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">文本域</h2>
        <h2 slot="subtitle">可以通过rows属性指定行数，默认为1。rows应为大于0的整数</h2>
        <template slot="preview">
          <sv-input type="textarea" placeholder="默认显示一行"></sv-input>
          <br>
          <sv-input type="textarea" rows="4" placeholder="通过rows属性指定行数，rows=4"></sv-input>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-input type="textarea" placeholder="默认显示一行"></sv-input>'></sv-code-item>
            <sv-code-item code='<sv-input type="textarea" rows="4" placeholder="通过rows属性指定行数，rows=4"></sv-input>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">自适应文本高度的文本域</h2>
        <h2 slot="subtitle">设置属性 autosize，文本域会自动适应高度的变化。autosize也可以设定为一个对象，指定最小行数和最大行数</h2>
        <template slot="preview">
          <sv-input type="textarea" :autosize="true" placeholder="自适应高度"></sv-input>
          <br>
          <sv-input type="textarea" :autosize="{minRows: 3, maxRows: 5}" placeholder="自适应高度，但最小3行，最大5行"></sv-input>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-input type="textarea" placeholder="默认显示一行"></sv-input>'></sv-code-item>
            <sv-code-item code='<sv-input type="textarea" rows="4" placeholder="通过rows属性指定行数，rows=4"></sv-input>'></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" stripe slidable>
            <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="200"></sv-table-column>
                <sv-table-column prop="type" title="类型" width="100"></sv-table-column>
                <sv-table-column prop="optional" title="可选值" width="200"></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-column prop="param" 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: 'type',
              description: '类型',
              type: 'string',
              optional: 'text,password,integer,number,email,url,tel,date,datetime,search,textarea',
              default: 'text'
            },
            {
              name: 'value',
              description: '输入框的值',
              type: 'string，number',
              optional: '-',
              default: '-'
            },
            {
              name: 'placeholder',
              description: '输入框占位文本',
              type: 'string',
              optional: '-',
              default: '-'
            },
            {
              name: 'maxlength',
              description: '输入框文本最大字符数',
              type: 'string,number',
              optional: '-',
              default: '-'
            },
            {
              name: 'icon',
              description: '图标',
              type: 'string',
              optional: 'user,password等，具体参见icon组件',
              default: '-'
            },
            {
              name: 'icon-position',
              description: 'icon位置，仅在含有icon时有效',
              type: 'string',
              optional: 'left,right',
              default: 'left'
            },
            {
              name: 'unit',
              description: '给输入框右侧添加单位,值即为单位',
              type: 'string',
              optional: '-',
              default: '-'
            },
            {
              name: 'clearable',
              description: '添加清除按钮，点击可以快速删除输入框文本',
              type: 'boolean',
              optional: 'true,false',
              default: 'false'
            },
            {
              name: 'readonly',
              description: '输入框是否只读',
              type: 'boolean',
              optional: 'true,false',
              default: 'false'
            },
            {
              name: 'disabled',
              description: '是否禁用文本框',
              type: 'boolean',
              optional: 'true,false',
              default: 'false'
            },
            {
              name: 'toggle-visible',
              description: '是否对密码做明文与密文之间的动态切换，UI表现为右侧会有一个小眼睛。该属性仅对type="password"的文本框有效',
              type: 'boolean',
              optional: 'true,false',
              default: 'false'
            },
            {
              name: 'rows',
              description: '文本域默认行数，仅在 textarea 类型下有效',
              type: 'number',
              optional: '-',
              default: '1'
            },
            {
              name: 'autosize',
              description: '自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }',
              type: 'boolean,object',
              optional: 'false,true,object',
              default: 'false'
            }
          ],
          slots: [],
          events: [
            {
              name: 'input',
              description: '输入内容时触发',
              param: '输入的内容'
            },
            {
              name: 'click',
              description: '输入框被点击时触发',
              param: '输入的内容'
            },
            {
              name: 'search',
              description: '用户点击了手机键盘的搜索键时触发，该事件只在type=search类型的输入框时有效',
              param: '输入的内容'
            }
          ]
        }
      }
    }
  }
</script>

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