<template>
  <div class="time-filter">
    <el-checkbox-group class="checkbox-group" v-model="selectedValues" @change="handleChange">
      <el-checkbox class="filter-checkbox" v-for="option in options" :key="option.value" :label="option.value"
        :disabled="option.disabled">
        {{ option.label }}
      </el-checkbox>
    </el-checkbox-group>

    <!-- 自定义日期选择器，仅在选中“自定义”时显示 -->
    <div v-if="showCustomPicker" class="custom-date-picker">
      <el-date-picker v-model="customDateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="handleCustomDateChange"
        style="width: 100%;" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'

// Props 定义
const props = defineProps({
  // 外部控制选中值（支持 v-model）
  modelValue: {
    type: Array,
    default: () => []
  },
  // 外部控制自定义日期范围
  customDate: {
    type: Array,
    default: () => []
  }
})

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

// 响应式数据
const selectedValues = ref([])     // 当前选中的选项值数组
const customDateRange = ref([])    // 自定义日期范围 [start, end]
const options = ref([])            // 动态生成的选项列表

// 是否显示自定义日期选择器
const showCustomPicker = computed(() => {
  return selectedValues.value.includes('custom')
})

// 生成选项列表：全部时间 + 最近5个年份 + 自定义
const initOptions = () => {
  const currentYear = new Date().getFullYear()
  // 生成最近5个年份（包含当前年份）
  const recentYears = []
  for (let i = 0; i < 5; i++) {
    recentYears.push(currentYear - i)
  }
  // 年份选项（倒序展示，从大到小）
  const yearOptions = recentYears.map(year => ({
    label: `${year}年`,
    value: String(year)
  }))

  options.value = [
    { label: '全部时间', value: 'all' },
    ...yearOptions,
    { label: '自定义', value: 'custom' }
  ]
}

// 向上层派发事件
const emitChange = () => {
  const eventData = {
    type: 'time',
    value: selectedValues.value[0], // 单选，只有一个值
    customRange: selectedValues.value.includes('custom') ? customDateRange.value : []
  }

  emit('update:modelValue', selectedValues.value)
  emit('update:customDate', customDateRange.value)
  emit('change', eventData)
}

// 选项变化处理（单选逻辑）
const handleChange = (selected) => {
  // 实现单选逻辑
  let lastSelected = null

  if (selected.length > selectedValues.value.length) {
    // 新增了选项：找到新增的那个
    const added = selected.find(v => !selectedValues.value.includes(v))
    lastSelected = added
  } else if (selected.length < selectedValues.value.length) {
    // 移除了选项：选中“全部时间”
    lastSelected = 'all'
  } else if (selected.length === 1 && selectedValues.value.length === 1 && selected[0] !== selectedValues.value[0]) {
    // 直接替换场景
    lastSelected = selected[0]
  } else if (selected.length > 1) {
    // 多选时，只保留最后一个选中的
    lastSelected = selected[selected.length - 1]
  }

  if (lastSelected) {
    selectedValues.value = [lastSelected]
  } else if (selected.length === 0) {
    // 全部取消，默认给“全部时间”
    selectedValues.value = ['all']
  } else {
    // 确保只有一个
    selectedValues.value = selected.slice(0, 1)
  }

  // 如果选中的不是“自定义”，清空自定义日期范围
  if (!selectedValues.value.includes('custom')) {
    customDateRange.value = []
  }

  emitChange()
}

// 自定义日期范围变化处理
const handleCustomDateChange = (val) => {
  if (val && val.length === 2) {
    customDateRange.value = [...val]
  } else {
    customDateRange.value = []
  }
  emitChange()
}

// 重置方法（供外部调用）
const reset = () => {
  selectedValues.value = ['all']
  customDateRange.value = []
  emitChange()
}

// 获取当前筛选条件描述（供外部调用）
const getFilterDescription = () => {
  const selectedVal = selectedValues.value[0]
  if (selectedVal === 'all') {
    return '全部时间'
  } else if (selectedVal === 'custom') {
    if (customDateRange.value && customDateRange.value.length === 2) {
      return `${customDateRange.value[0]} 至 ${customDateRange.value[1]}`
    } else {
      return '自定义（未选择日期）'
    }
  } else {
    return `${selectedVal}年`
  }
}

// 暴露方法给父组件
defineExpose({
  reset,
  getFilterDescription
})

// 监听外部传入的 modelValue 变化
watch(() => props.modelValue, (newVal) => {
  if (JSON.stringify(newVal) !== JSON.stringify(selectedValues.value)) {
    selectedValues.value = [...newVal]
  }
}, { immediate: true })

// 监听外部传入的自定义日期变化
watch(() => props.customDate, (newVal) => {
  if (JSON.stringify(newVal) !== JSON.stringify(customDateRange.value)) {
    customDateRange.value = [...newVal]
  }
}, { immediate: true })

// 初始化
onMounted(() => {
  initOptions()
  // 初始化选中值：如果外部没有传入，默认选中“全部时间”
  if (!props.modelValue || props.modelValue.length === 0) {
    selectedValues.value = ['all']
  } else {
    selectedValues.value = [...props.modelValue]
  }
})
</script>

<style lang="scss" scoped>
.time-filter {
  // display: flex;
  // flex-direction: column;
  // gap: 12px;
  width: 100%;

  .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .filter-checkbox {
      width: 50%;
      margin-right: 0;
      margin-bottom: 4px;
      // background: orange;

      :deep(.el-checkbox__label) {
        color: var(--text-primary-65-color);
        font-size: var(--font-size-base);
        font-weight: 400;
        font-family: "Microsoft YaHei";
        line-height: 24px;
      }
    }
  }
}

.custom-date-picker {
  width: 100%;
  margin-top: 8px;

}
</style>