<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">Countdown (倒计时)</h1>
      <h2 class="component-subtitle">倒计时常用于商品促销秒杀等功能</h2>
      <h3 class="component-notice">其他UI框架中很少有这个功能</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">通过end-time指定结束时间，该属性为必传属性。</h2>
        <template slot="preview">
         <sv-countdown end-time="2017-12-26 20:00:00"></sv-countdown>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-countdown end-time="2017-12-26 20:00:00"></sv-countdown>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>


      <sv-example>
        <h2 slot="title">格式化结果值</h2>
        <h2 slot="subtitle">当时间发生变化时，会触发change回调函数，参数默认为一个时分秒的数组。可以通过format属性来指定所希望的结果值，format取值只能为形如: 'hh时mm分ss秒'可以格式化的字符串</h2>
        <template slot="preview">
          <sv-countdown end-time="2017-12-26 20:00:00" format="hh-mm-ss" @change="handleChange">{{time}}</sv-countdown>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-countdown end-time="2017-12-26 20:00:00" format="hh-mm-ss" @change="handleChange">d{timed}</sv-countdown>'></sv-code-item>
          </sv-code>
<sv-code language="javascript">
  export default {
    data () {
      return {
        time: ''
      }
    },
    methods: {
      handleChange (time) {
        this.time = time
      }
    }
  }
</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-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="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.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="事件名称" 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>
    </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 {
        time: '',
        apiData: {
          props: [
            {
              name: 'end-time',
              description: '结束时间, 可以传入时间戳、日期对象或者可被格式化的日期字符串',
              type: 'number, date, string',
              optional: '-',
              default: '-'
            }
          ],
          slots: [
            {
              name: 'default',
              description: '显示的倒计时字符串'
            }
          ],
          events: [
            {
              name: 'change',
              description: '时间变化时触发',
              param: '默认为时分秒数组，如果指定了format属性，则参数为格式化后的字符串'
            }
          ]
        }
      }
    },
    methods: {
      handleChange (time) {
        this.time = time
      }
    }
  }
</script>

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