<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">Switch (开关)</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">绑定boolean值</h2>
        <h2 slot="subtitle">通过v-model绑定组件值</h2>
        <template slot="preview">
          <sv-switch v-model="switchValue1"></sv-switch>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-switch v-model="switchValue"></sv-switch>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">颜色</h2>
        <h2 slot="subtitle">color属性支持官方内置的所有颜色</h2>
        <template slot="preview">
          <sv-switch v-model="switchValue2" color="danger"></sv-switch>
          <sv-switch v-model="switchValue3" color="info"></sv-switch>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-switch v-model="switchValue" color="danger"></sv-switch>'></sv-code-item>
            <sv-code-item code='<sv-switch v-model="switchValue" color="info"></sv-switch>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">尺寸</h2>
        <h2 slot="subtitle">small、default、large三个尺寸。默认为default或不写。使用size属性进行设置</h2>
        <template slot="preview">
          <sv-switch v-model="switchValue4" size="small"></sv-switch>
          <sv-switch v-model="switchValue5"></sv-switch>
          <sv-switch v-model="switchValue6" size="large"></sv-switch>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-switch v-model="switchValue" size="small"></sv-switch>'></sv-code-item>
            <sv-code-item code='<sv-switch v-model="switchValue"></sv-switch>'></sv-code-item>
            <sv-code-item code='<sv-switch v-model="switchValue" size="large"></sv-switch>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">文字和图标</h2>
        <h2 slot="subtitle">自定义内容，建议如果使用2个汉字，将开关尺寸设置为large</h2>
        <template slot="preview">
          <sv-switch v-model="switchValue7">
            <span slot="on">开</span>
            <span slot="off">关</span>
          </sv-switch>
          <sv-switch v-model="switchValue8" size="large">
            <span slot="on">开启</span>
            <span slot="off">关闭</span>
          </sv-switch>
          <sv-switch v-model="switchValue9">
            <sv-icon icon="check" slot="on" color="light"></sv-icon>
            <sv-icon icon="close" slot="off"></sv-icon>
          </sv-switch>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-switch v-model="switchValue">'></sv-code-item>
            <sv-code-item code='<span slot="on">开</span>' :level="2"></sv-code-item>
            <sv-code-item code='<span slot="off">关</span>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-switch>'></sv-code-item>
          </sv-code>
          <sv-code>
            <sv-code-item code='<sv-switch v-model="switchValue" size="large">'></sv-code-item>
            <sv-code-item code='<span slot="on">开启</span>' :level="2"></sv-code-item>
            <sv-code-item code='<span slot="off">关闭</span>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-switch>'></sv-code-item>
          </sv-code>
          <sv-code>
            <sv-code-item code='<sv-switch v-model="switchValue">'></sv-code-item>
            <sv-code-item code='<sv-icon icon="check" slot="on" color="light"></sv-icon>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-icon icon="close" slot="off"></sv-icon>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-switch>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">不可用</h2>
        <h2 slot="subtitle">禁用开关</h2>
        <template slot="preview">
          <sv-switch disabled></sv-switch>
          <sv-switch v-model="switchValue10" disabled></sv-switch>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-switch disabled></sv-switch>'></sv-code-item>
            <sv-code-item code='<sv-switch v-model="switchValue" disabled></sv-switch>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">监听change</h2>
        <h2 slot="subtitle">监听开关状态的改变来处理业务逻辑</h2>
        <template slot="preview">
          <sv-switch v-model="switchValue1" @change="handleChange"></sv-switch>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-switch v-model="switchValue" @change="handleChange"></sv-switch>'></sv-code-item>
          </sv-code>
<sv-code language="javascript">
export default {
  data () {
    return {
      switchValue: false
    }
  },
  methods: {
    handleChange (check) {
      this.$toast({
        message: check ? 'ON' : 'OFF',
        duration: 500
      })
    }
  }
}
</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="80"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="140"></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="名称" width="30"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="100"></sv-table-column>
              </sv-table>
            </sv-tab>
            <sv-tab :value="2" title="Events">
              <sv-table :data="apiData.events">
                <sv-table-column prop="name" title="事件名称" width="80"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="200"></sv-table-column>
                <sv-table-column prop="param" title="回调参数" width="120"></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 {
        switchValue1: false,
        switchValue2: true,
        switchValue3: true,
        switchValue4: false,
        switchValue5: false,
        switchValue6: false,
        switchValue7: false,
        switchValue8: false,
        switchValue9: false,
        switchValue10: true,
        apiData: {
          props: [
            {
              name: 'value',
              description: '通过v-model绑定，控制开关的boolean变量值',
              type: 'Boolean',
              optional: 'true,false',
              default: 'false'
            },
            {
              name: 'size',
              description: '开关的尺寸',
              type: 'string',
              optional: 'small,default(或者不写),large',
              default: 'default'
            },
            {
              name: 'color',
              description: '开关的颜色',
              type: 'string',
              optional: '参见Color组件',
              default: '-'
            }
          ],
          slots: [
            {
              name: 'on',
              description: '自定义显示打开时的内容'
            },
            {
              name: 'off',
              description: '自定义显示关闭时的内容'
            }
          ],
          events: [
            {
              name: 'change',
              description: '开关变化时触发，返回当前的状态',
              param: 'true | false'
            }
          ]
        }
      }
    },
    methods: {
      handleChange (check) {
        this.$toast({
          message: check ? 'ON' : 'OFF',
          duration: 500
        })
      }
    }
  }
</script>

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