<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
import { useI18n } from '../composables/useI18n'

interface Props {
  modelValue?: string | [string, string]
  type?: 'date' | 'daterange' | 'datetime'
  placeholder?: string
  startPlaceholder?: string
  endPlaceholder?: string
  disabled?: boolean
  clearable?: boolean
  size?: 'small' | 'default' | 'large'
  format?: string
  valueFormat?: string
  rangeSeparator?: string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  type: 'date',
  placeholder: '请选择日期',
  startPlaceholder: '开始日期',
  endPlaceholder: '结束日期',
  disabled: false,
  clearable: true,
  size: 'default',
  format: 'YYYY-MM-DD',
  valueFormat: 'YYYY-MM-DD',
  rangeSeparator: '至',
})

const emit = defineEmits<{
  'update:modelValue': [value: string | [string, string]]
  change: [value: string | [string, string]]
  focus: [event: FocusEvent]
  blur: [event: FocusEvent]
}>()

const { t } = useI18n()

// 内部状态
const isFocused = ref(false)
const isHovered = ref(false)
const showPicker = ref(false)
const showYearPicker = ref(false)
const showMonthPicker = ref(false)
const showTimePicker = ref(false)
const inputRef = ref<HTMLElement>()
const pickerRef = ref<HTMLElement>()
const timePickerRef = ref<HTMLElement>()
const timeInputRef = ref<HTMLElement>()
const hourListRef = ref<HTMLElement>()
const minuteListRef = ref<HTMLElement>()
const blurTimer = ref<number | null>(null)
const positionUpdateKey = ref(0) // 用于强制重新计算位置

// 保存打开选择器时的原始值（用于取消时恢复）
const originalSingleValue = ref('')
const originalSelectedTime = ref('12:00')
const originalStartValue = ref('')
const originalEndValue = ref('')

// 当前显示的年月
const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth())

// 年份选择器的年份范围
const yearPickerStartYear = ref(Math.floor(new Date().getFullYear() / 10) * 10)

// 单日期模式的值
const singleValue = ref('')
// 日期范围模式的值
const startValue = ref('')
const endValue = ref('')
const rangeSelection = ref<'start' | 'end'>('start')

// 时间选择器的值
const selectedTime = ref('12:00')
const tempHour = ref(12)
const tempMinute = ref(0)

// 格式化显示日期时间
const formatDisplayDateTime = (dateStr: string, timeStr: string) => {
  if (!dateStr) return ''

  const date = new Date(dateStr)
  if (isNaN(date.getTime())) return ''

  // 使用 format 属性来决定日期格式
  const separator = props.format.includes('-') ? '-' : '/'
  const dateFormat = `${date.getFullYear()}${separator}${String(date.getMonth() + 1).padStart(2, '0')}${separator}${String(date.getDate()).padStart(2, '0')}`

  // 仅在 datetime 模式下显示时间部分
  if (props.type === 'datetime' && timeStr) {
    return `${dateFormat} ${timeStr}`
  }

  return dateFormat
}

// 显示值
const displayValue = computed(() => {
  if (props.type === 'daterange') {
    const start = startValue.value
      ? formatDisplayDateTime(startValue.value, selectedTime.value)
      : ''
    const end = endValue.value ? formatDisplayDateTime(endValue.value, selectedTime.value) : ''
    if (start && end) {
      return `${start} ${props.rangeSeparator} ${end}`
    }
    return start || end || ''
  }
  // 对于单日期/日期时间，使用内部状态来显示（即使未确认也显示）
  return singleValue.value ? formatDisplayDateTime(singleValue.value, selectedTime.value) : ''
})

// 解析日期时间字符串
const parseDateTimeString = (dateTimeStr: string) => {
  if (!dateTimeStr) return { dateStr: '', timeStr: '12:00' }

  // 检查是否包含时间部分
  const parts = dateTimeStr.trim().split(' ')
  if (parts.length >= 2) {
    // 包含时间部分
    const dateStr = parts[0]
    const timeStr = parts[1]

    // 转换日期格式从 yyyy/MM/dd 到 yyyy-MM-dd
    const dateParts = dateStr.split('/')
    if (dateParts.length === 3) {
      const formattedDate = `${dateParts[0]}-${dateParts[1].padStart(2, '0')}-${dateParts[2].padStart(2, '0')}`
      return { dateStr: formattedDate, timeStr }
    }

    // 已经是 yyyy-MM-dd 格式，直接返回
    return { dateStr, timeStr }
  }

  // 只有日期部分，或者已经是标准格式
  const dateStr = parts[0]
  if (dateStr.includes('/')) {
    // 转换格式
    const dateParts = dateStr.split('/')
    if (dateParts.length === 3) {
      const formattedDate = `${dateParts[0]}-${dateParts[1].padStart(2, '0')}-${dateParts[2].padStart(2, '0')}`
      return { dateStr: formattedDate, timeStr: '12:00' }
    }
  }

  return { dateStr, timeStr: '12:00' }
}

// 监听外部值变化
watch(
  () => props.modelValue,
  newValue => {
    if (props.type === 'daterange') {
      if (Array.isArray(newValue) && newValue.length === 2) {
        const startParsed = parseDateTimeString(newValue[0] || '')
        const endParsed = parseDateTimeString(newValue[1] || '')

        startValue.value = startParsed.dateStr
        endValue.value = endParsed.dateStr

        // 如果有时间信息，使用第一个时间作为选择器的时间
        if (startParsed.timeStr !== '12:00') {
          selectedTime.value = startParsed.timeStr
        }
      } else {
        startValue.value = ''
        endValue.value = ''
        selectedTime.value = '12:00'
      }
    } else {
      const parsed = parseDateTimeString((newValue as string) || '')
      singleValue.value = parsed.dateStr
      selectedTime.value = parsed.timeStr
    }
  },
  { immediate: true },
)

// 处理单日期输入变化（预留，当前版本不使用）
// const handleSingleDateChange = (event: Event) => {
//   const target = event.target as HTMLInputElement
//   singleValue.value = target.value
//   emit('update:modelValue', target.value)
//   emit('change', target.value)
// }

// 处理开始日期变化（预留，当前版本不使用）
// const handleStartDateChange = (event: Event) => {
//   const target = event.target as HTMLInputElement
//   startValue.value = target.value
//   const newValue: [string, string] = [target.value, endValue.value]
//   emit('update:modelValue', newValue)
//   emit('change', newValue)
// }

// 处理结束日期变化（预留，当前版本不使用）
// const handleEndDateChange = (event: Event) => {
//   const target = event.target as HTMLInputElement
//   endValue.value = target.value
//   const newValue: [string, string] = [startValue.value, target.value]
//   emit('update:modelValue', newValue)
//   emit('change', newValue)
// }

// 清空值
const clearValue = () => {
  if (props.type === 'daterange') {
    startValue.value = ''
    endValue.value = ''
    emit('update:modelValue', ['', ''])
    emit('change', ['', ''])
  } else {
    singleValue.value = ''
    emit('update:modelValue', '')
    emit('change', '')
  }
  showPicker.value = false
}

