<template>
  <el-date-picker
    class="filter-item"
    :value="value"
    value-format="yyyy-MM-dd"
    type="daterange"
    align="right"
    unlink-panels
    range-separator="/"
    :start-placeholder="starttext"
    :end-placeholder="endtext"
    :picker-options="pickerOptions"
    style="width:400px"
    @input="input"
    @change="change"
  />
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    starttext: {
      type: String,
      default: '开始日期'
    },
    endtext: {
      type: String,
      default: '结束日期'
    }
  },
  data() {
    return {
      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])
            }
          },
          {
            text: '最近半年',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 182)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一年',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  }, methods: {
    change(data) {
      this.$emit('change', data)
    },
    input(data) {
      this.value = data
      this.$emit('input', data)
    }
  }
}
</script>
