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

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

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

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

/**
 * 值变化时间
 *
 * @private
 * @type {Subject<any>}
 * @memberof AppRangeEditor
 */
const inputDataChang: Subject<any> = new Subject();

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

/**
 * 获取值
 *
 * @param {string} name
 * @returns
 * @memberof AppRangeEditor
 */
const getValue = (name: string) => {
  return props.activeData[name];
};

/**
 * 值改变
 *
 * @param {string} name
 * @param {*} value
 * @memberof AppRangeEditor
 */
const onValueChange = (name: string, $event: any) => {
  let value;
  if (
    Object.is(props.editorType, 'DATEPICKEREX') ||
    Object.is(props.editorType, 'DATEPICKEREX_NOTIME') ||
    Object.is(props.editorType, 'DATEPICKER')
  ) {
    value = $event;
  } else if (props.editorType.startsWith('DATEPICKEREX')) {
    value = $event;
  } else if (Object.is(props.editorType, 'NUMBER')) {
    value = $event;
  } else {
    value = $event.target.value;
  }
  emit('editorEvent', { tag: name, action: 'valueChange', data: value });
};

/**
 * Vue生命周期beforeMount
 */
onBeforeMount(() => {
  inputDataChang.pipe(debounceTime(500), distinctUntilChanged()).subscribe((data: any) => {
    emit('editorEvent', { tag: data.name, action: 'valueChange', data: data.value });
  });
});
</script>

<template>
  <div class="app-range-editor">
    <template v-for="(item, index) in refFormItem">
      <span
        v-if="index > 0"
        class="editor-space"
        :key="index+10"
      >~</span>
      <a-date-picker
        :key="index"
        v-if="Object.is(editorType, 'DATEPICKEREX') || Object.is(editorType, 'DATEPICKEREX_NOTIME') || Object.is(editorType, 'DATEPICKER')"
        picker="date"
        :format="valFormat"
        placeholder="请选择时间..."
        :value="activeData[item]"
        :disabled="disabled"
        :inputReadOnly="readonly"
        @change="(value,type)=>{onValueChange(item,value)}"
      >
      </a-date-picker>
      <a-time-picker
        :key="index+1"
        v-else-if="editorType.startsWith('DATEPICKEREX')"
        :format="valFormat"
        placeholder="请选择时间..."
        :value="activeData[item]"
        :disabled="disabled"
        :inputReadOnly="readonly"
        @change="(value)=>{onValueChange(item,value)}"
      >
      </a-time-picker>
      <a-input-number
        :key="index+2"
        v-else-if="Object.is(editorType, 'NUMBER')"
        :value="activeData[item]"
        :disabled="disabled"
        placeholder="请输入..."
        @change="(value)=>{onValueChange(item,value)}"
      >
      </a-input-number>
      <AppSpan
        :key="index+3"
        v-else-if="Object.is(editorType, 'SPAN')"
        :value="activeData[item]"
        :disabled="disabled"
      >
      </AppSpan>
      <a-input
        :key="index+4"
        v-else
        :value="getValue(item)"
        :disabled="disabled"
        placeholder="请输入..."
        @change="(value)=>{onValueChange(item,value)}"
      >
      </a-input>
    </template>
  </div>
</template>

<style lang="scss">
.app-range-editor {
  display: flex;
  .editor-space {
    padding: 0 5px;
    font-size: 15px;
  }
}
</style>