<script>
import i18n from '@/i18n'
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
import localeData from 'dayjs/plugin/localeData'

dayjs.extend(utc)
dayjs.extend(isSameOrBefore)
dayjs.extend(localeData)

// 统一获取当天起始时间 (基于本地时区)
function getStartOfDay() {
  return dayjs().startOf('day')
}

const pickerOptions = {
  shortcuts: [
    // 今日
    {
      text: i18n.t('今日'),
      onClick(picker) {
        const start = getStartOfDay()
        const end = dayjs()
        picker.$emit('pick', [start.toDate(), end.toDate()])
      }
    },
    // 昨天
    {
      text: i18n.t('昨天'),
      onClick(picker) {
        const yesterday = getStartOfDay().subtract(1, 'day')
        const start = yesterday.startOf('day')
        const end = yesterday.endOf('day')
        picker.$emit('pick', [start.toDate(), end.toDate()])
      }
    },
    // 最近7天
    {
      text: i18n.t('最近7天'),
      onClick(picker) {
        const end = dayjs()
        const start = end.subtract(6, 'day').startOf('day') // 包含今天在内的7天
        picker.$emit('pick', [start.toDate(), end.toDate()])
      }
    },
    // 最近14天
    {
      text: i18n.t('最近14天'),
      onClick(picker) {
        const end = dayjs()
        const start = dayjs().subtract(13, 'day').startOf('day')
        picker.$emit('pick', [start.toDate(), end.toDate()])
      }
    },
    // 最近30天
    {
      text: i18n.t('最近30天'),
      onClick(picker) {
        const end = dayjs()
        const start = dayjs().subtract(29, 'day').startOf('day')
        picker.$emit('pick', [start.toDate(), end.toDate()])
      }
    },
    // 本星期（假设周一到周日为一周）
    {
      text: i18n.t('本星期'),
      onClick(picker) {
        const end = dayjs()
        const start = dayjs().startOf('week').add(1, 'day') // 适配周一为起始
        picker.$emit('pick', [start.toDate(), end.toDate()])
      }
    },
    // 上星期
    {
      text: i18n.t('上星期'),
      onClick(picker) {
        const now = dayjs()
        const start = now.subtract(1, 'week').startOf('week').add(1, 'day')
        const end = start.add(6, 'day').endOf('day')
        picker.$emit('pick', [start.toDate(), end.toDate()])
      }
    },
    // 这个月
    {
      text: i18n.t('这个月'),
      onClick(picker) {
        const end = dayjs()
        const start = dayjs().startOf('month')
        picker.$emit('pick', [start.toDate(), end.toDate()])
      }
    },
    // 上个月
    {
      text: i18n.t('上个月'),
      onClick(picker) {
        const now = dayjs()
        const start = now.subtract(1, 'month').startOf('month')
        const end = start.endOf('month')
        picker.$emit('pick', [start.toDate(), end.toDate()])
      }
    },
    // 历史
    {
      text: i18n.t('历史'),
      onClick(picker) {
        picker.$emit('pick', ['', ''])
      }
    }
  ]
}

export default {
  name: 'choose-time-period',
  props: {
    periodTime: {
      type: Array,
      default: () => []
    },
    clearable: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: function () {
        return i18n.t('时间')
      }
    },
    format: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss'
    },
    type: {
      type: String,
      default: 'datetimerange'
    },
    align: {
      type: String,
      default: 'left'
    }
  },
  model: {
    prop: 'periodTime',
    event: 'setVal'
  },
  render() {
    return (
      <el-date-picker
        type={this.type}
        unlink-panels
        value={this.periodTime}
        clearable={this.clearable}
        onInput={(v) => this.$emit('setVal', v)}
        range-separator="-"
        value-format={this.format}
        start-placeholder={this.$t('开始{slot1}', { slot1: this.placeholder })}
        end-placeholder={this.$t('结束{slot1}', { slot1: this.placeholder })}
        popper-class={this.$isMobile ? 'isMobile' : ''}
        style="width:200px"
        default-time={['00:00:00', '23:59:59']}
        picker-options={pickerOptions}
        align={this.align}
      />
    )
  }
}
</script>
<style lang="less">
.isMobile {
  width: 97vw !important;
  height: 60vh !important;
  overflow-y: scroll !important;
  left: 10px !important;
  .el-picker-panel__body-wrapper {
    width: 90vw;
    display: flex;
    .el-picker-panel__sidebar {
      position: none;
      width: 75px;
      height: 83vh;
      top: 50px;
      .el-picker-panel__shortcut {
        margin-bottom: 8px;
      }
    }
    .el-picker-panel__body {
      margin-left: 63px;
      min-width: 0 !important;
      width: 300px;
      .el-date-range-picker__time-header {
        width: 132%;
        margin-left: -66px;
        .el-input--small .el-input__inner {
          padding: 0 7px;
        }
      }
      .el-date-range-picker__content {
        width: 80vw;
      }
    }
  }
  .el-picker-panel__footer {
    top: 1px;
    text-align: center;
  }
}
</style>