// 打开/关闭日期选择器
const togglePicker = () => {
  if (props.disabled) return
  showPicker.value = !showPicker.value
  if (showPicker.value) {
    // 保存打开时的原始值
    if (props.type === 'daterange') {
      originalStartValue.value = startValue.value
      originalEndValue.value = endValue.value
    } else {
      originalSingleValue.value = singleValue.value
      originalSelectedTime.value = selectedTime.value
    }

    // 记录当前滚动位置
    lastScrollPosition.x = window.scrollX
    lastScrollPosition.y = window.scrollY

    // 强制更新位置计算
    positionUpdateKey.value++

    // 设置当前年月为选中日期的年月
    let currentDate: Date
    if (props.type === 'daterange') {
      // 对于日期范围，优先使用开始日期，如果没有则使用结束日期
      const targetDateStr = startValue.value || endValue.value
      currentDate = targetDateStr ? new Date(targetDateStr) : new Date()
    } else {
      currentDate = singleValue.value ? new Date(singleValue.value) : new Date()
    }

    // 确保日期有效
    if (!isNaN(currentDate.getTime())) {
      currentYear.value = currentDate.getFullYear()
      currentMonth.value = currentDate.getMonth()
    } else {
      currentDate = new Date()
      currentYear.value = currentDate.getFullYear()
      currentMonth.value = currentDate.getMonth()
    }
  }
}

// 关闭日期选择器（未确认时恢复原始值）
const closePicker = () => {
  // 如果是 datetime 模式，恢复原始值（因为可能没有点击确认按钮）
  if (props.type === 'datetime' && showPicker.value) {
    singleValue.value = originalSingleValue.value
    selectedTime.value = originalSelectedTime.value
  } else if (props.type === 'daterange' && showPicker.value) {
    startValue.value = originalStartValue.value
    endValue.value = originalEndValue.value
  }

  showPicker.value = false
  showYearPicker.value = false
  showMonthPicker.value = false
  showTimePicker.value = false // 关闭日历时也关闭时间选择器
  isFocused.value = false
  // 清理失焦定时器
  if (blurTimer.value) {
    clearTimeout(blurTimer.value)
    blurTimer.value = null
  }
}

// 时间选择器相关函数
const openTimePicker = (event?: MouseEvent) => {
  if (event) {
    event.preventDefault()
    event.stopPropagation()
  }
  if (showTimePicker.value) return

  // 阻止失焦关闭日历选择器
  if (blurTimer.value) {
    clearTimeout(blurTimer.value)
    blurTimer.value = null
  }

  showTimePicker.value = true

  // 解析当前时间
  const [hour, minute] = selectedTime.value.split(':').map(Number)
  tempHour.value = hour
  tempMinute.value = minute

  // 下一帧滚动到选中的时间位置
  nextTick(() => {
    scrollToSelectedTime()
  })
}

// 滚动到选中的时间位置
const scrollToSelectedTime = () => {
  if (hourListRef.value) {
    const hourItems = hourListRef.value.querySelectorAll('.el-time-item')
    const selectedHourIndex = tempHour.value
    if (hourItems[selectedHourIndex]) {
      const itemHeight = 28 // el-time-item 的高度
      const containerHeight = 160 // el-time-column-list 的高度
      const scrollTop = Math.max(
        0,
        selectedHourIndex * itemHeight - containerHeight / 2 + itemHeight / 2,
      )
      hourListRef.value.scrollTop = scrollTop
    }
  }

  if (minuteListRef.value) {
    const minuteItems = minuteListRef.value.querySelectorAll('.el-time-item')
    const minuteOptions = [0, 15, 30, 45]
    const selectedMinuteIndex = minuteOptions.indexOf(tempMinute.value)
    if (selectedMinuteIndex >= 0 && minuteItems[selectedMinuteIndex]) {
      const itemHeight = 28
      const containerHeight = 160
      const scrollTop = Math.max(
        0,
        selectedMinuteIndex * itemHeight - containerHeight / 2 + itemHeight / 2,
      )
      minuteListRef.value.scrollTop = scrollTop
    }
  }
}

const closeTimePicker = () => {
  showTimePicker.value = false
}

const confirmTime = () => {
  selectedTime.value = `${String(tempHour.value).padStart(2, '0')}:${String(tempMinute.value).padStart(2, '0')}`
  closeTimePicker()
}

// 生成小时选项（0-23）
const hourOptions = computed(() => {
  return Array.from({ length: 24 }, (_, i) => i)
})

// 生成分钟选项（15分间隔：0, 15, 30, 45）
const minuteOptions = computed(() => {
  return [0, 15, 30, 45]
})

// 滚动选择时间
const selectHour = (hour: number) => {
  tempHour.value = hour
}

const selectMinute = (minute: number) => {
  tempMinute.value = minute
}

// 确认日期选择
const confirmDate = () => {
  if (props.type === 'daterange') {
    if (startValue.value && endValue.value) {
      // 格式化日期和时间
      const formatDateTime = (dateStr: string) => {
        const date = new Date(dateStr)
        // 使用 valueFormat 来格式化日期
        const separator = props.valueFormat.includes('-') ? '-' : '/'
        const dateFormat = `${date.getFullYear()}${separator}${String(date.getMonth() + 1).padStart(2, '0')}${separator}${String(date.getDate()).padStart(2, '0')}`
        return selectedTime.value ? `${dateFormat} ${selectedTime.value}` : dateFormat
      }

      const startDateTime = formatDateTime(startValue.value)
      const endDateTime = formatDateTime(endValue.value)
      const newValue: [string, string] = [startDateTime, endDateTime]

      emit('update:modelValue', newValue)
      emit('change', newValue)

      // 更新原始值，这样关闭时不会恢复
      originalStartValue.value = startValue.value
      originalEndValue.value = endValue.value
    }
  } else if (singleValue.value) {
    // 格式化日期和时间
    const date = new Date(singleValue.value)
    // 使用 valueFormat 来格式化日期
    const separator = props.valueFormat.includes('-') ? '-' : '/'
    const dateFormat = `${date.getFullYear()}${separator}${String(date.getMonth() + 1).padStart(2, '0')}${separator}${String(date.getDate()).padStart(2, '0')}`
    const formattedDateTime = selectedTime.value
      ? `${dateFormat} ${selectedTime.value}`
      : dateFormat

    emit('update:modelValue', formattedDateTime)
    emit('change', formattedDateTime)

    // 更新原始值，这样关闭时不会恢复
    originalSingleValue.value = singleValue.value
    originalSelectedTime.value = selectedTime.value
  }

  // 确认后关闭面板
  setTimeout(() => {
    closePicker()
  }, 150)
}

// 处理点击外部区域
const handleClickOutside = (event: MouseEvent) => {
  const target = event.target as Element
  const isInsideInput = inputRef.value?.contains(target)
  const isInsidePicker = pickerRef.value?.contains(target)
  const isInsideTimePicker = timePickerRef.value?.contains(target)

  if (!isInsideInput && !isInsidePicker && !isInsideTimePicker) {
    closePicker()
  } else if (!isInsideTimePicker && showTimePicker.value && !isInsidePicker) {
    // 如果点击了时间选择器外部但在日历选择器内部，只关闭时间选择器
    closeTimePicker()
  }
}

