<!-- 月/日选择器 -->
<template>
  <div class="editable-table-sort-filter__sort">
    <div class="editable-table-sort-filter__search-title">
      {{ config.label || '筛选' }}
    </div>
    <div class="editable-table-sort-filter__date-picker-content">
      <el-cascader
        clearable
        :value="startDate"
        separator=""
        size="small"
        placeholder="开始日期"
        popper-class="month-day-picker"
        :options="startDateOptions"
        @change="value => handleDateChange(config.prop[0], value)"
      />
      <el-cascader
        clearable
        :value="endDate"
        separator=""
        size="small"
        placeholder="结束日期"
        popper-class="month-day-picker"
        :options="endDateOptions"
        @change="value => handleDateChange(config.prop[1], value)"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  disableOutOfRangeOptions, formatMonthDayPickerValue,
  getMonthDayPickerDefaultOptions
} from './BizMonthDayPicker.helper';
import { computed, toRefs } from 'vue';
import { IFilterMonthDayPicker } from '../../types';

const props = defineProps<{
  config: IFilterMonthDayPicker
  tempFilteredValue: Record<string, string>
}>()
const { config, tempFilteredValue } = toRefs(props)

const emit = defineEmits<{
  (e: 'update:tempFilteredValue', key: string, value: string): void
}>()

const formatDate = (date: string) => {
  if (date) {
    return date
      .split('-')
      // 01 -> 1
      .map(
        (v) => String(Number(v))
      )
  }
  
  return []
}

const startDate = computed(() => {
  const { prop } = config.value;
  return formatDate(tempFilteredValue.value[prop[0]]);
})

const endDate = computed(() => {
  const { prop } = config.value;
  return formatDate(tempFilteredValue.value[prop[1]]);
})

// 开始日期范围限制
const startDateOptions = computed(
  () => {
    if (endDate.value.length === 0) {
      return getMonthDayPickerDefaultOptions();
    }
    
    return disableOutOfRangeOptions({
      date: endDate.value,
      isStartDate: false,
      digits: config.value.limit
    });
  }
);

// 结束日期范围限制
const endDateOptions = computed(
  () => {
    if (startDate.value.length === 0) {
      return getMonthDayPickerDefaultOptions();
    }
    
    return disableOutOfRangeOptions({
      date: startDate.value,
      isStartDate: true,
      digits: config.value.limit
    });
  }
);

/**
 * 选择时间更改统一回调
 */
const handleDateChange = (key: string, value: string[]) => {
  const currentValue = value.length === 0
    ? ''
    : formatMonthDayPickerValue(value)
  emit('update:tempFilteredValue', key, currentValue);
}
</script>

<style scoped lang="less">

</style>
