<template>
  <div class="page-datetime">
    <co-header fixed title="Datetime Picker">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="page-datetime-wrapper co-wrapper">
      <co-cell title="点击弹出 DateTime Picker" @click.native="open('picker1')"></co-cell>
      <co-cell title="点击弹出 Date Picker" @click.native="open('picker2')"></co-cell>
      <co-cell title="点击弹出 Time Picker" @click.native="open('picker3')"></co-cell>
      <co-cell title="自定义模板" @click.native="open('picker4')"></co-cell>
      <co-cell title="设定初始值" @click.native="open('picker5')"></co-cell>
      <co-cell title="点击弹出 年月选择器" @click.native="open('picker6')"></co-cell>
    </div>

    <co-datetime-picker
      ref="picker1"
      v-model="value"
      @confirm="handleChange"
      :yearFormat="'{value} 年'"
      :monthFormat="'{value} 月'"
      :dateFormat="'{value} 日'">
    </co-datetime-picker>
    <co-datetime-picker
      ref="picker2"
      type="date"
      v-model="value2"
      @confirm="handleChange">
    </co-datetime-picker>
    <co-datetime-picker
      ref="picker3"
      type="time"
      v-model="value3"
      @confirm="handleChange">
    </co-datetime-picker>
    <co-datetime-picker
      ref="picker4"
      type="date"
      v-model="value4"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handleChange">
    </co-datetime-picker>
    <co-datetime-picker
      ref="picker5"
      type="time"
      v-model="value5"
      @confirm="handleChange">
    </co-datetime-picker>
    <co-datetime-picker
      ref="picker5"
      type="time"
      v-model="value5"
      @confirm="handleChange">
    </co-datetime-picker>
    <co-datetime-picker
      ref="picker6"
      type="yearmonth"
      v-model="value6"
      @confirm="handleChange">
    </co-datetime-picker>
  </div>
</template>

<script type="es6">
  export default {
    data() {
      return {
        value: null,
        value2: null,
        value3: null,
        value4: null,
        value5: '04:32',
        value6: null,
        visible: false,
        visible2: false,
        visible3: false,
        visible4: false,
        visible5: false
      };
    },

    methods: {
      open(picker) {
        this.$refs[picker].open();
      },

      handleChange(date) {
        this.$toast({
          message: '已选择 ' + date.format('yyyy-MM-dd'),
          position: 'bottom'
        });
      },

      onYearChange(picker, values) {
        this.year = values[0];
      }
    }
  };
</script>
