<template>
  <div class="ms-date-range-picker">
    <el-date-picker
      v-model="timedata"
      :end-placeholder="t('结束日期')"
      :picker-options="pickerOptions"
      :range-separator="t('-')"
      :start-placeholder="t('开始日期')"
      style="width: 230px"
      type="daterange"
      @change="chooseTimeRange"
    />
  </div>
</template>

<script>
  import moment from 'dayjs'

  import { translateTitle as t } from '@/utils/i18n'

  export default {
    props: {
      time: {
        type: Number,
        default: () => 1,
      },
      modelValue: {
        type: [String, Array],
        default() {
          return ['', '']
        },
      },
    },
    data() {
      return {
        timedata: this.modelValue,
        pickerOptions: {
          shortcuts: [],
        },
      }
    },
    computed: {
      t() {
        return t
      },
    },
    watch: {
      modelValue(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.timedata = newVal
        }
      },
    },
    mounted() {
      this.getshortcuts()
    },
    methods: {
      getshortcuts() {
        let that = this
        if (this.time === 1) {
          this.pickerOptions.shortcuts = [
            {
              text: this.t('今天'),
              onClick(picker) {
                const start = new Date(moment().format('YYYY-MM-DD'))
                const end = new Date()

                picker.$emit('pick', [start, end])
                setTimeout(() => {
                  that.$emit('update:modelValue', [start, end])
                }, 100) // 100毫秒延迟
              },
            },
            {
              text: this.t('昨天'),
              onClick(picker) {
                const start = new Date(
                  moment(moment().subtract(1, 'days').format('YYYY-MM-DD'))
                )
                const end = new Date(
                  moment(moment().format('YYYY-MM-DD')).subtract(
                    1,
                    'millisecond'
                  )
                )

                picker.$emit('pick', [start, end])
                setTimeout(() => {
                  that.$emit('update:modelValue', [start, end])
                }, 100) // 100毫秒延迟
              },
            },
            {
              text: this.t('最近七天'),
              onClick(picker) {
                const start = new Date(
                  moment(moment().subtract(6, 'days').format('YYYY-MM-DD'))
                )
                const end = new Date()

                picker.$emit('pick', [start, end])
                setTimeout(() => {
                  that.$emit('update:modelValue', [start, end])
                }, 100) // 100毫秒延迟
              },
            },
            {
              text: this.t('最近一个月'),
              onClick(picker) {
                const start = new Date(
                  moment(
                    moment()
                      .subtract(1, 'month')
                      .add(1, 'day')
                      .format('YYYY-MM-DD')
                  )
                )
                const end = new Date()

                that.timedata = [start, end]
                picker.$emit('pick', [start, end])
                setTimeout(() => {
                  that.$emit('update:modelValue', [start, end])
                }, 100) // 100毫秒延迟
              },
            },
            {
              text: this.t('最近三个月'),
              onClick(picker) {
                const start = new Date(
                  moment(
                    moment()
                      .subtract(3, 'months')
                      .add(1, 'day')
                      .format('YYYY-MM-DD')
                  )
                )
                const end = new Date()
                picker.$emit('pick', [start, end])
                setTimeout(() => {
                  that.$emit('update:modelValue', [start, end])
                }, 100) // 100毫秒延迟
              },
            },
            {
              text: this.t('本月'),
              onClick(picker) {
                const start = new Date(
                  moment(moment().startOf('month').format('YYYY-MM-DD'))
                )
                const end = new Date()
                setTimeout(() => {
                  picker.$emit('pick', [start, end])
                  that.$emit('update:modelValue', [start, end])
                }, 100) // 100毫秒延迟
              },
            },
            {
              text: this.t('本年'),
              onClick(picker) {
                const start = new Date(
                  moment(moment().startOf('year').format('YYYY-MM-DD'))
                )
                const end = new Date()
                picker.$emit('pick', [start, end])
                setTimeout(() => {
                  that.$emit('update:modelValue', [start, end])
                }, 100) // 100毫秒延迟
              },
            },
          ]
        } else {
          this.pickerOptions.shortcuts = [
            {
              text: '最近一天',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(
                  start.getTime() - 3600 * 1000 * 24 * 1 - 3600 * 1000 * 24 * 1
                )
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
                picker.$emit('pick', [start, end])
                setTimeout(() => {
                  that.$emit('update:modelValue', [start, end])
                }, 100) // 100毫秒延迟
              },
            },
            {
              text: '最近三天',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(
                  start.getTime() - 3600 * 1000 * 24 * 3 - 3600 * 1000 * 24 * 1
                )
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
                picker.$emit('pick', [start, end])
                setTimeout(() => {
                  that.$emit('update:modelValue', [start, end])
                }, 100) // 100毫秒延迟
              },
            },
            {
              text: '最近五天',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(
                  start.getTime() - 3600 * 1000 * 24 * 5 - 3600 * 1000 * 24 * 1
                )
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
                picker.$emit('pick', [start, end])
                setTimeout(() => {
                  that.$emit('update:modelValue', [start, end])
                }, 100) // 100毫秒延迟
              },
            },
            {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date()
                const start = new Date()
                start.setTime(
                  start.getTime() - 3600 * 1000 * 24 * 30 - 3600 * 1000 * 24 * 1
                )
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
                picker.$emit('pick', [start, end])
                setTimeout(() => {
                  that.$emit('update:modelValue', [start, end])
                }, 100) // 100毫秒延迟
              },
            },
          ]
        }
      },
      chooseTimeRange(t) {
        if (t === null) {
          this.$emit('update:modelValue', [])
        } else {
          t[1] = new Date(moment(t[1]).format('YYYY-MM-DD'))
          this.$emit('update:modelValue', t)
        }
      },
    },
  }
</script>
