<script setup lang="ts">
import { IActionParam, IParam } from '@core';
import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';

interface AppDateRangeProps {
  refFormItem: any;
  name: string;
  value: IParam;
  activeData: IParam;
  editorType: string;
  disabled: boolean;
  format?: any;
}
const props = withDefaults(defineProps<AppDateRangeProps>(), {});

//  抛出事件集合
interface EmitEvents {
  (name: 'editorEvent', value: IActionParam): void;
}

//  抛出事件
const emit = defineEmits<EmitEvents>();

/**
 * 处理值格式
 *
 * @readonly
 * @memberof AppDateRange
 */
const valFormat = computed(() => {
  if (props.format) {
    return props.format.replace('YYYY', 'yyyy').replace('DD', 'dd');
  } else {
    return ''
  }
});

/**
 * 处理时间格式 
 *
 * @readonly
 * @memberof AppDateRange
 */
const datetype = computed(() => {
  return Object.is(props.editorType,'DATERANGE') ? 'date' : 'time';
});

/**
 * 获取值
 *
 * @param {string} name
 * @returns
 * @memberof AppDateRange
 */
const curdate = computed({
  get: () => {
      let value: any[] = [];
      props.refFormItem.forEach((foritem: any) => {
        if (props.activeData[foritem]) {
          value.push(props.activeData[foritem]);
        }
      })
      return value;    
  },
  set: (dates:any) => {
        if(dates) {
          dates.forEach((date: any,index: number) => {
            emit('editorEvent', { tag: props.refFormItem[index], action: 'valueChange', data: date });
          });
        } else {
          props.refFormItem.forEach((foritem: any) => {
            emit('editorEvent', { tag: foritem, action: 'valueChange', data: null });
          })
        }
  }
})
</script>

<template>
    <div class="app-date-range">
        <a-range-picker
            v-model='curdate'
            :picker="datetype"
            :format="valFormat"
            :disabled="disabled"
            :readonly="readonly"
            separator="至">
        </a-range-picker>
    </div>
</template>

<style lang="scss">
</style>