// 处理页面滚动事件
const lastScrollPosition = { x: 0, y: 0 }
const handleScroll = () => {
  if (showPicker.value) {
    const currentScrollX = window.scrollX
    const currentScrollY = window.scrollY

    // 计算滚动距离
    const scrollDistanceX = Math.abs(currentScrollX - lastScrollPosition.x)
    const scrollDistanceY = Math.abs(currentScrollY - lastScrollPosition.y)

    // 如果滚动距离较小（小于50px），只更新位置；否则关闭选择器
    if (scrollDistanceX < 50 && scrollDistanceY < 50) {
      // 更新位置
      positionUpdateKey.value++
    } else {
      // 滚动距离较大，关闭选择器
      closePicker()
    }

    // 更新最后滚动位置
    lastScrollPosition.x = currentScrollX
    lastScrollPosition.y = currentScrollY
  }
}

// 处理窗口大小变化
const handleResize = () => {
  if (showPicker.value) {
    // 窗口大小变化时更新位置
    positionUpdateKey.value++
  }
}

// 生成日历数据
const calendarDays = computed(() => {
  const firstDay = new Date(currentYear.value, currentMonth.value, 1)
  const startDate = new Date(firstDay)
  startDate.setDate(startDate.getDate() - firstDay.getDay())

  const days = []
  for (let i = 0; i < 42; i++) {
    const date = new Date(startDate)
    date.setDate(startDate.getDate() + i)

    const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    const isCurrentMonth = date.getMonth() === currentMonth.value
    const isToday = dateStr === new Date().toISOString().split('T')[0]
    const isSelected =
      props.type === 'daterange'
        ? dateStr === startValue.value || dateStr === endValue.value
        : dateStr === singleValue.value
    const isInRange =
      props.type === 'daterange' && startValue.value && endValue.value
        ? dateStr >= startValue.value && dateStr <= endValue.value
        : false

    days.push({
      date,
      dateStr,
      day: date.getDate(),
      isCurrentMonth,
      isToday,
      isSelected,
      isInRange,
    })
  }
  return days
})

// 选择日期
const selectDate = (dateStr: string) => {
  if (props.type === 'daterange') {
    if (
      rangeSelection.value === 'start' ||
      !startValue.value ||
      (startValue.value && endValue.value)
    ) {
      // 开始选择新的日期范围
      startValue.value = dateStr
      endValue.value = ''
      rangeSelection.value = 'end'
    } else {
      // 选择结束日期
      if (dateStr < startValue.value) {
        // 如果选择的日期早于开始日期，交换位置
        endValue.value = startValue.value
        startValue.value = dateStr
      } else {
        endValue.value = dateStr
      }
      rangeSelection.value = 'start'
      // 不再自动提交，等待用户点击确认按钮
    }
  } else {
    singleValue.value = dateStr

    // 如果 type='date'（纯日期模式），立即提交并关闭
    if (props.type === 'date') {
      // 格式化日期
      const date = new Date(dateStr)
      const separator = props.valueFormat.includes('-') ? '-' : '/'
      const formattedDate = `${date.getFullYear()}${separator}${String(date.getMonth() + 1).padStart(2, '0')}${separator}${String(date.getDate()).padStart(2, '0')}`

      // 发送事件
      emit('update:modelValue', formattedDate)
      emit('change', formattedDate)

      // 更新原始值，这样关闭时不会恢复
      originalSingleValue.value = singleValue.value

      // 延迟关闭，让用户看到选中效果
      setTimeout(() => {
        closePicker()
      }, 150)
    }
    // 如果 type='datetime'，等待用户选择时间并点击确认按钮
  }
}

// 上一月
const prevMonth = (event?: MouseEvent) => {
  if (event) {
    event.preventDefault()
    event.stopPropagation()
  }
  // 阻止失焦关闭
  if (blurTimer.value) {
    clearTimeout(blurTimer.value)
    blurTimer.value = null
  }
  if (currentMonth.value === 0) {
    currentMonth.value = 11
    currentYear.value--
  } else {
    currentMonth.value--
  }
}

// 下一月
const nextMonth = (event?: MouseEvent) => {
  if (event) {
    event.preventDefault()
    event.stopPropagation()
  }
  // 阻止失焦关闭
  if (blurTimer.value) {
    clearTimeout(blurTimer.value)
    blurTimer.value = null
  }
  if (currentMonth.value === 11) {
    currentMonth.value = 0
    currentYear.value++
  } else {
    currentMonth.value++
  }
}

// 上一年
const prevYear = (event?: MouseEvent) => {
  if (event) {
    event.preventDefault()
    event.stopPropagation()
  }
  // 阻止失焦关闭
  if (blurTimer.value) {
    clearTimeout(blurTimer.value)
    blurTimer.value = null
  }
  currentYear.value--
}

// 下一年
const nextYear = (event?: MouseEvent) => {
  if (event) {
    event.preventDefault()
    event.stopPropagation()
  }
  // 阻止失焦关闭
  if (blurTimer.value) {
    clearTimeout(blurTimer.value)
    blurTimer.value = null
  }
  currentYear.value++
}

// 显示年份选择器
const showYearSelector = (event?: MouseEvent) => {
  if (event) {
    event.preventDefault()
    event.stopPropagation()
  }
  // 阻止失焦关闭
  if (blurTimer.value) {
    clearTimeout(blurTimer.value)
    blurTimer.value = null
  }
  showYearPicker.value = true
  showMonthPicker.value = false
  yearPickerStartYear.value = Math.floor(currentYear.value / 10) * 10
}

// 显示月份选择器
const showMonthSelector = (event?: MouseEvent) => {
  if (event) {
    event.preventDefault()
    event.stopPropagation()
  }
  // 阻止失焦关闭
  if (blurTimer.value) {
    clearTimeout(blurTimer.value)
    blurTimer.value = null
  }
  showMonthPicker.value = true
  showYearPicker.value = false
}

// 选择年份
const selectYear = (year: number, event?: MouseEvent) => {
  if (event) {
    event.preventDefault()
    event.stopPropagation()
  }
  // 阻止失焦关闭
  if (blurTimer.value) {
    clearTimeout(blurTimer.value)
    blurTimer.value = null
  }
  currentYear.value = year
  showYearPicker.value = false
  // 选择年份后自动展示月份选择器
  showMonthPicker.value = true
}

// 选择月份
const selectMonth = (month: number, event?: MouseEvent) => {
  if (event) {
    event.preventDefault()
    event.stopPropagation()
  }
  // 阻止失焦关闭
  if (blurTimer.value) {
    clearTimeout(blurTimer.value)
    blurTimer.value = null
  }
  currentMonth.value = month
  showMonthPicker.value = false
  // 选择月份后展示日期面板（回到日期选择界面）
}

// 年份选择器的上一页
const prevYearPage = (event?: MouseEvent) => {
  if (event) {
    event.preventDefault()
    event.stopPropagation()
  }
  // 阻止失焦关闭
  if (blurTimer.value) {
    clearTimeout(blurTimer.value)
    blurTimer.value = null
  }
  yearPickerStartYear.value -= 10
}

// 年份选择器的下一页
const nextYearPage = (event?: MouseEvent) => {
  if (event) {
    event.preventDefault()
    event.stopPropagation()
  }
  // 阻止失焦关闭
  if (blurTimer.value) {
    clearTimeout(blurTimer.value)
    blurTimer.value = null
  }
  yearPickerStartYear.value += 10
}

// 生成年份列表
const yearList = computed(() => {
  const years = []
  for (let i = 0; i < 10; i++) {
    years.push(yearPickerStartYear.value + i)
  }
  return years
})

