<!-- 在筛选中使用的日期选择器（可选择今天、本周等范围） -->
<template>
  <a-space :id="formItemId" :class="[prefixCls]" direction="vertical">
    <a-space-compact block>
      <!-- 日期范围下拉 -->
      <a-select v-if="isRange" v-model:value="innerValue">
        <a-select-option v-for="opt of RANGE_OPTIONS" :key="opt.key" :value="opt.key">
          {{ opt.label }}
        </a-select-option>
        <a-select-option key="custom" value="custom">
          自定义日期
        </a-select-option>
      </a-select>
      <!-- 自定义日期选择器 -->
      <DatePicker v-else v-model:value="innerValue" v-model:open="datePickerIsOpen" v-bind="attrs"/>
      <!-- 右侧下拉菜单 -->
      <a-dropdown v-if="allowSelectRange" :trigger="['click']">
        <a-button preIcon="ant-design:menu-unfold"/>
        <template #overlay>
          <a-menu @click="onMenuClick">
            <a-menu-item v-for="opt of RANGE_OPTIONS" :key="opt.key">
              {{ opt.label }}
            </a-menu-item>
            <a-menu-item key="custom">
              自定义日期
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </a-space-compact>
  </a-space>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: 'DatePickerInFilter',
  inheritAttrs: false,
})
</script>

<script lang="ts" setup>
import {ref, watch, computed, nextTick, useAttrs, defineProps} from 'vue'
import {DatePicker} from 'ant-design-vue'
import {useDesign} from '/@/hooks/web/useDesign';
import { Form } from 'ant-design-vue';
const formItemContext = Form.useInjectFormItemContext();

// 日期范围选项
const RANGE_OPTIONS = [
  {key: 'TODAY', label: '今天'},
  {key: 'YESTERDAY', label: '昨天'},
  {key: 'TOMORROW', label: '明天'},
  {key: 'THIS_WEEK', label: '本周'},
  {key: 'LAST_WEEK', label: '上周'},
  {key: 'NEXT_WEEK', label: '下周'},
  {key: 'LAST_7_DAYS', label: '过去七天'},
  {key: 'THIS_MONTH', label: '本月'},
  {key: 'LAST_MONTH', label: '上月'},
  {key: 'NEXT_MONTH', label: '下月'},
];
const RANGE_OPTION_KEYS = RANGE_OPTIONS.map(item => item.key)

const {prefixCls} = useDesign('j-data-picker-in-filter');
const props = defineProps({
  value: {
    type: [String],
    default: ''
  },
  // 是否允许选择预设范围
  allowSelectRange: {
    type: Boolean,
    default: true,
  }
})
const emit = defineEmits(['change', 'update:value'])
const attrs = useAttrs()

// 组件id
const formItemId  = computed(() => formItemContext.id.value)

const innerValue = ref(props.value)
// 是否打开日期选择器
const datePickerIsOpen = ref(false)

// 判断是否为范围选项
const isRange = computed(() => RANGE_OPTION_KEYS.includes(innerValue.value));

// 同步value
watch(() => props.value, (val) => {
  innerValue.value = val
})

// emit 更改
watch(innerValue, (val) => {
  if (val === 'custom') {
    val = ''
    openDatePicker()
  }
  emit('change', val)
  emit('update:value', val)
  // update-begin--author:liaozhiyang---date:20240509---for：【QQYUN-9227】日期校验没清空
  formItemContext?.onFieldChange();
  // update-end--author:liaozhiyang---date:20240509---for：【QQYUN-9227】日期校验没清空
})

watch(() => props.allowSelectRange, (allow) => {
  // 如果不允许选择范围，且当前值为范围选项，则清空值
  if (!allow && isRange.value) {
    innerValue.value = ''
  }
}, {immediate: true});

// 点击右侧下拉菜单
function onMenuClick(event: Recordable) {
  if (event.key === 'custom') {
    if (isRange.value) {
      innerValue.value = '';
    }
    openDatePicker()
  } else {
    innerValue.value = event.key
  }
}

// 打开日期选择器下拉
async function openDatePicker() {
  await nextTick()
  datePickerIsOpen.value = true
}

</script>

<style lang="less">
//noinspection LessUnresolvedVariable
@prefix-cls: ~'@{namespace}-j-data-picker-in-filter';

.@{prefix-cls} {
  width: 100%;
}
</style>