<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">DatetimePicker</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 {DatetimePicker} from 'sinoiov-ui'
Vue.component(DatetimePicker)
</sv-code>
          </article>
        </div>
      </div>
    </section>

    <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">默认为DatetimePicker，包括年月日时分</h2>
        <template slot="preview">
          <sv-button color="primary" @click="openDatetimePicker(1)">点击弹出Datetime Picker</sv-button>
          <sv-datetime-picker @confirm="handleConfirm" ref="datetimePickerRef1"></sv-datetime-picker>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-datetime-picker @confirm="handleConfirm" ref="datetimePickerRef1"></sv-datetime-picker>'></sv-code-item>
          </sv-code>
<sv-code language="javascript">
  export default {
    methods: {
      openDatetimePicker () {
        this.$refs.datetimePickerRef1.open()
      },
      handleConfirm (value) {
        this.$toast(value)
      }
    }
  }
</sv-code>
        </template>
      </sv-example>
      <sv-example>
        <h2 slot="title">不同的显示类型</h2>
        <h2 slot="subtitle">通过type属性指定类型，可选值有：datetime,date,time。默认为datetime</h2>
        <template slot="preview">
          <sv-button color="primary" @click="openDatetimePicker(2)">点击弹出Date Picker</sv-button>
          <p>&nbsp;</p>
          <sv-button color="primary" @click="openDatetimePicker(3)">点击弹出Time Picker</sv-button>
          <sv-datetime-picker
            type="date"
            ref="datetimePickerRef2">
          </sv-datetime-picker>
          <sv-datetime-picker
            type="time"
            ref="datetimePickerRef3">
          </sv-datetime-picker>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-datetime-picker type="date" ref="datetimePickerRef2"></sv-datetime-picker>'></sv-code-item>
            <sv-code-item code='<sv-datetime-picker type="time" ref="datetimePickerRef3"></sv-datetime-picker>'></sv-code-item>
          </sv-code>
          <sv-code language="javascript">
            export default {
            methods: {
            openDatePicker () {
            this.$refs.datetimePickerRef2.open()
            },
            openTimePicker () {
            this.$refs.datetimePickerRef3.open()
            }
            }
            }
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">自定义格式</h2>
        <h2 slot="subtitle">默认的结果值为Date对象，可以通过format属性指定格式化字符串，形如：'yyyy-MM-dd hh:mm'或'yyyy/MM/dd'等</h2>
        <template slot="preview">
          <sv-button color="primary" @click="openDatetimePicker(4)">自定义格式 yyyy-MM-dd hh:mm</sv-button>
          <p>&nbsp;</p>
          <sv-button color="primary" @click="openDatetimePicker(5)">自定义格式 yyyy年MM月dd日</sv-button>
          <sv-datetime-picker
            @confirm="handleConfirm"
            format="yyyy-MM-dd hh:mm"
            ref="datetimePickerRef4">
          </sv-datetime-picker>
          <sv-datetime-picker
            type="date"
            @confirm="handleConfirm"
            format="yyyy年MM月dd日"
            ref="datetimePickerRef5">
          </sv-datetime-picker>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-datetime-picker format="yyyy-MM-dd hh:mm" @confirm="handleConfirm" ref="datetimePickerRef4"></sv-datetime-picker>'></sv-code-item>
            <sv-code-item code='<sv-datetime-picker type="date" format="yyyy年MM月dd日" @confirm="handleConfirm" ref="datetimePickerRef5"></sv-datetime-picker>'></sv-code-item>
          </sv-code>
          <sv-code language="javascript">
            export default {
            methods: {
            openDatetimePicker () {
            this.$refs.datetimePickerRef4.open()
            },
            openDatePicker () {
            this.$refs.datetimePickerRef5.open()
            },
            handleConfirm (value) {
            this.$toast(value)
            }
            }
            }
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">限定显示范围</h2>
        <h2 slot="subtitle">年份默认的范围为当前年份的前后10年，其他没有限定。需要时可以通过min-year和max-year来限定年份</h2>
        <template slot="preview">
          <sv-button color="primary" @click="openDatetimePicker(6)">限定年份的显示范围</sv-button>
          <sv-datetime-picker
            :min-year="2016"
            :max-year="2020"
            @confirm="handleConfirm"
            ref="datetimePickerRef6">
          </sv-datetime-picker>
          </sv-datetime-picker>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-datetime-picker :min-year="2016" :max-year="2000" @confirm="handleConfirm" ref="datetimePickerRef">'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">双向绑定</h2>
        <h2 slot="subtitle">通过v-model来指定默认值和获取值。指定时可以通过数组或具有日期格式的字符串来指定默认值，如果默认值为空，则默认选中当前日期；获取值时会按照format属性指定的格式返回，如果没有指定format则返回一个Date对象</h2>
        <template slot="preview">
          <sv-button color="primary" @click="openDatetimePicker(7)">数组形式</sv-button>
          <sv-button color="primary" @click="openDatetimePicker(8)">字符串形式</sv-button>
          <sv-datetime-picker ref="datetimePickerRef7" v-model="dateValue1"></sv-datetime-picker>
          <sv-datetime-picker ref="datetimePickerRef8" v-model="dateValue2"></sv-datetime-picker>
        </template>
        <template slot="code">
          <sv-code language="html">
            <sv-code-item code='<sv-datetime-picker :min-year="2016" :max-year="2000" @confirm="handleConfirm" ref="datetimePickerRef">'></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-main api">
          <sv-tabs stripe slidable position="top">
            <sv-tab :value="0" title="Props">
              <sv-table :data="apiData.props">
                <sv-table-column prop="name" title="名称" width="130"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="150"></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">
  export default {
    data () {
      return {
        dateValue1: [2018, 8, 10, 3, 10],
        dateValue2: '2018-8-8 8:8',
        apiData: {
          props: [
            {
              name: 'value',
              description: '设置默认值和获取选择的值，通过v-model指定',
              type: 'string',
              optional: '',
              default: ''
            },
            {
              name: 'format-year',
              description: '格式化年',
              type: 'string',
              optional: '',
              default: 'yyyy'
            },
            {
              name: 'format-month',
              description: '格式化月',
              type: 'string',
              optional: '',
              default: 'MM'
            },
            {
              name: 'format-date',
              description: '格式化日',
              type: 'string',
              optional: '',
              default: 'dd'
            },
            {
              name: 'format-hour',
              description: '格式化小时',
              type: 'string',
              optional: '',
              default: 'hh'
            },
            {
              name: 'format-minute',
              description: '格式化分钟',
              type: 'string',
              optional: '',
              default: 'mm'
            },
            {
              name: 'format',
              description: '格式化选择后的结果值，格式必须形如：yyyy-MM-dd hh:mm',
              type: 'string',
              optional: '',
              default: '日期对象'
            },
            {
              name: 'min-year',
              description: '最小年份',
              type: 'number',
              optional: '',
              default: '10年前'
            },
            {
              name: 'max-year',
              description: '最大年份',
              type: 'number',
              optional: '',
              default: '10年后'
            },
            {
              name: 'min-month',
              description: '最小月份',
              type: 'number',
              optional: '',
              default: ''
            },
            {
              name: 'max-month',
              description: '最大月份',
              type: 'number',
              optional: '',
              default: ''
            },
            {
              name: 'min-date',
              description: '最小日期',
              type: 'number',
              optional: '',
              default: ''
            },
            {
              name: 'max-date',
              description: '最大日期',
              type: 'number',
              optional: '',
              default: ''
            },
          ],
          slots: [],
          events: [
            {
              name: 'cancel',
              description: '点击取消按钮时触发',
              param: '-'
            },
            {
              name: 'confirm',
              description: '点击确定按钮时触发',
              param: '默认为一个日期对象，如果指定了format，则返回一个format后的字符串'
            },
            {
              name: 'change',
              description: '日期变化时触发',
              param: '和confirm事件参数相同'
            }
          ]
        }
      }
    },
    methods: {
      openDatetimePicker (index) {
        this.$refs[`datetimePickerRef${index}`].open()
      },
      handleConfirm (date) {
        this.$toast(`您选择的日期是：${date}`)
      }
    },
    mounted () {
      this.openDatetimePicker(1)
    }
  }
</script>

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