<template>
  <list-layout>
    <div class="components-demo-wrap">
      <date-picker v-model="filters.dateTime" />
    </div>
    <div class="components-demo-wrap">
      <date-range-picker
        v-model="filters.dateRange1"
        format="yyyy-MM-dd HH:mm:ss"
        defaultStartTime="00:00:00"
        defaultEndTime="23:59:59"
      />
      {{filters.dateRange1}}
    </div>
    <div class="components-demo-wrap">
      <date-range-picker
        v-model="filters.dateRange2"
        format="yyyy-MM-dd HH:mm:ss"
        defaultStartTime="00:00:00"
        defaultEndTime="23:59:59"
        @pick:start="pickHandle"
        @pick:end="pickHandle"
        :startPickerOptions="startPickerOptions"
        :endPickerOptions="endPickerOptions"
        clearable
      />
      {{filters.dateRange2}}
    </div>
    <div class="components-demo-wrap">
      <date-range-picker
        type="date"
        v-model="filters.dateRange3"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        @pick:start="pickHandle"
        @pick:end="pickHandle"
        clearable
      />
      {{filters.dateRange3}}
    </div>
    <el-button @click="resetTime">重置</el-button>
    <el-button @click="setNullValue">置空</el-button>
    <el-button @click="setNewValue">设置新时间</el-button>

  </list-layout>
</template>

<script>
export default {
  name: 'DatePickerPage',
  data() {
    return {
      filters: {
        dateRange1: [null, '2018-2-15'],
        dateRange2: [null, '2018-2-15'],
        dateRange3: [null, '2018-2-15'],
      },
      startPickerOptions: {
        disabledDate: time => {
          return this.filters.dateRange2[1]
            ? time.getTime() > new Date(this.filters.dateRange2[1]).getTime()
            : false;
        },
      },
      endPickerOptions: {
        disabledDate: time => {
          return this.filters.dateRange2[0]
            ? time.getTime() < new Date(this.filters.dateRange2[0]).getTime() ||
                time.getTime() >
                  new Date(this.filters.dateRange2[0]).getTime() +
                    30 * 24 * 60 * 60 * 1000
            : false;
        },
      },
    };
  },
  methods: {
    resetTime() {
      console.log('in resetTime');

      this.filters.dateRange = [];
    },
    setNullValue() {
      console.log('in setNullValue');
      this.filters.dateRange = null;
    },
    setNewValue() {
      console.log('in setNewValue');
      this.filters.dateRange1 = [null, '2019-1-2'];
    },
    pickHandle(val) {
      console.log('in pickHandle', val);
    },
  },
};
</script>
