{"version":3,"file":"panel-time-range.vue.mjs","sources":["../../../../../../packages/components/time-picker/src/time-picker-com/panel-time-range.vue"],"sourcesContent":["<template>\n  <div v-if=\"actualVisible\" class=\"el-time-range-picker el-picker-panel\">\n    <div class=\"el-time-range-picker__content\">\n      <div class=\"el-time-range-picker__cell\">\n        <div class=\"el-time-range-picker__header\">\n          开始时间\n        </div>\n        <div\n          :class=\"{ 'has-seconds': showSeconds, 'is-arrow': arrowControl }\"\n          class=\"el-time-range-picker__body el-time-panel__content\"\n        >\n          <time-spinner\n            ref=\"minSpinner\"\n            role=\"start\"\n            :show-seconds=\"showSeconds\"\n            :am-pm-mode=\"amPmMode\"\n            :arrow-control=\"arrowControl\"\n            :spinner-date=\"minDate\"\n            :disabled-hours=\"disabledHours_\"\n            :disabled-minutes=\"disabledMinutes_\"\n            :disabled-seconds=\"disabledSeconds_\"\n            @change=\"handleMinChange\"\n            @set-option=\"onSetOption\"\n            @select-range=\"setMinSelectionRange\"\n          />\n        </div>\n      </div>\n      <div class=\"el-time-range-picker__cell\">\n        <div class=\"el-time-range-picker__header\">\n          结束时间\n        </div>\n        <div\n          :class=\"{ 'has-seconds': showSeconds, 'is-arrow': arrowControl }\"\n          class=\"el-time-range-picker__body el-time-panel__content\"\n        >\n          <time-spinner\n            ref=\"maxSpinner\"\n            role=\"end\"\n            :show-seconds=\"showSeconds\"\n            :am-pm-mode=\"amPmMode\"\n            :arrow-control=\"arrowControl\"\n            :spinner-date=\"maxDate\"\n            :disabled-hours=\"disabledHours_\"\n            :disabled-minutes=\"disabledMinutes_\"\n            :disabled-seconds=\"disabledSeconds_\"\n            @change=\"handleMaxChange\"\n            @set-option=\"onSetOption\"\n            @select-range=\"setMaxSelectionRange\"\n          />\n        </div>\n      </div>\n    </div>\n    <div class=\"el-time-panel__footer\">\n      <button\n        type=\"button\"\n        class=\"el-time-panel__btn cancel\"\n        @click=\"handleCancel()\"\n      >\n        取消\n      </button>\n      <button\n        type=\"button\"\n        class=\"el-time-panel__btn confirm\"\n        :disabled=\"btnConfirmDisabled\"\n        @click=\"handleConfirm()\"\n      >\n        确定\n      </button>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, inject } from 'vue'\nimport dayjs from 'dayjs'\nimport { union } from 'lodash-unified'\nimport { EVENT_CODE } from '@element-ultra/shared'\nimport TimeSpinner from './basic-time-spinner.vue'\nimport { getAvailableArrs, useOldValue } from './useTimePicker'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nconst makeSelectRange = (start: number, end: number) => {\n  const result = []\n  for (let i = start; i <= end; i++) {\n    result.push(i)\n  }\n  return result\n}\nexport default defineComponent({\n  components: { TimeSpinner },\n\n  props: {\n    visible: Boolean,\n    actualVisible: Boolean,\n    parsedValue: {\n      type: [Array] as PropType<Array<Dayjs>>,\n    },\n    format: {\n      type: String,\n      default: '',\n    },\n  },\n\n  emits: ['pick', 'select-range', 'set-picker-option'],\n\n  setup(props, ctx) {\n\n    const minDate = computed(() => props.parsedValue[0])\n    const maxDate = computed(() => props.parsedValue[1])\n    const oldValue = useOldValue(props)\n    const handleCancel = () => {\n      ctx.emit('pick', oldValue.value, null)\n    }\n    const showSeconds = computed(() => {\n      return props.format.includes('ss')\n    })\n    const amPmMode = computed(() => {\n      if (props.format.includes('A')) return 'A'\n      if (props.format.includes('a')) return 'a'\n      return ''\n    })\n\n    const minSelectableRange = ref([])\n    const maxSelectableRange = ref([])\n\n    const handleConfirm = (visible = false) => {\n      ctx.emit('pick', [minDate.value, maxDate.value], visible)\n    }\n\n    const handleMinChange = (date) => {\n      handleChange(date.millisecond(0), maxDate.value)\n    }\n    const handleMaxChange = (date) => {\n      handleChange(minDate.value, date.millisecond(0))\n    }\n\n    const isValidValue = (_date: Dayjs[]) => {\n      const parsedDate = _date.map((_) => dayjs(_).locale('zh-cn'))\n      const result = getRangeAvailableTime(parsedDate)\n      return parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1])\n    }\n\n    const handleChange = (_minDate, _maxDate) => {\n      // todo getRangeAvailableTime(_date).millisecond(0)\n      ctx.emit('pick', [_minDate, _maxDate], true)\n    }\n    const btnConfirmDisabled = computed(() => {\n      return minDate.value > maxDate.value\n    })\n\n    const selectionRange = ref([0, 2])\n    const setMinSelectionRange = (start, end) => {\n      ctx.emit('select-range', start, end, 'min')\n      selectionRange.value = [start, end]\n    }\n\n    const offset = computed(() => (showSeconds.value ? 11 : 8))\n    const setMaxSelectionRange = (start, end) => {\n      ctx.emit('select-range', start, end, 'max')\n      selectionRange.value = [start + offset.value, end + offset.value]\n    }\n\n    const changeSelectionRange = (step) => {\n      const list = showSeconds.value ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11]\n      const mapping = ['hours', 'minutes'].concat(\n        showSeconds.value ? ['seconds'] : []\n      )\n      const index = list.indexOf(selectionRange.value[0])\n      const next = (index + step + list.length) % list.length\n      const half = list.length / 2\n      if (next < half) {\n        timePickerOptions['start_emitSelectRange'](mapping[next])\n      } else {\n        timePickerOptions['end_emitSelectRange'](mapping[next - half])\n      }\n    }\n\n    const handleKeydown = (event: KeyboardEvent) => {\n      const code = event.code\n\n      if (code === EVENT_CODE.left || code === EVENT_CODE.right) {\n        const step = code === EVENT_CODE.left ? -1 : 1\n        changeSelectionRange(step)\n        event.preventDefault()\n        return\n      }\n\n      if (code === EVENT_CODE.up || code === EVENT_CODE.down) {\n        const step = code === EVENT_CODE.up ? -1 : 1\n        const role = selectionRange.value[0] < offset.value ? 'start' : 'end'\n        timePickerOptions[`${role}_scrollDown`](step)\n        event.preventDefault()\n        return\n      }\n    }\n\n    const disabledHours_ = (role, compare) => {\n      const defaultDisable = disabledHours ? disabledHours(role) : []\n      const isStart = role === 'start'\n      const compareDate = compare || (isStart ? maxDate.value : minDate.value)\n      const compareHour = compareDate.hour()\n      const nextDisable = isStart\n        ? makeSelectRange(compareHour + 1, 23)\n        : makeSelectRange(0, compareHour - 1)\n      return union(defaultDisable, nextDisable)\n    }\n    const disabledMinutes_ = (hour, role, compare) => {\n      const defaultDisable = disabledMinutes ? disabledMinutes(hour, role) : []\n      const isStart = role === 'start'\n      const compareDate = compare || (isStart ? maxDate.value : minDate.value)\n      const compareHour = compareDate.hour()\n      if (hour !== compareHour) {\n        return defaultDisable\n      }\n      const compareMinute = compareDate.minute()\n      const nextDisable = isStart\n        ? makeSelectRange(compareMinute + 1, 59)\n        : makeSelectRange(0, compareMinute - 1)\n      return union(defaultDisable, nextDisable)\n    }\n    const disabledSeconds_ = (hour, minute, role, compare) => {\n      const defaultDisable = disabledSeconds\n        ? disabledSeconds(hour, minute, role)\n        : []\n      const isStart = role === 'start'\n      const compareDate = compare || (isStart ? maxDate.value : minDate.value)\n      const compareHour = compareDate.hour()\n      const compareMinute = compareDate.minute()\n      if (hour !== compareHour || minute !== compareMinute) {\n        return defaultDisable\n      }\n      const compareSecond = compareDate.second()\n      const nextDisable = isStart\n        ? makeSelectRange(compareSecond + 1, 59)\n        : makeSelectRange(0, compareSecond - 1)\n      return union(defaultDisable, nextDisable)\n    }\n\n    const getRangeAvailableTime = (dates: Array<Dayjs>) => {\n      return dates.map((_, index) =>\n        getRangeAvailableTimeEach(\n          dates[0],\n          dates[1],\n          index === 0 ? 'start' : 'end'\n        )\n      )\n    }\n\n    const { getAvailableHours, getAvailableMinutes, getAvailableSeconds } =\n      getAvailableArrs(disabledHours_, disabledMinutes_, disabledSeconds_)\n\n    const getRangeAvailableTimeEach = (\n      startDate: Dayjs,\n      endDate: Dayjs,\n      role\n    ) => {\n      const availableMap = {\n        hour: getAvailableHours,\n        minute: getAvailableMinutes,\n        second: getAvailableSeconds,\n      }\n      const isStart = role === 'start'\n      let result = isStart ? startDate : endDate\n      const compareDate = isStart ? endDate : startDate\n      ;['hour', 'minute', 'second'].forEach((_) => {\n        if (availableMap[_]) {\n          let availableArr\n          const method = availableMap[_]\n          if (_ === 'minute') {\n            availableArr = method(result.hour(), role, compareDate)\n          } else if (_ === 'second') {\n            availableArr = method(\n              result.hour(),\n              result.minute(),\n              role,\n              compareDate\n            )\n          } else {\n            availableArr = method(role, compareDate)\n          }\n          if (\n            availableArr &&\n            availableArr.length &&\n            !availableArr.includes(result[_]())\n          ) {\n            const pos = isStart ? 0 : availableArr.length - 1\n            result = result[_](availableArr[pos])\n          }\n        }\n      })\n      return result\n    }\n\n    const parseUserInput = (value: Dayjs[] | Dayjs) => {\n      if (!value) return null\n      if (Array.isArray(value)) {\n        return value.map((_) => dayjs(_, props.format).locale('zh-cn'))\n      }\n      return dayjs(value, props.format).locale('zh-cn')\n    }\n\n    const formatToString = (value: Dayjs[] | Dayjs) => {\n      if (!value) return null\n      if (Array.isArray(value)) {\n        return value.map((_) => _.format(props.format))\n      }\n\n      return value.format(props.format)\n    }\n\n    const getDefaultValue = () => {\n      if (Array.isArray(defaultValue)) {\n        return defaultValue.map((_) => dayjs(_).locale('zh-cn'))\n      }\n      const defaultDay = dayjs(defaultValue).locale('zh-cn')\n      return [defaultDay, defaultDay.add(60, 'm')]\n    }\n\n    ctx.emit('set-picker-option', ['formatToString', formatToString])\n    ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n    ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n    ctx.emit('set-picker-option', ['handleKeydown', handleKeydown])\n    ctx.emit('set-picker-option', ['getDefaultValue', getDefaultValue])\n    ctx.emit('set-picker-option', [\n      'getRangeAvailableTime',\n      getRangeAvailableTime,\n    ])\n\n    const timePickerOptions = {} as any\n    const onSetOption = (e) => {\n      timePickerOptions[e[0]] = e[1]\n    }\n\n    const pickerBase = inject('EP_PICKER_BASE') as any\n    const {\n      arrowControl,\n      disabledHours,\n      disabledMinutes,\n      disabledSeconds,\n      defaultValue,\n    } = pickerBase.props\n\n    return {\n      arrowControl,\n      onSetOption,\n      setMaxSelectionRange,\n      setMinSelectionRange,\n      btnConfirmDisabled,\n      handleCancel,\n      handleConfirm,\n      showSeconds,\n      minDate,\n      maxDate,\n      amPmMode,\n      handleMinChange,\n      handleMaxChange,\n      minSelectableRange,\n      maxSelectableRange,\n      disabledHours_,\n      disabledMinutes_,\n      disabledSeconds_,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_createVNode"],"mappings":"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"}