<!--author: qiu.bl-->
<template>
    <el-date-picker
      v-model="datetime"
      :type="types"
      @change="datePickerChange"
      placeholder="选择日期范围"
      :picker-options="quick && pickerOptions">
    </el-date-picker>
</template>
<script>
  export default {
    props: {
      types: {
        type: String,
        default: 'date'
      },
      quick: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        datetime: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      }
    },
    methods: {
      datePickerChange (item) {
        this.$emit('on-change', JSON.stringify(item))
      }
    }
  }
</script>
