<template>
  <el-date-picker
    v-model="internalValue"
    type="daterange"
    align="right"
    unlink-panels
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
    format="yyyy-MM-dd"
    @change="onChange"
  />
</template>

<script>
export default {
  name: 'DateRangePicker',
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      internalValue: [], // 内部绑定值
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              const now = new Date()
              const start = new Date(now.getFullYear(), now.getMonth(), now.getDate())
              start.setHours(0, 0, 0, 0)
              const end = new Date(now.getFullYear(), now.getMonth(), now.getDate())
              end.setHours(23, 59, 59, 999)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '本月',
            onClick (picker) {
              const now = new Date()
              const start = new Date(now.getFullYear(), now.getMonth(), 1)
              start.setHours(0, 0, 0, 0)
              const end = new Date(now.getFullYear(), now.getMonth(), now.getDate())
              end.setHours(23, 59, 59, 999)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '本年',
            onClick (picker) {
              const now = new Date()
              const start = new Date(now.getFullYear(), 0, 1)
              start.setHours(0, 0, 0, 0)
              const end = new Date(now.getFullYear(), now.getMonth(), now.getDate())
              end.setHours(23, 59, 59, 999)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick (picker) {
              const now = new Date()
              const end = new Date(now.getFullYear(), now.getMonth(), now.getDate())
              end.setHours(23, 59, 59, 999)
              const start = new Date(end)
              start.setDate(end.getDate() - 6)
              start.setHours(0, 0, 0, 0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const now = new Date()
              const end = new Date(now.getFullYear(), now.getMonth(), now.getDate())
              end.setHours(23, 59, 59, 999)
              const start = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate())
              start.setHours(0, 0, 0, 0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const now = new Date()
              const end = new Date(now.getFullYear(), now.getMonth(), now.getDate())
              end.setHours(23, 59, 59, 999)
              const start = new Date(now.getFullYear(), now.getMonth() - 3, now.getDate())
              start.setHours(0, 0, 0, 0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '上月',
            onClick (picker) {
              const now = new Date()
              const start = new Date(now.getFullYear(), now.getMonth() - 1, 1)
              start.setHours(0, 0, 0, 0)
              const end = new Date(now.getFullYear(), now.getMonth(), 0)
              end.setHours(23, 59, 59, 999)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler (newVal) {
        if (Array.isArray(newVal) && newVal.length === 2) {
          this.internalValue = [...newVal]
        } else {
          this.internalValue = []
        }
      }
    }
  },
  methods: {
    onChange (val) {
      if (Array.isArray(val) && val.length === 2) {
        const start = val[0]
        const end = new Date(val[1])
        end.setHours(23, 59, 59, 999) // 把结束时间改为当天最后一毫秒
        this.internalValue = [start, end]
        this.$emit('input', [start, end])
        this.$emit('change', [start, end])
      } else {
        this.$emit('input', val)
        this.$emit('change', val)
      }
    }
  }
}
</script>