/*
// 月份名称
const monthNames = [
  '一月',
  '二月',
  '三月',
  '四月',
  '五月',
  '六月',
  '七月',
  '八月',
  '九月',
  '十月',
  '十一月',
  '十二月',
]
const weekDays = ['日', '一', '二', '三', '四', '五', '六']
*/

// 生命周期
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
  window.addEventListener('scroll', handleScroll, true) // 使用捕获模式监听所有滚动事件
  window.addEventListener('resize', handleResize) // 监听窗口大小变化

  // 初始化滚动位置
  lastScrollPosition.x = window.scrollX
  lastScrollPosition.y = window.scrollY
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
  window.removeEventListener('scroll', handleScroll, true)
  window.removeEventListener('resize', handleResize)
  // 清理失焦定时器
  if (blurTimer.value) {
    clearTimeout(blurTimer.value)
    blurTimer.value = null
  }
})

// 焦点事件
const handleFocus = (event: FocusEvent) => {
  // 清除失焦定时器
  if (blurTimer.value) {
    clearTimeout(blurTimer.value)
    blurTimer.value = null
  }
  isFocused.value = true
  emit('focus', event)
}

const handleBlur = (event: FocusEvent) => {
  // 延时关闭面板，给用户时间点击面板内的元素
  blurTimer.value = setTimeout(() => {
    isFocused.value = false
    closePicker()
    emit('blur', event)
  }, 150) // 150ms 延时
}

// 面板获得焦点时取消关闭
const handlePickerFocus = () => {
  if (blurTimer.value) {
    clearTimeout(blurTimer.value)
    blurTimer.value = null
  }
}

// 面板失去焦点时关闭
const handlePickerBlur = () => {
  // 只有在时间选择器未打开时才关闭日历选择器
  if (!showTimePicker.value) {
    blurTimer.value = setTimeout(() => {
      closePicker()
    }, 150)
  }
}

// 时间选择器失去焦点时关闭
const handleTimePickerBlur = () => {
  blurTimer.value = setTimeout(() => {
    closeTimePicker()
  }, 150)
}

// 鼠标悬停事件
const handleMouseEnter = () => {
  isHovered.value = true
}

const handleMouseLeave = () => {
  isHovered.value = false
}

// 组件类名
const componentClass = computed(() => [
  'el-date-picker',
  `el-date-picker--${props.size}`,
  {
    'is-disabled': props.disabled,
    'is-focused': isFocused.value,
    'is-range': props.type === 'daterange',
  },
])

// 是否显示清空按钮
const showClearButton = computed(() => {
  if (!props.clearable || props.disabled) return false
  if (props.type === 'daterange') {
    return (startValue.value || endValue.value) && isHovered.value
  }
  return singleValue.value && isHovered.value
})

// 计算面板位置
const panelStyle = computed(() => {
  if (!inputRef.value || !showPicker.value) return {}

  const rect = inputRef.value.getBoundingClientRect()
  const panelWidth = 280 // 面板宽度
  const panelHeight = 300 // 面板高度
  const spacing = 4 // 间距
  const viewportWidth = window.innerWidth
  const viewportHeight = window.innerHeight

  const style: Record<string, string> = {
    position: 'fixed',
    zIndex: '10000',
  }

  // 垂直位置：优先显示在下方，空间不足时显示在上方
  const spaceBelow = viewportHeight - rect.bottom
  const spaceAbove = rect.top

  if (spaceBelow >= panelHeight + spacing || spaceBelow >= spaceAbove) {
    // 显示在下方
    style.top = `${rect.bottom + spacing}px`
  } else {
    // 显示在上方
    style.top = `${rect.top - panelHeight - spacing}px`
  }

  // 水平位置：智能选择左对齐、右对齐或居中
  const spaceRight = viewportWidth - rect.left
  const spaceLeft = rect.right

  if (spaceRight >= panelWidth) {
    // 左对齐（输入框左边缘对齐面板左边缘）
    style.left = `${rect.left}px`
  } else if (spaceLeft >= panelWidth) {
    // 右对齐（输入框右边缘对齐面板右边缘）
    style.left = `${rect.right - panelWidth}px`
  } else {
    // 居中对齐，确保不超出视窗
    const centerLeft = rect.left + (rect.width - panelWidth) / 2
    const minLeft = spacing
    const maxLeft = viewportWidth - panelWidth - spacing
    style.left = `${Math.max(minLeft, Math.min(centerLeft, maxLeft))}px`
  }

  // 确保面板完全在视窗内
  const finalTop = parseFloat(style.top!)
  const finalLeft = parseFloat(style.left!)

  // 垂直边界检查
  if (finalTop < spacing) {
    style.top = `${spacing}px`
  } else if (finalTop + panelHeight > viewportHeight - spacing) {
    style.top = `${viewportHeight - panelHeight - spacing}px`
  }

  // 水平边界检查
  if (finalLeft < spacing) {
    style.left = `${spacing}px`
  } else if (finalLeft + panelWidth > viewportWidth - spacing) {
    style.left = `${viewportWidth - panelWidth - spacing}px`
  }

  return style
})

// 计算时间选择器位置
const timePickerStyle = computed(() => {
  if (!timeInputRef.value || !showTimePicker.value) return {}

  const rect = timeInputRef.value.getBoundingClientRect()
  const panelWidth = 180 // 减小宽度从280到180
  const panelHeight = 300
  const spacing = 4
  const viewportWidth = window.innerWidth
  const viewportHeight = window.innerHeight

  const style: Record<string, string> = {
    position: 'fixed',
    zIndex: '10002', // 比日历选择器层级更高
  }

  // 水平位置：与时间输入框左对齐
  const spaceRight = viewportWidth - rect.left
  if (spaceRight >= panelWidth) {
    // 左对齐
    style.left = `${rect.left}px`
  } else {
    // 右对齐，确保不超出视窗
    style.left = `${Math.max(spacing, viewportWidth - panelWidth - spacing)}px`
  }

  // 垂直位置：显示在输入框上方
  const spaceAbove = rect.top
  if (spaceAbove >= panelHeight + spacing) {
    // 显示在上方
    style.top = `${rect.top - panelHeight - spacing}px`
  } else {
    // 空间不足时显示在下方
    style.top = `${rect.bottom + spacing}px`
  }

  // 确保面板完全在视窗内
  const finalTop = parseFloat(style.top!)
  if (finalTop < spacing) {
    style.top = `${spacing}px`
  } else if (finalTop + panelHeight > viewportHeight - spacing) {
    style.top = `${viewportHeight - panelHeight - spacing}px`
  }

  return style
})
</script>

