<template>
  <a-time-range-picker
    :class="[style && Object.keys(style).length > 0 ? 'customStyle' : '']"
    :size="size"
    v-model:value="modelValue"
    :placeholder="placeholder"
    :format="format"
    :valueFormat="format"
    :allowClear="allowClear"
    :disabled="disabled"
    @change="handleChange"
  />
</template>
<script lang="ts" setup>
  import { ref, watchEffect, inject, watch, computed } from 'vue';
  import { cloneDeep } from 'lodash-es';

  const props = defineProps({
    value: Array,
    size: String,
    placeholder: Array,
    format: String,
    allowClear: Boolean,
    disabled: Boolean,
    startField: String,
    endField: String,
    //子表名
    mainKey: String,
    record: Object,
    style: Object,
  });

  const formModel = inject<any>('formModel', null);
  const modelValue = ref<string[]>([]);
  const emit = defineEmits(['update:value', 'change', 'update:record']);
  watch(
    () => props.value,
    (val: any) => {
      modelValue.value = val || [];
    },
    {
      immediate: true,
    },
  );

  watchEffect(() => {
    let emitData: any = null;
    if (props.mainKey) {
      if (props.record && props.record![props.startField!] && props.record![props.endField!]) {
        emitData = [props.record![props.startField!], props.record![props.endField!]];
      }
    } else {
      if (props.startField && props.endField && Object.keys(formModel).length) {
        emitData =
          !formModel[props.startField] || !formModel[props.endField]
            ? null
            : [formModel[props.startField], formModel[props.endField]];
      }
    }
    emit('update:value', emitData);
  });
  const handleChange = (time) => {
    try {
      const start = time?.length ? time[0] : '';
      const end = time?.length ? time[1] : '';
      if (props.mainKey) {
        const data = cloneDeep(props.record);
        if (data && props.startField && props.endField) {
          data[props.startField!] = start;
          data[props.endField!] = end;
        }
        emit('update:record', data);
      } else {
        if (formModel && props.startField && props.endField) {
          formModel[props.startField!] = start;
          formModel[props.endField!] = end;
        }
      }
    } catch (error) {
      console.log('error: ', error);
    }
    emit('update:value', time);
    emit('change', time);
  };

  const color = computed(() => {
    return props.style?.color;
  });
  const backgroundcolor = computed(() => {
    return props.style
      ? props.style['background-color'] || (props.disabled ? '#f5f5f5' : '#fff')
      : '#fff';
  });
  const border = computed(() => {
    return props.style?.border || '1px solid #d9d9d9';
  });
  const fontsize = computed(() => {
    return props.style ? props.style['font-size'] : '14px';
  });
  const fontstyle = computed(() => {
    return props.style ? props.style['font-style'] : 'normal';
  });
  const width = computed(() => {
    return props.style?.width;
  });
  const height = computed(() => {
    return props.style?.height || '32px';
  });
  const textalign = computed(() => {
    return props.style ? props.style['text-align'] : 'left';
  });
</script>
<style scoped lang="less">
  .customStyle {
    width: v-bind(width);
    border: v-bind(border) !important;
    background-color: v-bind(backgroundcolor);
    height: v-bind(height);

    :deep(.ant-picker-input > input) {
      color: v-bind(color);
      font-size: v-bind(fontsize);
      font-style: v-bind(fontstyle);
      text-align: v-bind(textalign);
    }
  }
</style>
