cip-components/cip-form-input/extension/time-range/mobile.jsx

import SelectTime from '../../basic/time-select/mobile'
import { useFormInput } from '../../../hooks/form-input'
import { formInputProps } from '../../form-input-props'
import { computed } from 'vue'
import { compareTime } from '../../basic/time-select/utils'

export default {
  props: formInputProps,
  setup (props, context) {
    const { emitModelValue, emitOtherValue } = useFormInput(props, context)
    const end = computed(() => {
      if (props.otherValue) {
        return compareTime(props.otherValue, props.config?.end ?? '20:00') ? props.otherValue : props.config?.end
      }
      return props.config?.end
    })
    const start = computed(() => {
      if (props.modelValue) {
        return compareTime(props.modelValue, props.config?.start ?? '08:00') ? props.modelValue : props.config?.start
      }
      return props.config?.start
    })
    return () => <div style="display: flex; flex: 1">
      <SelectTime modelValue={props.modelValue}
        onUpdate:modelValue={emitModelValue}
        config={{ ...props.config, end: end.value }} />
      <span style="padding: 0px 8px;">至</span>
      <SelectTime modelValue={props.otherValue}
        onUpdate:modelValue={emitOtherValue}
        config={{ ...props.config, start: start.value }} />
    </div>
  }
}