<template>
  <div class="flex flex-row! items-center">
    <div class="pos-relative!">
      <avue-time
        v-model="startTime"
        :placeholder="`${t('Avue.date.start')}${column.label}`"
        :format="column.format"
        :value-format="column.valueFormat"
        :defaultValue="column.defaultValue"
        :prefixIcon="column.prefixIcon"
        :size="size"
      ></avue-time>
    </div>
    <div class="px-5px">{{ t('Avue.control.to') }}</div>
    <div class="pos-relative!">
      <avue-time 
        v-model="endTime"
        :placeholder="`${t('Avue.date.end')}${column.label}`"
        :format="column.format"
        :value-format="column.valueFormat"
        :defaultValue="column.defaultValue"
        :prefixIcon="column.prefixIcon"
        :size="size"
      ></avue-time>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'InputDateRange' })

interface Column {
  label: string
  format?: string
  valueFormat?: string
  defaultValue?: string
  prefixIcon?:string
  placeholder?: string
}
interface Props {
  column: Column
  size?: 'small' | 'large' | 'default'
  disabled?: boolean
}
const props = defineProps<Props>()
const model = defineModel<string>()
const { t } = useI18n()

const startTime = ref<string | null>(null)
const endTime = ref<string | null>(null)




watch([() => startTime.value, () => endTime.value], (newVal) => {
  const isStart = newVal[0] === null || newVal[0] === undefined
  const isEnd = newVal[1] === null || newVal[1] === undefined
  const str = `${isStart ? null : (newVal[0])},${isEnd ? null : (newVal[1])}`
  model.value = str == 'null,null' ? '' : str
})

watch(
  () => model.value,
  (value) => {
    if (value) {
      const timeList = (value + '').split(',')
      startTime.value = timeList[0] !== undefined && timeList[0] !== 'null' ? timeList[0] : null
      endTime.value = timeList[1] !== undefined && timeList[1] !== 'null' ? timeList[1] : null
    } else {
      startTime.value = null
      endTime.value = null
    }
    if (props.column['onChange']) props.column['onChange']({ value, column: props.column })
    else if (props.column['change']) props.column['change']({ value, column: props.column })
  }
)
</script>

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