<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">Form </h1>
      <h2 class="component-subtitle">表单</h2>
      <h3 class="component-notice">多个item的组合，和FormItem组件以及FormGroup组件配合使用</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">FormItem组件通过label属性指定label</h2>
        <template slot="preview">
          <sv-form>
            <sv-form-item label="用户名">
              <sv-input placeholder="请输入用户名"></sv-input>
            </sv-form-item>
            <sv-form-item label="密码">
              <sv-input type="password" placeholder="请输入密码"></sv-input>
            </sv-form-item>
          </sv-form>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-form>'></sv-code-item>

            <sv-code-item code='<sv-form-item label="用户名">' :level="2"></sv-code-item>
            <sv-code-item code='<sv-input placeholder="请输入用户名"></sv-input>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-form-item>' :level="2"></sv-code-item>

            <sv-code-item code='<sv-form-item label="密码">' :level="2"></sv-code-item>
            <sv-code-item code='<sv-input type="password" placeholder="请输入密码"></sv-input>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-form-item>' :level="2"></sv-code-item>

            <sv-code-item code='</sv-form>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">label基本设置</h2>
        <h2 slot="subtitle">Form组件label-width指定label宽度，当label字数不统一时，可以使右侧的表单控件对齐。同时可以指定label的对齐方式，label-align默认为left，其他两个取值为center和right</h2>
        <template slot="preview">
          <sv-form label-width="120">
            <sv-form-item label="用户名">
              <sv-input placeholder="请输入用户名"></sv-input>
            </sv-form-item>
            <sv-form-item label="密码">
              <sv-input placeholder="请输入密码"></sv-input>
            </sv-form-item>
            <sv-form-item label="确认密码">
              <sv-input placeholder="请再次输入密码"></sv-input>
            </sv-form-item>
          </sv-form>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-form label-width="120">'></sv-code-item>

            <sv-code-item code='<sv-form-item label="用户名">' :level="2"></sv-code-item>
            <sv-code-item code='<sv-input placeholder="请输入用户名"></sv-input>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-form-item>' :level="2"></sv-code-item>

            <sv-code-item code='<sv-form-item label="密码">' :level="2"></sv-code-item>
            <sv-code-item code='<sv-input type="password" placeholder="请输入密码"></sv-input>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-form-item>' :level="2"></sv-code-item>

            <sv-code-item code='<sv-form-item label="确认密码">' :level="2"></sv-code-item>
            <sv-code-item code='<sv-input type="password" placeholder="请再次输入密码"></sv-input>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-form-item>' :level="2"></sv-code-item>

            <sv-code-item code='</sv-form>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>
      <sv-example>
        <h2 slot="title">label字体颜色</h2>
        <h2 slot="subtitle">Form组件和FormItem组价均可使用label-color定义label的颜色，FormItem优先级高于Form，值可以是官方内设的颜色值，也可以是合法的任何css颜色值。默认值为#333。</h2>
        <template slot="preview">
          <sv-form label-color="success">
            <sv-form-item label="姓名">
              <sv-input placeholder="请输入姓名"></sv-input>
            </sv-form-item>
            <sv-form-item label="密码" label-color="danger">
              <sv-input placeholder="请输入密码"></sv-input>
            </sv-form-item>
            <sv-form-item label="性别" label-color="info">
              <sv-radio-group>
                <sv-radio>男</sv-radio>
                <sv-radio>女</sv-radio>
              </sv-radio-group>
            </sv-form-item>
          </sv-form>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-form label-color="success">'></sv-code-item>

            <sv-code-item code='<sv-form-item label="用户名">' :level="2"></sv-code-item>
            <sv-code-item code='<sv-input placeholder="请输入用户名"></sv-input>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-form-item>' :level="2"></sv-code-item>

            <sv-code-item code='<sv-form-item label="密码" label-color="danger">' :level="2"></sv-code-item>
            <sv-code-item code='<sv-input type="password" placeholder="请输入密码"></sv-input>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-form-item>' :level="2"></sv-code-item>

            <sv-code-item code='<sv-form-item label="性别" label-color="info">' :level="2"></sv-code-item>
            <sv-code-item code='<sv-radio-group>' :level="3"></sv-code-item>
            <sv-code-item code='<sv-radio>男</sv-radio>' :level="4"></sv-code-item>
            <sv-code-item code='<sv-radio>女</sv-radio>' :level="4"></sv-code-item>
            <sv-code-item code='</sv-radio-group>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-form-item>' :level="2"></sv-code-item>

            <sv-code-item code='</sv-form>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">表单分组</h2>
        <h2 slot="subtitle">FormGroup组件可以对表单进行分组</h2>
        <template slot="preview">
          <sv-form style="background: #f2f2f2;">
            <sv-form-group>
              <sv-form-item label="姓名">
                <sv-input placeholder="请输入姓名"></sv-input>
              </sv-form-item>
              <sv-form-item label="密码">
                <sv-input placeholder="请输入密码"></sv-input>
              </sv-form-item>
            </sv-form-group>

            <sv-form-group>
              <sv-form-item label="地址">
                <sv-input placeholder="请输入地址"></sv-input>
              </sv-form-item>
              <sv-form-item label="电话">
                <sv-input placeholder="请输入电话"></sv-input>
              </sv-form-item>
            </sv-form-group>
          </sv-form>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-form label-width="120">'></sv-code-item>

            <sv-code-item code='<sv-form-group>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-form-item label="用户名">' :level="3"></sv-code-item>
            <sv-code-item code='<sv-input placeholder="请输入用户名"></sv-input>' :level="4"></sv-code-item>
            <sv-code-item code='</sv-form-item>' :level="3"></sv-code-item>

            <sv-code-item code='<sv-form-item label="密码">' :level="3"></sv-code-item>
            <sv-code-item code='<sv-input type="password" placeholder="请输入密码"></sv-input>' :level="4"></sv-code-item>
            <sv-code-item code='</sv-form-item>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-form-group>' :level="2"></sv-code-item>

            <sv-code-item code='<sv-form-group>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-form-item label="地址">' :level="3"></sv-code-item>
            <sv-code-item code='<sv-input placeholder="请输入地址"></sv-input>' :level="4"></sv-code-item>
            <sv-code-item code='</sv-form-item>' :level="3"></sv-code-item>

            <sv-code-item code='<sv-form-item label="电话">' :level="3"></sv-code-item>
            <sv-code-item code='<sv-input type="password" placeholder="请输入电话"></sv-input>' :level="4"></sv-code-item>
            <sv-code-item code='</sv-form-item>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-form-group>' :level="2"></sv-code-item>

            <sv-code-item code='</sv-form>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">堆叠样式的label</h2>
        <h2 slot="subtitle">label-type设置为stack时，可以显示一个堆叠的label。样式表现为label在上，表单控件在下。该属性在Form组件和FormItem组件上均可使用，FormItem优先级高于Form。label-type有两种取值：inline、stack，默认为inline或者不写。</h2>
        <template slot="preview">
          <sv-form label-type="stack">
            <sv-form-item label="姓名">
              <sv-input placeholder="请输入姓名"></sv-input>
            </sv-form-item>
            <sv-form-item label="密码" label-type="inline">
              <sv-input placeholder="请输入密码"></sv-input>
            </sv-form-item>
          </sv-form>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-form label-type="stack">'></sv-code-item>

            <sv-code-item code='<sv-form-item label="用户名">' :level="2"></sv-code-item>
            <sv-code-item code='<sv-input placeholder="请输入用户名"></sv-input>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-form-item>' :level="2"></sv-code-item>

            <sv-code-item code='<sv-form-item label="密码" label-type="inline">' :level="2"></sv-code-item>
            <sv-code-item code='<sv-input type="password" placeholder="请输入密码"></sv-input>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-form-item>' :level="2"></sv-code-item>

            <sv-code-item code='</sv-form>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">表单控件显示在一行</h2>
        <h2 slot="subtitle">添加inline属性，可以让表单控件显示在一行，每个控件均分宽度。适用于填写座机号码时分开填写区号和号码的情况，或者填写姓名时分开填写姓和名的情况等等。</h2>
        <template slot="preview">
          <sv-form label-width="120">
            <sv-form-item label="姓名" inline>
              <sv-input placeholder="请输入姓"></sv-input>
              <sv-input placeholder="请输入名"></sv-input>
            </sv-form-item>
            <sv-form-item label="座机号码" inline>
              <sv-input placeholder="请输入区号"></sv-input>
              <sv-input placeholder="请输入号码"></sv-input>
            </sv-form-item>
          </sv-form>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-form label-width="120">'></sv-code-item>

            <sv-code-item code='<sv-form-item label="姓名" inline>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-input placeholder="请输入姓"></sv-input>' :level="3"></sv-code-item>
            <sv-code-item code='<sv-input placeholder="请输入名"></sv-input>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-form-item>' :level="2"></sv-code-item>

            <sv-code-item code='<sv-form-item label="密码" inline>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-input placeholder="请输入区号"></sv-input>' :level="3"></sv-code-item>
            <sv-code-item code='<sv-input placeholder="请输入号码"></sv-input>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-form-item>' :level="2"></sv-code-item>

            <sv-code-item code='</sv-form>'></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">
        <div class="component-item-content-header">
          <h1 class="component-item-content-title">Form</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.form.props">
                <sv-table-column prop="name" title="名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="200"></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.form.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.form.events">
                <sv-table-column prop="name" title="事件名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="200"></sv-table-column>
                <sv-table-column prop="param" title="回调参数" width="300"></sv-table-column>
              </sv-table>
            </sv-tab>
          </sv-tabs>
        </div>
      </div>
      <div class="component-item-content">
        <div class="component-item-content-header">
          <h1 class="component-item-content-title">FormGroup</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.formGroup.props">
                <sv-table-column prop="name" title="名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="300"></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.formGroup.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-tab>
          </sv-tabs>
        </div>
      </div>
      <div class="component-item-content">
        <div class="component-item-content-header">
          <h1 class="component-item-content-title">FormItem</h1>
          <h1 class="component-item-content-subtitle">与Form组件相同的属性其优先级均高于Form组件</h1>
        </div>
        <div class="component-item-content-main api">
          <sv-tabs stripe position="top">
            <sv-tab :value="0" title="Props">
              <sv-table :data="apiData.formItem.props">
                <sv-table-column prop="name" title="名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="300"></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.formItem.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-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: {
          form: {
            props: [
              {
                name: 'label-width',
                description: 'label宽度',
                type: 'String，Number',
                optional: '-',
                default: '-'
              },
              // {
              //   name: 'label-align',
              //   description: 'label文字对齐方式',
              //   type: 'String',
              //   optional: 'left,center,right',
              //   default: 'left'
              // },
              {
                name: 'label-color',
                description: 'label文字颜色',
                type: 'String',
                optional: '官方内置颜色字符串，或所有css合法的颜色值',
                default: '#333'
              },
              {
                name: 'label-type',
                description: 'label位置，默认label和表单控件在一行。可以设置stack使得两者位于两行。',
                type: 'String',
                optional: 'inline(或者不写),stack',
                default: 'inline'
              }
            ],
            slots: [
             // {
             //   name: '-',
             //   description: '-'
             // }
            ],
            events: [
              // {
              //   name: '',
              //   description: '',
              //   param: ''
              // }
            ]
          },
          formGroup: {
            props: [
              // {
              //   name: '',
              //   description: '',
              //   type: '',
              //   optional: '',
              //   default: ''
              // }
            ],
            slots: [
              // {
              //   name: '',
              //   description: ''
              // }
            ],
            events: [
              // {
              //   name: '',
              //   description: '',
              //   param: ''
              // }
            ]
          },
          formItem: {
            props: [
              {
                name: 'label',
                description: 'label文字',
                type: 'String',
                optional: '-',
                default: '-'
              },
              {
                name: 'label-width',
                description: 'label宽度',
                type: 'String，Number',
                optional: '-',
                default: '-'
              },
              {
                name: 'label-color',
                description: 'label文字颜色',
                type: 'String',
                optional: '官方内置颜色字符串，或所有css合法的颜色值',
                default: '#333'
              },
              {
                name: 'label-type',
                description: 'label位置，默认label和表单控件在一行。可以设置stack使得两者位于两行。',
                type: 'String',
                optional: 'inline(或者不写),stack',
                default: 'inline'
              },
              {
                name: 'isLink',
                description: '右侧会显示一个箭头，表示此项可以点击',
                type: 'Boolean',
                optional: 'true,false',
                default: 'false'
              },
              {
                name: 'hideLabel',
                description: '是否隐藏label',
                type: 'Boolean',
                optional: 'true,false',
                default: 'false'
              },
              {
                name: 'noBorder',
                description: '是否不显示border',
                type: 'Boolean',
                optional: 'true,false',
                default: 'false'
              },
              {
                name: 'inline',
                description: '表单控件是否在同一行显示',
                type: 'Boolean',
                optional: 'true,false',
                default: 'false'
              }
            ],
            slots: [
              {
                name: 'default',
                description: 'default'
              },
              {
                name: 'label',
                description: 'label'
              }
            ],
            events: [
              {
                name: '',
                description: '',
                param: ''
              }
            ]
          }
        }
      }
    },
    methods: {
      handleChange (selectedCount) {
        this.$toast({
          position: 'bottom',
          message: `你选择的星级为${selectedCount}`,
          duration: 600
        })
      }
    }
  }
</script>

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