<template>
  <slot name="before" />
  <el-date-picker
    class="timeSeparationClassStart"
    style="width:160px"
    v-model="startTime"
    type="datetime"
    format="YYYY-MM-DD HH:mm:ss"
    value-format="YYYY-MM-DD HH:mm:ss"
    :default-time="new Date(2000, 1, 1, 0, 0, 0)" />
  <span class="timeSeparationClassCenter">-</span>
  <el-date-picker
    class="timeSeparationClassEnd"
    style="width:160px"
    v-model="endTime"
    type="datetime"
    format="YYYY-MM-DD HH:mm:ss"
    value-format="YYYY-MM-DD HH:mm:ss"
    :default-time="new Date(2000, 1, 1, 23, 59, 59)" />
  <el-select v-model="dateRangeType" class="timeSeparationClass_after" style="width:100px" @change="changeDateRange">
    <el-option
      v-for="dict in dateList"
      :key="dict.value"
      :label="$t(dict.label)"
      :value="dict.value" />
  </el-select>
</template>

<script setup>
import { useVModel } from '@vueuse/core'
import i18n from '@/i18n'
import { parseTime } from '@/utils/ruoyi'
const emit = defineEmits(['update:startTime', 'update:endTime', 'change'])
const props = defineProps({
  startTime: String,
  endTime: String,
  defaultTime: Number, // 默認(rèn)快捷選中類型
  showAfter: { type: Boolean, default: true }
})
// 雙向綁定
const startTime = useVModel(props, 'startTime', emit)
const endTime = useVModel(props, 'endTime', emit)
const dateRangeType = ref(props.defaultTime)
function changeDateRange(e) {
  switch (e) {
    case 1: setDaysAgo(7); break;
    case 2: setThisMonth(); break;
    case 4: setToday(); break;
    case 5: setYesterday(); break;
    case 6: setLastMonth(); break;
  }
}
// 日期處理
function setDaysAgo(days) {
  const now = new Date();
  const start = new Date(now)
  start.setDate(start.getDate() - (days - 1))
  start.setHours(0, 0, 0, 0)
  now.setHours(23, 59, 59, 999)
  startTime.value = parseTime(start)
  endTime.value = parseTime(now)
}
function setToday() {
  const now = new Date();
  const start = new Date(now)
  start.setHours(0, 0, 0, 0)
  now.setHours(23, 59, 59, 999)
  startTime.value = parseTime(start)
  endTime.value = parseTime(now)
}
function setYesterday() {
  const start = new Date()
  const end = new Date()
  start.setDate(start.getDate() - 1)
  end.setDate(end.getDate() - 1)
  start.setHours(0, 0, 0, 0)
  end.setHours(23, 59, 59, 999)
  startTime.value = parseTime(start)
  endTime.value = parseTime(end)
}
function setThisMonth() {
  const now = new Date()
  const start = new Date(now.getFullYear(), now.getMonth(), 1)
  const end = new Date(now.getFullYear(), now.getMonth() + 1, 0)
  end.setHours(23, 59, 59, 999)
  startTime.value = parseTime(start)
  endTime.value = parseTime(end)
}
function setLastMonth() {
  const now = new Date()
  const start = new Date(now.getFullYear(), now.getMonth() - 1, 1)
  const end = new Date(now.getFullYear(), now.getMonth(), 0)
  end.setHours(23, 59, 59, 999)
  startTime.value = parseTime(start)
  endTime.value = parseTime(end)
}
watch([() => startTime.value, () => endTime.value], ([newStart, newEnd]) => {
  const ranges = [
    { num: 2, range: getTimeRange('本月') },
    { num: 4, range: getTimeRange('今天') },
    { num: 5, range: getTimeRange('昨天') },
    { num: 6, range: getTimeRange('上月') },
  ]
  const nowRange = [newStart, newEnd]
  const matched = ranges.find(i => JSON.stringify(i.range) === JSON.stringify(nowRange))
  dateRangeType.value = matched ? matched.num : undefined
  emit('change')
})
function getTimeRange(type) {
  const now = new Date()
  let start = new Date(), end = new Date()
  switch (type) {
    case '上月':
      start = new Date(now.getFullYear(), now.getMonth() - 1, 1)
      end = new Date(now.getFullYear(), now.getMonth(), 0)
      break
    case '本月':
      start = new Date(now.getFullYear(), now.getMonth(), 1)
      end = new Date(now.getFullYear(), now.getMonth() + 1, 0)
      break
    case '今天':
      start.setHours(0, 0, 0, 0)
      end.setHours(23, 59, 59, 999)
      break
    case '昨天':
      start.setDate(start.getDate() - 1)
      end.setDate(end.getDate() - 1)
      start.setHours(0, 0, 0, 0)
      end.setHours(23, 59, 59, 999)
      break
  }
  return [parseTime(start), parseTime(end)]
}
const { t } = i18n.global
const dateList = [
  { label: t('this_month'), value: 2 },
  { label: t('today'), value: 4 },
  { label: t('yesterday'), value: 5 },
  { label: t('last_month'), value: 6 }
]
</script>

.timeSeparationClassCenter {
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow:
    inset 0 1px 0 0 var(--el-input-border-color),
    inset 0 -1px 0 0 var(--el-input-border-color);
}
.timeSeparationClassStart .el-input__wrapper {
  border-radius: var(--el-border-radius-base) 0 0 var(--el-border-radius-base);
  box-shadow: inset 1px 0 0 0 var(--el-input-border-color);
}
.timeSeparationClassEnd .el-input__wrapper {
  border-radius: 0;
  box-shadow: inset -1px 0 0 0 var(--el-input-border-color);
}
.timeSeparationClass_after .el-select__wrapper {
  border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base) 0;
  background-color: var(--el-fill-color-light);
}

<template>
  <TimeSeparation
    v-model:startTime="queryParams.startTime"
    v-model:endTime="queryParams.endTime"
    :default-time="2"
    @change="onDateChange"
  />
</template>
<script setup>
import TimeSeparation from '@/components/TimeSeparation.vue'
const queryParams = reactive({
  startTime: '',
  endTime: ''
})
function onDateChange() {
  console.log('時(shí)間范圍變化：', queryParams)
}
</script>