<template>
  <div>
    <section class="demo-section">
      <h4>基础用法</h4>
      <div>
        <x-datepicker clearable :value="value" @on-change="change"></x-datepicker>
      </div>
    </section>

    <section class="demo-section">
      <h4>选择日期带时分秒</h4>
      <div>
        <x-datepicker placeholder="时分秒" :value="value" :end-time="[23, 59, 59]" format="YYYY-MM-DD HH:mm:ss" :hours="{start: 8, end: 20}" @on-change="change"></x-datepicker>
        <x-datepicker placeholder="时分" format="YYYY-MM-DD HH:mm" :end-time="[23, 59]" @on-change="change"></x-datepicker>
        <x-datepicker placeholder="时" format="YYYY-MM-DD HH" :end-time="[12]"></x-datepicker>
      </div>
    </section>

    <section class="demo-section">
      <h4>选择年月</h4>
      <div>
        <x-datepicker placeholder="month" type="month" format="YYYY-MM"></x-datepicker>
        <x-datepicker placeholder="year" type="year" format="YYYY"></x-datepicker>
      </div>
    </section>

    <section class="demo-section">
      <h4>日期区间</h4>
      <div>
        <x-datepicker type="daterange" :value="valueTime" unlink-panels @on-change="change"></x-datepicker>
      </div>
    </section>

    <section class="demo-section">
      <h4>日期区间带时分秒</h4>
      <div>
        <x-datepicker ref="datepickerTime" :value="valueTime" type="daterange" placeholder="时分秒" format="YYYY-MM-DD HH:mm" :end-time="[23, 59]" @on-change="change">
          <span slot="confirm" @click="toDate()">今日</span>
        </x-datepicker>
        <x-datepicker type="daterange" placeholder="时分" format="YYYY-MM-DD HH:mm"></x-datepicker>
        <x-datepicker type="daterange" placeholder="时" format="YYYY-MM-DD HH"></x-datepicker>
      </div>
    </section>

    <section class="demo-section">
      <h4>快捷选择</h4>
      <div>
        <x-datepicker unlink-panels type="daterange" :options-width="90" value="过去40日" :options="options" placeholder="快捷选择" style="width:400px">

        </x-datepicker>
      </div>
    </section>

    <section class="demo-section">
      <h4>日期区间多选</h4>
      <div>
        <x-datepicker type="daterange" :multiple="0" placeholder="区间多选" style="width:600px"></x-datepicker>
      </div>
    </section>

    <section class="demo-section">
      <h4>多个日期面板</h4>
      <div>
        <x-datepicker type="daterange" :panel-num="5" placeholder="5"></x-datepicker>
      </div>
    </section>
  </div>
</template>

<script>
import { xDatepicker, dateUtil } from '../src/index'

export default {
  name: 'app',
  components: { xDatepicker },
  data() {
    return {
      options: [
        {
          text: '今日',
          type: 'text',
          value() {
            return [dateUtil().format('YYYY/MM/DD'), dateUtil().format('YYYY/MM/DD')]
          },
          click: () => {}
        }, {
          text: '近29日',
          value() {
            return [dateUtil().subtract(29, 'days').format('YYYY/MM/DD'), dateUtil().format('YYYY/MM/DD')]
          },
          click: () => {}
        }, {
          text: '近90日',
          value() {
            return [dateUtil().subtract(90, 'days').format('YYYY/MM/DD'), dateUtil().format('YYYY/MM/DD')]
          },
          click: () => {}
        }, {
          text: '过去40日',
          value() {
            return [dateUtil().subtract(110, 'days').format('YYYY/MM/DD'), dateUtil().subtract(60, 'days').format('YYYY/MM/DD')]
          },
          click: () => {}
        }
      ],

      value: '2019-01-01 00:00:00',

      valueTime: ['2019-01-01 00:00', '2019-01-02 23:59']
    }
  },

  methods: {
    change(d) {
      this.value = d
      this.valueTime = d
    },
    toDate() {
      this.$refs.datepickerTime.setValue(['2020/06/17 00:00', '2020/06/17 23:59'])
    }
  }
}
</script>

<style lang="scss"></style>
