<template>
  <div class="base-date-time-picker">
    <!-- 使用 van-field 作为展示区域 - 修复 bug1：改为 modelValue -->
    <van-field
      v-model="displayValue"
      :label="label"
      :placeholder="placeholder"
      :disabled="disabled"
      :readonly="true"
      :right-icon="rightIcon"
      :clickable="!disabled"
      @click="openPicker"
    />

    <!-- 弹出层：同时包含日期和时间选择器 -->
    <van-popup v-model:show="showPicker" position="bottom" round>
      <div class="picker-container">
        <div class="picker-header">
          <span class="picker-cancel" @click="showPicker = false">取消</span>
          <span class="picker-title">{{ pickerTitle }}</span>
          <span class="picker-confirm" @click="onConfirm">确定</span>
        </div>
        
        <div class="picker-wrapper" :class="{ 'has-time': hasTime }">
          <!-- 日期选择器 -->
          <van-date-picker
            v-model="currentDate"
            :min-date="minDate"
            :max-date="maxDate"
            :columns-type="dateColumnsType"
            :formatter="formatter"
            :filter="filter"
            :loading="loading"
            :show-toolbar="false"
          />
          
          <!-- 时间选择器（当有小时列时显示） -->
          <van-time-picker
            v-if="hasTime"
            v-model="currentTime"
            :columns-type="timeColumnsType"
            :min-hour="minHour"
            :max-hour="maxHour"
            :min-minute="minMinute"
            :max-minute="maxMinute"
            :formatter="formatter"
            :show-toolbar="false"
          />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Field, Popup, DatePicker, TimePicker } from 'vant'

