<template>
  <div class="datetime">
    <p @click="onPick('show')">全量选择</p>
    <p @click="onPick('show2')">时间选择</p> {{d2}}
    <p @click="onPick('show3')">年月日选择</p>
    <p @click="onPick('show4')">月份选择</p>
    <p @click="onPick('show5')">日期选择</p>
    <date-time ref="items" :show.sync="show" :activeColor="activeColor" v-model="d" type="datetime" @confirm="onConfirm"></date-time>
    <date-time :show.sync="show2" v-model="d2" type="time" @confirm="onConfirm"></date-time>
    <date-time :show.sync="show3" :activeColor="activeColor" v-model="d3" type="date" @confirm="onConfirm"></date-time>
    <date-time :show.sync="show4" :activeColor="activeColor" v-model="d4" type="month" @confirm="onConfirm"></date-time>
    <date-time :show.sync="show5" :activeColor="activeColor" v-model="d5" type="day" @confirm="onConfirm"></date-time>

    <br/>
    <div @click="reset">重围一下</div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { DateTime } from '../../tunas'

export default Vue.extend({
  components: {
    DateTime,
  },

  data () {
    return {
      activeColor: '#0082FF',
      show: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      d: '2015-02-03 11:03',
      d2: '12:15',
      d3: '2010-01-30', // [2017-12-22]
      d4: '2009-02',
      d5: '11-11',
      d6: '30: 40',
      date: '',
    }
  },

  created() {
    //   setTimeout(() => {
    //       this.selectInfo[1].values.splice(0, 1).push(9);
    //   }, 2000);
  },

  methods: {
    onPick (vm) {
      this[vm] = true
    },
    onConfirm (v) {
      console.log(v)
    },
    reset() {
      this.d = '2016-02-03 11:03';
      this.$refs.items['refresh'];
    }
  }
})
</script>

<style lang="stylus" scoped>
.datetime{
    padding: 30px;
}
p
  margin-top 20px

.select-list
    margin-top 20px;
    // border-top 1px solid #eee;
    // border-bottom 1px solid #eee;
</style>