<template>
  <div :class="componentClass" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
    <!-- 输入框 -->
    <div ref="inputRef" class="el-input" @click="togglePicker">
      <div class="el-input__wrapper">
        <div class="el-input__inner">
          <input
            :value="displayValue"
            type="text"
            class="el-input__inner-input"
            :placeholder="
              type === 'daterange'
                ? `${startPlaceholder} ${rangeSeparator} ${endPlaceholder}`
                : placeholder
            "
            :disabled="disabled"
            readonly
            @focus="handleFocus"
            @blur="handleBlur"
          />
        </div>
        <div class="el-input__suffix">
          <div class="el-input__suffix-inner">
            <!-- 清空按钮 -->
            <button
              v-if="showClearButton"
              type="button"
              class="el-input__clear"
              @click.stop="clearValue"
            >
              <svg class="el-icon" viewBox="0 0 1024 1024">
                <path
                  fill="currentColor"
                  d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
                />
              </svg>
            </button>
            <!-- 日历图标 -->
            <span v-else class="el-input__icon">
              <svg class="el-icon" viewBox="0 0 1024 1024">
                <path
                  fill="currentColor"
                  d="M128 384v512h768V384H128zm-32-64h832a32 32 0 0 1 32 32v576a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V352a32 32 0 0 1 32-32z"
                />
                <path
                  fill="currentColor"
                  d="M288 128a32 32 0 0 1 64 0v192a32 32 0 0 1-64 0V128zm384 0a32 32 0 0 1 64 0v192a32 32 0 0 1-64 0V128z"
                />
                <path fill="currentColor" d="M96 320h832q32 0 32 32t-32 32H96q-32 0-32-32t32-32z" />
              </svg>
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 时间选择器弹窗 -->
    <Teleport to="body">
      <Transition name="picker-fade">
        <div
          v-if="showTimePicker"
          ref="timePickerRef"
          class="el-time-picker-panel"
          :style="timePickerStyle"
          tabindex="-1"
          @click.stop
          @mousedown.prevent
          @focus="handlePickerFocus"
          @blur="handleTimePickerBlur"
        >
          <div class="el-time-picker-header">
            <span class="el-time-picker-title">{{ t.selectTime }}</span>
          </div>

          <div class="el-time-picker-content">
            <!-- 小时选择 -->
            <div class="el-time-column">
              <div class="el-time-column-header">{{ t.hour }}</div>
              <div ref="hourListRef" class="el-time-column-list">
                <div
                  v-for="hour in hourOptions"
                  :key="hour"
                  class="el-time-item"
                  :class="{ 'is-active': hour === tempHour }"
                  @click.stop="selectHour(hour)"
                  @mousedown.prevent
                >
                  {{ String(hour).padStart(2, '0') }}
                </div>
              </div>
            </div>

            <!-- 分钟选择 -->
            <div class="el-time-column">
              <div class="el-time-column-header">{{ t.minute }}</div>
              <div ref="minuteListRef" class="el-time-column-list">
                <div
                  v-for="minute in minuteOptions"
                  :key="minute"
                  class="el-time-item"
                  :class="{ 'is-active': minute === tempMinute }"
                  @click.stop="selectMinute(minute)"
                  @mousedown.prevent
                >
                  {{ String(minute).padStart(2, '0') }}
                </div>
              </div>
            </div>
          </div>

          <div class="el-time-picker-footer">
            <button
              class="el-time-picker-btn el-time-picker-btn--cancel"
              @click.stop="closeTimePicker"
              @mousedown.prevent
            >
              {{ t.cancel }}
            </button>
            <button
              class="el-time-picker-btn el-time-picker-btn--confirm"
              @click.stop="confirmTime"
              @mousedown.prevent
            >
              {{ t.confirm }}
            </button>
          </div>
        </div>
      </Transition>
    </Teleport>

    <!-- 日期选择器面板 -->
    <Teleport to="body">
      <Transition name="picker-fade">
        <div
          v-if="showPicker"
          ref="pickerRef"
          class="el-picker-panel"
          :style="panelStyle"
          tabindex="-1"
          @focus="handlePickerFocus"
          @blur="handlePickerBlur"
        >
          <!-- 年份选择器 -->
          <div v-if="showYearPicker" class="el-year-picker">
            <div class="el-year-picker__header">
              <button type="button" class="el-picker-panel__icon-btn" @click="prevYearPage">
                &lt;&lt;
              </button>
              <span class="el-year-picker__header-label">
                {{ yearPickerStartYear }} - {{ yearPickerStartYear + 9 }}
              </span>
              <button type="button" class="el-picker-panel__icon-btn" @click="nextYearPage">
                &gt;&gt;
              </button>
            </div>
            <div class="el-year-picker__content">
              <div
                v-for="year in yearList"
                :key="year"
                class="el-year-picker__item"
                :class="{ 'is-current': year === currentYear }"
                @click="selectYear(year, $event)"
              >
                {{ year }}
              </div>
            </div>
          </div>

          <!-- 月份选择器 -->
          <div v-else-if="showMonthPicker" class="el-month-picker">
            <div class="el-month-picker__header">
              <button type="button" class="el-picker-panel__icon-btn" @click="prevYear">
                &lt;&lt;
              </button>
              <span class="el-month-picker__header-label" @click="showYearSelector($event)">
                {{ currentYear }}
              </span>
              <button type="button" class="el-picker-panel__icon-btn" @click="nextYear">
                &gt;&gt;
              </button>
            </div>
            <div class="el-month-picker__content">
              <div
                v-for="(monthName, index) in t.monthNames"
                :key="index"
                class="el-month-picker__item"
                :class="{ 'is-current': index === currentMonth }"
                @click="selectMonth(index, $event)"
              >
                {{ monthName }}
              </div>
            </div>
          </div>

          <!-- 日期选择器 -->
          <div v-else class="el-date-picker__content-wrapper">
            <div class="el-date-picker__header">
              <button type="button" class="el-picker-panel__icon-btn" @click="prevYear">
                &lt;&lt;
              </button>
              <button type="button" class="el-picker-panel__icon-btn" @click="prevMonth">
                &lt;
              </button>
              <span class="el-date-picker__header-label">
                <span class="el-date-picker__header-year" @click="showYearSelector($event)">
                  {{ currentYear }}
                </span>
                <span class="el-date-picker__header-month" @click="showMonthSelector($event)">
                  {{ t.monthNames[currentMonth] }}
                </span>
              </span>
              <button type="button" class="el-picker-panel__icon-btn" @click="nextMonth">
                &gt;
              </button>
              <button type="button" class="el-picker-panel__icon-btn" @click="nextYear">
                &gt;&gt;
              </button>
            </div>

            <div class="el-date-picker__content">
              <!-- 星期标题 -->
              <div class="el-date-table__header">
                <div v-for="day in t.weekDays" :key="day" class="el-date-table__header-cell">
                  {{ day }}
                </div>
              </div>

              <!-- 日期网格 -->
              <div class="el-date-table__body">
                <div
                  v-for="day in calendarDays"
                  :key="`${day.date.getTime()}`"
                  class="el-date-table__cell"
                  :class="{
                    'is-other-month': !day.isCurrentMonth,
                    'is-today': day.isToday,
                    'is-selected': day.isSelected,
                    'is-in-range': day.isInRange,
                    'is-range-start': type === 'daterange' && day.dateStr === startValue,
                    'is-range-end': type === 'daterange' && day.dateStr === endValue,
                  }"
                  @click="selectDate(day.dateStr)"
                >
                  <div class="el-date-table__cell-inner">
                    {{ day.day }}
                  </div>
                </div>
              </div>
            </div>

            <!-- 时间选择器输入框（仅在 datetime 模式下显示） -->
            <div v-if="type === 'datetime'" class="el-time-picker-input">
              <label class="el-time-picker-label" for="time-input">{{ t.time }}:</label>
              <input
                id="time-input"
                ref="timeInputRef"
                type="text"
                class="el-time-input"
                :value="selectedTime"
                :placeholder="t.selectTime"
                readonly
                @click="openTimePicker($event)"
                @mousedown.prevent
              />
            </div>

            <!-- 日期选择器确认按钮（仅在 datetime 模式下显示） -->
            <div v-if="type === 'datetime'" class="el-date-picker-footer">
              <button
                class="el-date-picker-btn el-date-picker-btn--confirm"
                @click.stop="confirmDate"
                @mousedown.prevent
              >
                {{ t.confirm }}
              </button>
            </div>
          </div>
        </div>
      </Transition>
    </Teleport>
  </div>