// Props 定义
const props = defineProps({
  // 双向绑定值 (v-model)
  modelValue: {
    type: String,
    default: ''
  },
  // 左侧标签文字
  label: {
    type: String,
    default: ''
  },
  // 占位符
  placeholder: {
    type: String,
    default: '请选择日期时间'
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // Picker 顶部标题
  pickerTitle: {
    type: String,
    default: '选择日期时间'
  },
  // 列类型：支持 'year', 'month', 'day', 'hour', 'minute', 'second'
  columnsType: {
    type: Array,
    default: () => ['year', 'month', 'day', 'hour', 'minute']
  },
  // 最小日期
  minDate: {
    type: Date,
    default: () => new Date(1900, 0, 1)
  },
  // 最大日期
  maxDate: {
    type: Date,
    default: () => new Date(2100, 11, 31)
  },
  // 最小小时
  minHour: {
    type: Number,
    default: 0
  },
  // 最大小时
  maxHour: {
    type: Number,
    default: 23
  },
  // 最小分钟
  minMinute: {
    type: Number,
    default: 0
  },
  // 最大分钟
  maxMinute: {
    type: Number,
    default: 59
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  },
  // 右侧图标
  rightIcon: {
    type: String,
    default: 'arrow-down'
  },
  // 日期时间格式化函数
  formatter: {
    type: Function,
    default: (type, option) => {
      if (type === 'year') option.text += '年'
      if (type === 'month') option.text += '月'
      if (type === 'day') option.text += '日'
      if (type === 'hour') option.text += '时'
      if (type === 'minute') option.text += '分'
      if (type === 'second') option.text += '秒'
      return option
    }
  },
  // 选项过滤函数
  filter: {
    type: Function,
    default: null
  }
})

// Emits 定义
const emit = defineEmits(['update:modelValue', 'change'])

// 控制弹出层显示
const showPicker = ref(false)

// 当前选中的日期（数组格式，如 ['2024', '01', '01']）
const currentDate = ref([])

// 当前选中的时间（数组格式，如 ['14', '30', '00']）
const currentTime = ref([])

// 分离日期列类型和时间列类型
const dateColumnsType = computed(() => {
  return props.columnsType.filter(col => ['year', 'month', 'day'].includes(col))
})

const timeColumnsType = computed(() => {
  return props.columnsType.filter(col => ['hour', 'minute', 'second'].includes(col))
})

// 是否有时间选择
const hasTime = computed(() => {
  return timeColumnsType.value.length > 0
})

// 格式化日期显示（修复 bug2：正确处理分钟显示）
const displayValue = computed(() => {
  if (!props.modelValue) return ''
  
  // 根据 columnsType 格式化显示
  const hasYear = props.columnsType.includes('year')
  const hasMonth = props.columnsType.includes('month')
  const hasDay = props.columnsType.includes('day')
  const hasHour = props.columnsType.includes('hour')
  const hasMinute = props.columnsType.includes('minute')
  const hasSecond = props.columnsType.includes('second')
  
  // 解析日期时间
  let datePart = ''
  let timePart = ''
  
  if (props.modelValue.includes(' ')) {
    [datePart, timePart] = props.modelValue.split(' ')
  } else if (props.modelValue.includes('-')) {
    datePart = props.modelValue
  } else if (props.modelValue.includes(':')) {
    timePart = props.modelValue
  }
  
  // 格式化日期部分
  let result = ''
  if (datePart && (hasYear || hasMonth || hasDay)) {
    const dateArr = datePart.split('-')
    if (hasYear && dateArr[0]) result += dateArr[0]
    if (hasMonth && dateArr[1]) result += (result ? '-' : '') + dateArr[1]
    if (hasDay && dateArr[2]) result += (result ? '-' : '') + dateArr[2]
  }
  
  // 格式化时间部分 - 修复 bug2：确保分钟正确显示
  if (timePart && (hasHour || hasMinute || hasSecond)) {
    const timeArr = timePart.split(':')
    let timeResult = ''
    if (hasHour && timeArr[0]) timeResult += timeArr[0]
    if (hasMinute && timeArr[1]) timeResult += (timeResult ? ':' : '') + timeArr[1]
    if (hasSecond && timeArr[2]) timeResult += (timeResult ? ':' : '') + timeArr[2]
    
    if (timeResult) {
      result += (result ? ' ' : '') + timeResult
    }
  }
  
  return result || props.modelValue
})

// 获取默认时间值（根据列类型）
const getDefaultTime = () => {
  const now = new Date()
  const timeValues = []
  
  if (timeColumnsType.value.includes('hour')) {
    timeValues.push(String(now.getHours()).padStart(2, '0'))
  }
  if (timeColumnsType.value.includes('minute')) {
    timeValues.push(String(now.getMinutes()).padStart(2, '0'))
  }
  if (timeColumnsType.value.includes('second')) {
    timeValues.push(String(now.getSeconds()).padStart(2, '0'))
  }
  
  return timeValues
}

// 初始化当前值
const initValue = () => {
  // 初始化日期部分
  if (props.modelValue) {
    // 解析 YYYY-MM-DD HH:mm:ss 格式
    let datePart = ''
    let timePart = ''
    
    if (props.modelValue.includes(' ')) {
      [datePart, timePart] = props.modelValue.split(' ')
    } else if (props.modelValue.includes('-')) {
      datePart = props.modelValue
    } else if (props.modelValue.includes(':')) {
      timePart = props.modelValue
    }
    
    if (datePart) {
      const dateArr = datePart.split('-')
      currentDate.value = []
      if (dateColumnsType.value.includes('year') && dateArr[0]) {
        currentDate.value.push(dateArr[0])
      }
      if (dateColumnsType.value.includes('month') && dateArr[1]) {
        currentDate.value.push(dateArr[1])
      }
      if (dateColumnsType.value.includes('day') && dateArr[2]) {
        currentDate.value.push(dateArr[2])
      }
    } else {
      const now = new Date()
      currentDate.value = []
      if (dateColumnsType.value.includes('year')) {
        currentDate.value.push(String(now.getFullYear()))
      }
      if (dateColumnsType.value.includes('month')) {
        currentDate.value.push(String(now.getMonth() + 1).padStart(2, '0'))
      }
      if (dateColumnsType.value.includes('day')) {
        currentDate.value.push(String(now.getDate()).padStart(2, '0'))
      }
    }
    
    // 初始化时间部分（根据列类型）
    if (hasTime.value) {
      if (timePart) {
        const timeArr = timePart.split(':')
        const result = []
        
        if (timeColumnsType.value.includes('hour')) {
          result.push(timeArr[0] || '00')
        }
        if (timeColumnsType.value.includes('minute')) {
          result.push(timeArr[1] || '00')
        }
        if (timeColumnsType.value.includes('second')) {
          result.push(timeArr[2] || '00')
        }
        currentTime.value = result
      } else {
        currentTime.value = getDefaultTime()
      }
    }
  } else {
    // 默认当前日期
    const now = new Date()
    currentDate.value = []
    if (dateColumnsType.value.includes('year')) {
      currentDate.value.push(String(now.getFullYear()))
    }
    if (dateColumnsType.value.includes('month')) {
      currentDate.value.push(String(now.getMonth() + 1).padStart(2, '0'))
    }
    if (dateColumnsType.value.includes('day')) {
      currentDate.value.push(String(now.getDate()).padStart(2, '0'))
    }
    
    // 默认当前时间（根据列类型）
    if (hasTime.value) {
      currentTime.value = getDefaultTime()
    }
  }
}

// 打开选择器
const openPicker = () => {
  if (!props.disabled) {
    initValue()
    showPicker.value = true
  }
}

// 格式化日期部分
const formatDatePart = () => {
  if (!currentDate.value || currentDate.value.length === 0) return ''
  let result = currentDate.value.join('-')
  return result
}

// 格式化时间部分
const formatTimePart = () => {
  if (!hasTime.value) return ''
  if (!currentTime.value || currentTime.value.length === 0) return ''
  let result = currentTime.value.join(':')
  return result
}

// 确认选择
const onConfirm = () => {
  let finalValue = formatDatePart()
  
  if (hasTime.value) {
    const timePart = formatTimePart()
    if (timePart) {
      finalValue += ' ' + timePart
    }
  }
  
  emit('update:modelValue', finalValue)
  emit('change', finalValue)
  showPicker.value = false
}

// 监听外部 modelValue 变化，重新初始化
watch(() => props.modelValue, () => {
  initValue()
}, { immediate: true })
</script>

<style scoped>
.base-date-time-picker {
  width: 100%;
}

:deep(.van-field__control--readonly) {
  cursor: pointer;
}

.picker-container {
  background: #fff;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #ebedf0;
}

.picker-cancel {
  font-size: 14px;
  color: #969799;
  cursor: pointer;
}

.picker-title {
  font-size: 16px;
  font-weight: 500;
  color: #323233;
}

.picker-confirm {
  font-size: 14px;
  color: #1989fa;
  cursor: pointer;
}

.picker-wrapper {
  display: flex;
}

.picker-wrapper .van-picker {
  flex: 1;
}

/* 只有日期选择器时占满宽度 */
.picker-wrapper:not(.has-time) .van-picker {
  width: 100%;
}

/* 同时有日期和时间时调整宽度比例 */
.picker-wrapper.has-time .van-date-picker {
  flex: 2;
}

.picker-wrapper.has-time .van-time-picker {
  flex: 1;
}
</style>