<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">Toast (提示)</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">
        <div class="component-item-content-main">
          <article class="component-item-code">
            <sv-code language="javascript">
              import {Toast} from 'sinoiov-ui'
              Vue.use(Toast)
            </sv-code>
          </article>
        </div>
      </div>
    </section>

    <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">直接给$toast方法传入字符串，即为显示的内容。当然该方法也可以传入一个对象，设置message属性，以传入显示的内容。</div>
        </fieldset>
        <div class="component-item-content-main">
          <article class="component-item-preview">
            <sv-button @click="openToast('双击返回键退出')">点击弹出Toast</sv-button>
          </article>
          <article class="component-item-code">
            <sv-code language="javascript">
              this.$toast('双击返回键退出')
            </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">在调用$toast时传入一个对象即可配置更多选项</div>
        </fieldset>
        <div class="component-item-content-main">
          <article class="component-item-preview">
            <sv-button @click="openToast({message: '检查网络连接', position: 'top', duration: 3000})">点击弹出Toast</sv-button>
          </article>
          <article class="component-item-code">
            <sv-code language="javascript">
              this.$toast({
                message: '检查网络连接',
                position: 'top',
                duration: 3000
              })
            </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-main api">
          <sv-tabs position="top" slidable>
            <sv-tab :value="0" title="Options">
              <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-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: {
          props: [
            {
              name: 'message',
              description: '内容',
              type: 'string',
              optional: '-',
              default: '-'
            },
            {
              name: 'position',
              description: '位置',
              type: 'string',
              optional: 'top,middle,bottom',
              default: 'middle'
            },
            {
              name: 'duration',
              description: '持续时间(单位为毫秒)',
              type: 'number',
              optional: '-',
              default: '2000'
            }
          ],
          slots: [],
          events: []
        }
      }
    },
    methods: {
      openToast (options) {
        this.$toast(options)
      }
    }
  }
</script>

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