</template>

<style scoped>
@import '../styles/theme-variables.css';

/* Element Plus 风格的日期选择器 */
.el-date-picker {
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
}

/* Element Input 基础样式 */
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-flex;
  width: 100%;
  line-height: 32px;
  box-sizing: border-box;
  vertical-align: middle;
  height: 44px;
}

.el-input__wrapper {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-color: var(--gantt-bg-primary, #ffffff);
  background-image: none;
  border-radius: 4px;
  cursor: text;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform: translate3d(0, 0, 0);
  box-shadow: 0 0 0 1px var(--gantt-border-color, #dcdfe6) inset;
}

.el-input__inner {
  width: 100%;
  flex-grow: 1;
  appearance: none;
  -webkit-appearance: none;
  color: var(--gantt-text-primary, #606266);
  font-size: inherit;
  height: 32px;
  line-height: 32px;
  padding: 0;
  outline: none;
  border: none;
  background: none;
  box-sizing: border-box;
}

.el-input__inner-input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  margin: 0;
}

.el-input__inner-input::-webkit-calendar-picker-indicator {
  display: none;
}

.el-input__inner-input::placeholder {
  color: var(--gantt-text-placeholder, #c0c4cc);
}

.el-input__suffix {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  color: var(--gantt-text-placeholder, #c0c4cc);
  text-align: center;
  transition: all 0.2s;
  pointer-events: none;
}

.el-input__suffix-inner {
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-input__icon {
  height: inherit;
  line-height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
  color: var(--gantt-text-placeholder, #c0c4cc);
}

.el-input__clear {
  height: inherit;
  line-height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--gantt-text-placeholder, #c0c4cc);
  transition: all 0.2s;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
}

.el-input__clear:hover {
  color: var(--gantt-text-regular, #909399);
}

.el-icon {
  width: 14px;
  height: 14px;
  font-size: 14px;
  fill: currentColor;
  overflow: hidden;
}

/* 日期范围选择器样式 */
.el-range-input {
  appearance: none;
  border: none;
  outline: none;
  display: inline-flex;
  position: relative;
  font-size: inherit;
  line-height: inherit;
  width: 100%;
}

.el-range-input__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  flex-grow: 1;
}

.el-range-input__start,
.el-range-input__end {
  appearance: none;
  border: none;
  outline: none;
  display: inline-block;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 0;
  flex-grow: 1;
  box-sizing: border-box;
  font-size: inherit;
  color: var(--gantt-text-primary, #606266);
  background: transparent;
  text-align: center;
  border-radius: 0;
  min-width: 0;
}

.el-range-input__start::-webkit-calendar-picker-indicator,
.el-range-input__end::-webkit-calendar-picker-indicator {
  display: none;
}

.el-range-input__start::placeholder,
.el-range-input__end::placeholder {
  color: var(--gantt-text-placeholder, #c0c4cc);
}

.el-range-separator {
  flex-shrink: 0;
  line-height: 32px;
  padding: 0 5px;
  color: var(--gantt-text-primary, #606266);
  text-align: center;
  font-size: 14px;
}

/* 尺寸变体 */
.el-date-picker--small .el-input {
  line-height: 24px;
}

.el-date-picker--small .el-input__wrapper {
  padding: 1px 7px;
}

.el-date-picker--small .el-input__inner {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-date-picker--small .el-range-separator {
  line-height: 24px;
  font-size: 12px;
}

.el-date-picker--small .el-icon {
  width: 12px;
  height: 12px;
  font-size: 12px;
}

.el-date-picker--large .el-input {
  line-height: 40px;
}

.el-date-picker--large .el-input__wrapper {
  padding: 1px 15px;
}

.el-date-picker--large .el-input__inner {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}

.el-date-picker--large .el-range-separator {
  line-height: 40px;
  font-size: 16px;
}

.el-date-picker--large .el-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/* 状态样式 */
.el-date-picker.is-focused .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--gantt-primary, #409eff) inset;
}

.el-date-picker:hover .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--gantt-border-hover, #c0c4cc) inset;
}

.el-date-picker.is-focused:hover .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--gantt-primary, #409eff) inset;
}

.el-date-picker.is-disabled .el-input__wrapper {
  background-color: var(--gantt-bg-disabled, #f5f7fa);
  box-shadow: 0 0 0 1px var(--gantt-border-light, #e4e7ed) inset;
  color: var(--gantt-text-placeholder, #c0c4cc);
  cursor: not-allowed;
}

.el-date-picker.is-disabled .el-input__inner,
.el-date-picker.is-disabled .el-range-input__start,
.el-date-picker.is-disabled .el-range-input__end {
  color: var(--gantt-text-placeholder, #c0c4cc);
  cursor: not-allowed;
}

/* 错误状态 */
.el-date-picker.is-error .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--gantt-danger, #f56c6c) inset;
}

.el-date-picker.is-error.is-focused .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--gantt-danger, #f56c6c) inset;
}

/* 暗黑模式适配 */
:global(.gantt-root[data-theme='dark']) .el-input__wrapper {
  background-color: var(--gantt-bg-secondary, #2c2c2c);
  box-shadow: 0 0 0 1px var(--gantt-border-dark, #414243) inset;
}

:global(.gantt-root[data-theme='dark']) .el-input__inner,
:global(.gantt-root[data-theme='dark']) .el-range-input__start,
:global(.gantt-root[data-theme='dark']) .el-range-input__end,
:global(.gantt-root[data-theme='dark']) .el-range-separator {
  color: var(--gantt-text-white, #ffffff);
}

:global(.gantt-root[data-theme='dark']) .el-input__inner-input::placeholder,
:global(.gantt-root[data-theme='dark']) .el-range-input__start::placeholder,
:global(.gantt-root[data-theme='dark']) .el-range-input__end::placeholder {
  color: var(--gantt-text-muted, #9e9e9e);
}

:global(.gantt-root[data-theme='dark']) .el-date-picker.is-focused .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--gantt-primary, #409eff) inset;
}

:global(.gantt-root[data-theme='dark']) .el-date-picker:hover .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--gantt-border-hover, #606266) inset;
}

:global(.gantt-root[data-theme='dark']) .el-date-picker.is-focused:hover .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--gantt-primary, #409eff) inset;
}

:global(.gantt-root[data-theme='dark']) .el-date-picker.is-disabled .el-input__wrapper {
  background-color: var(--gantt-bg-disabled, #3c3e40);
  box-shadow: 0 0 0 1px var(--gantt-border-disabled, #4c4d4f) inset;
}

:global(.gantt-root[data-theme='dark']) .el-date-picker.is-disabled .el-input__inner,
:global(.gantt-root[data-theme='dark']) .el-date-picker.is-disabled .el-range-input__start,
:global(.gantt-root[data-theme='dark']) .el-date-picker.is-disabled .el-range-input__end {
  color: var(--gantt-text-disabled, #73767a);
}

:global(.gantt-root[data-theme='dark']) .el-input__clear:hover {
  color: var(--gantt-text-secondary, #909399);
}

/* 日期选择器面板样式 */
.el-picker-panel {
  position: fixed;
  background: var(--gantt-bg-primary, #ffffff);
  border: 1px solid var(--gantt-border-color, #e4e7ed);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin-top: 4px;
  min-width: 280px;
  padding: 8px;
  user-select: none;
  z-index: 10000;
}

.el-date-picker__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--gantt-border-light, #ebeef5);
  margin-bottom: 8px;
}

.el-date-picker__header-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--gantt-text-primary, #303133);
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.el-date-picker__header-year,
.el-date-picker__header-month {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.el-date-picker__header-year:hover,
.el-date-picker__header-month:hover {
  background: var(--gantt-bg-hover, #f5f7fa);
  color: var(--gantt-primary, #409eff);
}

/* 年份选择器样式 */
.el-year-picker {
  min-width: 280px;
  animation: fadeIn 0.2s ease-in-out;
}

.el-year-picker__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--gantt-border-light, #ebeef5);
  margin-bottom: 8px;
}

.el-year-picker__header-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--gantt-text-primary, #303133);
  flex: 1;
  text-align: center;
}

.el-year-picker__content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
}

.el-year-picker__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  color: var(--gantt-text-primary, #606266);
  transition: all 0.2s;
}

.el-year-picker__item:hover {
  background: var(--gantt-bg-hover, #f5f7fa);
  color: var(--gantt-primary, #409eff);
  transform: scale(1.05);
}

.el-year-picker__item.is-current {
  background: var(--gantt-primary, #409eff);
  color: #ffffff;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

/* 月份选择器样式 */
.el-month-picker {
  min-width: 280px;
  animation: fadeIn 0.2s ease-in-out;
}

.el-month-picker__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--gantt-border-light, #ebeef5);
  margin-bottom: 8px;
}

.el-month-picker__header-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--gantt-text-primary, #303133);
  flex: 1;
  text-align: center;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.el-month-picker__header-label:hover {
  background: var(--gantt-bg-hover, #f5f7fa);
  color: var(--gantt-primary, #409eff);
}

.el-month-picker__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
}

.el-month-picker__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  color: var(--gantt-text-primary, #606266);
  transition: all 0.2s;
}

.el-month-picker__item:hover {
  background: var(--gantt-bg-hover, #f5f7fa);
  color: var(--gantt-primary, #409eff);
  transform: scale(1.05);
}

.el-month-picker__item.is-current {
  background: var(--gantt-primary, #409eff);
  color: #ffffff;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}

.el-picker-panel__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  color: var(--gantt-text-regular, #909399);
  transition: all 0.2s;
  outline: none;
  font-size: 14px;
  font-weight: bold;
  font-family: monospace;
}

.el-picker-panel__icon-btn:hover {
  background: var(--gantt-bg-hover, #f5f7fa);
  color: var(--gantt-text-primary, #303133);
}

.el-date-picker__content {
  padding: 0;
}

.el-date-table__header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-bottom: 4px;
}

.el-date-table__header-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  font-size: 12px;
  font-weight: 400;
  color: var(--gantt-text-regular, #909399);
  text-align: center;
}

.el-date-table__body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}

.el-date-table__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
}

.el-date-table__cell:hover {
  background: var(--gantt-bg-hover, #f5f7fa);
}

.el-date-table__cell-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--gantt-text-primary, #606266);
  transition: all 0.2s;
}

/* 其他月份的日期 */
.el-date-table__cell.is-other-month .el-date-table__cell-inner {
  color: var(--gantt-text-placeholder, #c0c4cc);
}

/* 今天 */
.el-date-table__cell.is-today .el-date-table__cell-inner {
  color: var(--gantt-primary, #409eff);
  font-weight: 500;
}

/* 选中的日期 */
.el-date-table__cell.is-selected .el-date-table__cell-inner {
  background: var(--gantt-primary, #409eff);
  color: #ffffff;
  font-weight: 500;
}

/* 日期范围的起始点 */
.el-date-table__cell.is-range-start .el-date-table__cell-inner {
  background: var(--gantt-primary, #409eff);
  color: #ffffff;
  font-weight: 500;
}

/* 日期范围的结束点 */
.el-date-table__cell.is-range-end .el-date-table__cell-inner {
  background: var(--gantt-primary, #409eff);
  color: #ffffff;
  font-weight: 500;
}

/* 日期范围内的日期 */
.el-date-table__cell.is-in-range {
  background: var(--gantt-primary-light, #ecf5ff);
}

.el-date-table__cell.is-in-range .el-date-table__cell-inner {
  color: var(--gantt-primary, #409eff);
}

/* 确保选中的日期优先级更高 */
.el-date-table__cell.is-range-start,
.el-date-table__cell.is-range-end {
  background: transparent;
}

.el-date-table__cell.is-range-start.is-in-range,
.el-date-table__cell.is-range-end.is-in-range {
  background: var(--gantt-primary-light, #ecf5ff);
}

/* 日期选择器确认按钮样式 */
.el-date-picker-footer {
  padding: 8px 0 0;
  border-top: 1px solid var(--gantt-border-light, #ebeef5);
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.el-date-picker-btn {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid;
  outline: none;
  height: 24px;
  line-height: 14px;
}

.el-date-picker-btn--confirm {
  background: var(--gantt-primary, #409eff);
  border-color: var(--gantt-primary, #409eff);
  color: #ffffff;
}

.el-date-picker-btn--confirm:hover {
  background: var(--gantt-primary-dark, #337ecc);
  border-color: var(--gantt-primary-dark, #337ecc);
}

/* 暗黑模式下的日期选择器面板 */
:global(.gantt-root[data-theme='dark']) .el-picker-panel {
  background: var(--gantt-bg-secondary, #2c2c2c);
  border-color: var(--gantt-border-dark, #414243);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

:global(.gantt-root[data-theme='dark']) .el-date-picker__header {
  border-bottom-color: var(--gantt-border-dark, #414243);
}

:global(.gantt-root[data-theme='dark']) .el-date-picker__header-label {
  color: var(--gantt-text-white, #ffffff);
}

:global(.gantt-root[data-theme='dark']) .el-picker-panel__icon-btn {
  color: var(--gantt-text-secondary, #909399);
}

:global(.gantt-root[data-theme='dark']) .el-picker-panel__icon-btn:hover {
  background: var(--gantt-bg-hover-dark, #3c3e40);
  color: var(--gantt-text-white, #ffffff);
}

:global(.gantt-root[data-theme='dark']) .el-date-table__header-cell {
  color: var(--gantt-text-secondary, #909399);
}

:global(.gantt-root[data-theme='dark']) .el-date-table__cell:hover {
  background: var(--gantt-bg-hover-dark, #3c3e40);
}

:global(.gantt-root[data-theme='dark']) .el-date-table__cell-inner {
  color: var(--gantt-text-white, #ffffff);
}

:global(.gantt-root[data-theme='dark']) .el-date-table__cell.is-other-month .el-date-table__cell-inner {
  color: var(--gantt-text-muted, #73767a);
}

:global(.gantt-root[data-theme='dark']) .el-date-table__cell.is-in-range {
  background: rgba(64, 158, 255, 0.2);
}

/* 暗黑模式下的日期选择器确认按钮 */
:global(.gantt-root[data-theme='dark']) .el-date-picker-footer {
  border-top-color: var(--gantt-border-dark, #414243);
}

/* 响应式适配 */
@media (max-width: 768px) {
  .el-date-picker--large .el-input {
    line-height: 36px;
  }

  .el-date-picker--large .el-input__inner {
    height: 36px;
    line-height: 36px;
    font-size: 14px;
  }

  .el-date-picker--large .el-range-separator {
    line-height: 36px;
    font-size: 14px;
  }

  .el-picker-panel {
    min-width: 260px;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 日期选择器内容包装器动画 */
.el-date-picker__content-wrapper {
  animation: fadeIn 0.2s ease-in-out;
}

/* 面板进入/离开过渡 */
.picker-fade-enter-active,
.picker-fade-leave-active {
  transition: all 0.2s ease;
}

.picker-fade-enter-from {
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
}

.picker-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
}

.picker-fade-enter-to,
.picker-fade-leave-from {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 时间选择器样式 */
.el-time-picker-input {
  padding: 8px 0;
  border-top: 1px solid var(--gantt-border-light, #ebeef5);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.el-time-picker-label {
  font-size: 12px;
  color: var(--gantt-text-regular, #909399);
  font-weight: 500;
  min-width: 30px;
}

.el-time-input {
  flex: 1;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--gantt-border-color, #dcdfe6);
  border-radius: 4px;
  font-size: 12px;
  color: var(--gantt-text-primary, #606266);
  background: var(--gantt-bg-primary, #ffffff);
  cursor: pointer;
  transition: all 0.2s;
}

.el-time-input:hover {
  border-color: var(--gantt-border-hover, #c0c4cc);
}

.el-time-input:focus {
  outline: none;
  border-color: var(--gantt-primary, #409eff);
}

.el-time-picker-panel {
  position: fixed;
  background: var(--gantt-bg-primary, #ffffff);
  border: 1px solid var(--gantt-border-color, #e4e7ed);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10002;
  width: 180px;
  user-select: none;
  padding: 8px;
}

.el-time-picker-header {
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--gantt-border-light, #ebeef5);
  margin-bottom: 8px;
  text-align: center;
}

.el-time-picker-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--gantt-text-primary, #303133);
}

.el-time-picker-content {
  padding: 0;
  display: flex;
  gap: 4px;
  justify-content: center;
}

.el-time-column {
  flex: 0 0 50px;
  text-align: center;
}

.el-time-column-header {
  font-size: 12px;
  font-weight: 500;
  color: var(--gantt-text-primary, #606266);
  margin-bottom: 4px;
}

.el-time-column-list {
  max-height: 160px;
  overflow-y: auto;
  border-radius: 4px;
  /* 隐藏滚动条，但保持滚动功能 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.el-time-column-list::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* 鼠标悬停时显示滚动条 */
.el-time-column-list:hover {
  scrollbar-width: thin;
}

.el-time-column-list:hover::-webkit-scrollbar {
  width: 4px;
}

.el-time-column-list:hover::-webkit-scrollbar-track {
  background: transparent;
}

.el-time-column-list:hover::-webkit-scrollbar-thumb {
  background: var(--gantt-border-color, #dcdfe6);
  border-radius: 2px;
}

.el-time-item {
  height: 28px;
  line-height: 28px;
  cursor: pointer;
  font-size: 12px;
  color: var(--gantt-text-primary, #606266);
  transition: all 0.2s;
}

.el-time-item:hover {
  background: var(--gantt-bg-hover, #f5f7fa);
  color: var(--gantt-primary, #409eff);
}

.el-time-item.is-active {
  background: var(--gantt-primary, #409eff);
  color: #ffffff;
  font-weight: 500;
}

.el-time-picker-footer {
  padding: 8px 0 0;
  border-top: 1px solid var(--gantt-border-light, #ebeef5);
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.el-time-picker-btn {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid;
  outline: none;
  height: 24px;
  line-height: 14px;
}

.el-time-picker-btn--cancel {
  background: var(--gantt-bg-primary, #ffffff);
  border-color: var(--gantt-border-color, #dcdfe6);
  color: var(--gantt-text-primary, #606266);
}

.el-time-picker-btn--cancel:hover {
  background: var(--gantt-bg-hover, #f5f7fa);
  border-color: var(--gantt-border-hover, #c0c4cc);
}

.el-time-picker-btn--confirm {
  background: var(--gantt-primary, #409eff);
  border-color: var(--gantt-primary, #409eff);
  color: #ffffff;
}

.el-time-picker-btn--confirm:hover {
  background: var(--gantt-primary-dark, #337ecc);
  border-color: var(--gantt-primary-dark, #337ecc);
}

/* 暗黑模式下的时间选择器 */
:global(.gantt-root[data-theme='dark']) .el-time-picker-input {
  border-top-color: var(--gantt-border-dark, #414243);
}

:global(.gantt-root[data-theme='dark']) .el-time-picker-label {
  color: var(--gantt-text-secondary, #909399);
}

:global(.gantt-root[data-theme='dark']) .el-time-input {
  background: var(--gantt-bg-secondary, #2c2c2c);
  border-color: var(--gantt-border-dark, #414243);
  color: var(--gantt-text-white, #ffffff);
}

:global(.gantt-root[data-theme='dark']) .el-time-input:hover {
  border-color: var(--gantt-border-hover, #606266);
}

:global(.gantt-root[data-theme='dark']) .el-time-picker-panel {
  background: var(--gantt-bg-secondary, #2c2c2c);
  border-color: var(--gantt-border-dark, #414243);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

:global(.gantt-root[data-theme='dark']) .el-time-picker-header {
  border-bottom-color: var(--gantt-border-dark, #414243);
}

:global(.gantt-root[data-theme='dark']) .el-time-picker-title {
  color: var(--gantt-text-white, #ffffff);
}

:global(.gantt-root[data-theme='dark']) .el-time-column-header {
  color: var(--gantt-text-white, #ffffff);
}

:global(.gantt-root[data-theme='dark']) .el-time-column-list {
  border-color: var(--gantt-border-dark, #414243);
}

:global(.gantt-root[data-theme='dark']) .el-time-column-list:hover::-webkit-scrollbar-thumb {
  background: var(--gantt-border-hover, #606266);
}

:global(.gantt-root[data-theme='dark']) .el-time-item {
  color: var(--gantt-text-white, #ffffff);
}

:global(.gantt-root[data-theme='dark']) .el-time-item:hover {
  background: var(--gantt-bg-hover-dark, #3c3e40);
}

:global(.gantt-root[data-theme='dark']) .el-time-picker-footer {
  border-top-color: var(--gantt-border-dark, #414243);
}

:global(.gantt-root[data-theme='dark']) .el-time-picker-btn--cancel {
  background: var(--gantt-bg-secondary, #2c2c2c);
  border-color: var(--gantt-border-dark, #414243);
  color: var(--gantt-text-white, #ffffff);
}

:global(.gantt-root[data-theme='dark']) .el-time-picker-btn--cancel:hover {
  background: var(--gantt-bg-hover-dark, #3c3e40);
  border-color: var(--gantt-border-hover, #606266);
}
</style>
