<template>
  <div class="flex flex-row! items-center">
    <div class="pos-relative!">
      
      
      <el-date-picker
      class="el-date-picker"
        v-model="startDate"
        :placeholder="`${t('Avue.date.start')}${column.label}`"
        :format="column.format"
        :valueFormat="column.valueFormat"
        :defaultValue="column.defaultValue"
        :prefixIcon="column.prefixIcon"
        :disabled-date="startPickerOptions.disabledDate"
        :size="size"
      />
    </div>
    <div class="px-5px">{{ t('Avue.control.to') }}</div>
    <div class="pos-relative!">
     <el-date-picker
        class="el-date-picker"
        v-model="endDate"
        :placeholder="`${t('Avue.date.end')}${column.label}`"
        :format="column.format"
        :valueFormat="column.valueFormat"
        :defaultValue="column.defaultValue"
        :prefixIcon="column.prefixIcon"
        :disabled-date="endPickerOptions.disabledDate"
        :size="size"
      />
    </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 startDate = ref<string | null>(null)
const endDate = ref<string | null>(null)

const getDateZeroTimestamp = (dateStr: string | Date) => {
  const date = new Date(dateStr)

  date.setHours(0, 0, 0, 0)
  return date.getTime()
}
const startPickerOptions = {
    disabledDate: (current: Date) => {
      if (!current) return false 
      if (!endDate.value) return false 
      const currentZeroTime = getDateZeroTimestamp(current)
      const endZeroTime = getDateZeroTimestamp(endDate.value)
      return endZeroTime < currentZeroTime
    }
  }



const endPickerOptions =  {
   disabledDate: (current: Date) => {
      if (!current) return false
      if (!startDate.value) return false 
      const currentZeroTime = getDateZeroTimestamp(current)
      const startZeroTime = getDateZeroTimestamp(startDate.value)
      return startZeroTime > currentZeroTime
    }
  }



watch([() => startDate.value, () => endDate.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])}`
  //const str = `${isStart ? null : (newVal[0]+(newVal[0].includes('00:00:00')?'':' 00:00:00'))},${isEnd ? null : (newVal[1]+(newVal[1].includes('23:59:59')?'':' 23:59:59'))}`
  model.value = str == 'null,null' ? '' : str
})

watch(
  () => model.value,
  (value) => {
    if (value) {
      const dateList = (value + '').split(',')
      startDate.value = dateList[0] !== undefined ? dateList[0] : null
      endDate.value = dateList[1] !== undefined ? dateList[1] : null
    } else {
      startDate.value = null
      endDate.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>
:deep(.el-date-picker){
  width:100% !important;
}
</style>
