<template>
  <div>
    <group title="default format: YYYY-MM-DD">
      <datetime
        v-model="value1"
        title="Birthday"
        @on-change="change"
      />
    </group>

    <group title="YYYY-MM-DD HH:mm">
      <datetime
        v-model="value2"
        format="YYYY-MM-DD HH:mm"
        title="start time"
        inline-desc="select hour and minute"
        @on-change="change"
      />
    </group>

    <group title="Limit hours">
      <datetime
        v-model="limitHourValue"
        format="YYYY-MM-DD HH:mm"
        :min-hour="9"
        :max-hour="18"
        title="Limit hours"
        inline-desc="09-18"
        @on-change="change"
      />
    </group>

    <group title="Limit minutes">
      <datetime
        v-model="limitMinuteValue"
        format="YYYY-MM-DD HH:mm"
        :min-minute="9"
        :max-minute="18"
        title="Limit minutes"
        inline-desc="09-18"
        @on-change="change"
      />
    </group>

    <group title="Placeholder">
      <datetime
        v-model="value3"
        format="YYYY-MM-DD"
        placeholder="Please select"
        title="start time"
        @on-change="change"
      />
    </group>

    <group title="specified min-year and max-year">
      <datetime
        v-model="value4"
        placeholder="Please select"
        :min-year="2000"
        :max-year="2016"
        format="YYYY-MM-DD HH:mm"
        title="years after 2000"
        @on-change="change"
      />
    </group>

    <group title="specified template text in Chinese">
      <datetime
        v-model="value5"
        placeholder="请选择日期"
        :min-year="2000"
        :max-year="2016"
        format="YYYY-MM-DD HH:mm"
        title="Chinese"
        year-row="{value}年"
        month-row="{value}月"
        day-row="{value}日"
        hour-row="{value}点"
        minute-row="{value}分"
        confirm-text="完成"
        cancel-text="取消"
        @on-change="change"
      />
    </group>

    <group title="show center button and clear the value">
      <datetime
        v-model="value6"
        title="Birthday"
        clear-text="clear"
        @on-change="change"
        @on-clear="clearValue"
      />
    </group>

    <group title="show center button to set date to today">
      <datetime
        v-model="value7"
        title="Birthday"
        clear-text="today"
        @on-change="change"
        @on-clear="setToday"
      />
    </group>

    <group title="required">
      <datetime
        v-model="value8"
        title="Required"
        clear-text="clear"
        :required="true"
        @on-clear="clearValue8"
      />
    </group>
  </div>
</template>

<script>
import { Datetime, Group } from '../components/_index'

export default {
  components: {
    Datetime,
    Group
  },
  data () {
    return {
      value1: '2016-06-20',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      value6: '2016-08-18',
      value7: '',
      value8: '',
      limitHourValue: '',
      limitMinuteValue: '',
      startDate: '2015-11-11',
      endDate: '2017-10-11'
    }
  },
  methods: {
    reRender () {
      this.startDate = '2016-11-11'
      this.endDate = '2018-10-11'
    },
    change (value) {
      console.log('change', value)
    },
    clearValue (value) {
      this.$data.value6 = ''
      console.log('clear')
    },
    clearValue8 (value) {
      this.$data.value8 = ''
    },
    setToday (value) {
      let now = new Date()
      let cmonth = now.getMonth() + 1
      let day = now.getDate()
      if (cmonth < 10) cmonth = '0' + cmonth
      this.$data.value7 = now.getFullYear() + '-' + cmonth + '-' + day
      console.log('set today ok')
    }
  }
}
</script>
