From 96d45e39c3e7fb5f8a28d3fe24a52ecc03217dce Mon Sep 17 00:00:00 2001
From: BeADre <beadre_wang@163.com>
Date: Tue, 30 Mar 2021 22:15:15 +0800
Subject: [PATCH] fix(time-picker): fix some bugs

---
 .../varlet-ui/src/time-picker/TimePicker.vue  |  84 ++++++------
 packages/varlet-ui/src/time-picker/clock.vue  | 123 +++++++++++++-----
 .../src/time-picker/example/index.vue         |   8 +-
 packages/varlet-ui/src/time-picker/utils.ts   |   6 +-
 4 files changed, 138 insertions(+), 83 deletions(-)

diff --git a/packages/varlet-ui/src/time-picker/TimePicker.vue b/packages/varlet-ui/src/time-picker/TimePicker.vue
index 0defdc0a86e..6b1458cbac4 100644
--- a/packages/varlet-ui/src/time-picker/TimePicker.vue
+++ b/packages/varlet-ui/src/time-picker/TimePicker.vue
@@ -91,6 +91,7 @@ import dayjs from 'dayjs'
 import Clock from './clock.vue'
 import { props, Time, AmPm, hoursAmpm, hours24 } from './props'
 import { toNumber } from '../utils/shared'
+import { nextTickFrame } from '../utils/elements'
 import { getNumberTime, getIsDisableMinute, getIsDisableSecond } from './utils'
 
 export default defineComponent({
@@ -104,13 +105,20 @@ export default defineComponent({
     const inner: Ref<DefineComponent | null> = ref(null)
     const isInner: Ref<boolean> = ref(false)
     const isActualInner: Ref<boolean> = ref(false)
-    const hourRad: Ref<number> = ref(0)
+    const isChosenUsableHour: Ref<boolean> = ref(false)
+    const isChosenUsableMinute: Ref<boolean> = ref(false)
+    const hourRad: Ref<number | undefined> = ref(undefined)
     const minuteRad: Ref<number> = ref(0)
     const secondRad: Ref<number> = ref(0)
     const type: Ref<keyof Time> = ref('hour')
     const ampm: Ref<AmPm> = ref('am')
     const isDisableHour: Ref<boolean> = ref(false)
     const isDisableMinute: Ref<boolean> = ref(false)
+    const time: Ref<Time> = ref({
+      hour: '00',
+      minute: '00',
+      second: '00',
+    })
 
     const center: UnwrapRef<Record<string, number>> = reactive({
       x: 0,
@@ -121,26 +129,7 @@ export default defineComponent({
       y: [],
     })
 
-    const time: ComputedRef<Time> = computed(() => {
-      if (!props.modelValue) {
-        return {
-          hour: '00',
-          minute: '00',
-          second: '00',
-        }
-      }
-
-      const hourFormat = props.format === '24hr' ? 'HH' : 'hh'
-      const { hour, minute, second } = getNumberTime(props.modelValue)
-
-      return {
-        hour: dayjs().hour(hour).format(hourFormat),
-        minute: dayjs().minute(minute).format('mm'),
-        second: dayjs().second(second).format('ss'),
-      }
-    })
-
-    const getRad: ComputedRef<number> = computed(() => {
+    const getRad: ComputedRef<number | undefined> = computed(() => {
       if (type.value === 'hour') return hourRad.value
       if (type.value === 'minute') return minuteRad.value
 
@@ -157,6 +146,8 @@ export default defineComponent({
     }
 
     const checkPanel = (panelType: keyof Time) => {
+      isChosenUsableHour.value = false
+      isDisableMinute.value = false
       type.value = panelType
     }
     const checkAmpm = (ampmType: AmPm) => {
@@ -170,6 +161,17 @@ export default defineComponent({
       return xIsInRange && yIsInRange
     }
 
+    const getTime = (value: string): Time => {
+      const hourFormat = props.format === '24hr' ? 'HH' : 'hh'
+      const { hour, minute, second } = getNumberTime(value)
+
+      return {
+        hour: dayjs().hour(hour).format(hourFormat),
+        minute: dayjs().minute(minute).format('mm'),
+        second: dayjs().second(second).format('ss'),
+      }
+    }
+
     const getHourIndex = (rad: number): number => {
       const value = rad / 30
       return value >= 0 ? value : value + 12
@@ -208,6 +210,7 @@ export default defineComponent({
       isDisableHour.value = disableHour.includes(newHour)
       if (isDisableHour.value) return
       hourRad.value = rad
+      isChosenUsableHour.value = true
     }
 
     const setMinuteRad = (roundDeg: number) => {
@@ -226,7 +229,9 @@ export default defineComponent({
       }
       isDisableMinute.value = getIsDisableMinute(values)
 
-      if (!isDisableMinute.value) minuteRad.value = rad
+      if (isDisableMinute.value) return
+      minuteRad.value = rad
+      isChosenUsableMinute.value = true
     }
 
     const setSecondRad = (roundDeg: number) => {
@@ -265,12 +270,14 @@ export default defineComponent({
     const end = () => {
       if (props.readonly) return
 
-      if (type.value === 'hour') {
-        if (isDisableHour.value || isInner.value !== isActualInner.value) return
+      if (type.value === 'hour' && isChosenUsableHour.value) {
         type.value = 'minute'
         return
       }
-      if (type.value === 'minute' && props.useSeconds && !isDisableMinute.value) type.value = 'second'
+
+      if (type.value === 'minute' && props.useSeconds && isChosenUsableMinute.value) {
+        type.value = 'second'
+      }
     }
 
     onMounted(() => {
@@ -302,30 +309,21 @@ export default defineComponent({
           minuteRad.value = toNumber(formatMinute) * 6
           secondRad.value = toNumber(formatSecond) * 6
 
+          // nextTickFrame(() => {
+          time.value = getTime(value)
+          // console.log(time.value)
+          // })
+
+          if (props.format !== '24hr') {
+            ampm.value = `${hour}`.padStart(2, '0') === formatHour24 && hours24.includes(formatHour24) ? 'pm' : 'am'
+          }
+
           isInner.value = props.format === '24hr' && hours24.includes(formatHour24)
         }
       },
       { immediate: true }
     )
 
-    watch(ampm, (newAmpm) => {
-      let newTime
-
-      if (newAmpm === 'pm') {
-        const index = hoursAmpm.findIndex((hour) => toNumber(hour) === toNumber(time.value.hour))
-        const pmHour = hours24[index]
-        const second = props.useSeconds ? `:${time.value.second}` : ''
-
-        newTime = `${pmHour}:${time.value.minute}${second}`
-      } else {
-        const second = props.useSeconds ? `:${time.value.second}` : ''
-
-        newTime = `${time.value.hour}:${time.value.minute}${second}`
-      }
-
-      update(newTime)
-    })
-
     return {
       getRad,
       time,
diff --git a/packages/varlet-ui/src/time-picker/clock.vue b/packages/varlet-ui/src/time-picker/clock.vue
index 355e58973a5..53731840207 100644
--- a/packages/varlet-ui/src/time-picker/clock.vue
+++ b/packages/varlet-ui/src/time-picker/clock.vue
@@ -5,13 +5,13 @@
       class="var-time-picker-clock__item"
       :class="[
         isActive(index, false) ? 'var-time-picker-clock__item--active' : null,
-        isDisable(time) ? 'var-time-picker-clock__item--disable' : null,
+        isDisable(timeScale) ? 'var-time-picker-clock__item--disable' : null,
       ]"
-      v-for="(time, index) in timeList"
-      :key="time"
-      :style="getStyle(index, false)"
+      v-for="(timeScale, index) in timeScales"
+      :key="timeScale"
+      :style="getStyle(index, timeScale, false)"
     >
-      {{ time }}
+      {{ timeScale }}
     </div>
     <div class="var-time-picker-clock__inner" ref="inner" v-if="format === '24hr' && type === 'hour'">
       <div
@@ -22,7 +22,7 @@
         ]"
         v-for="(hour, index) in hours24"
         :key="hour"
-        :style="getStyle(index, true)"
+        :style="getStyle(index, hour, true)"
       >
         {{ hour }}
       </div>
@@ -46,7 +46,6 @@ export default defineComponent({
     },
     rad: {
       type: Number,
-      required: true,
     },
     format: {
       type: String as PropType<Format>,
@@ -66,6 +65,7 @@ export default defineComponent({
     },
     ampm: {
       type: String as PropType<AmPm>,
+      default: 'am',
     },
     color: {
       type: String,
@@ -79,27 +79,35 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const inner: Ref<HTMLDivElement | null> = ref(null)
+    const isPreventNextUpdate: Ref<boolean> = ref(false)
     const disableHour: Ref<Array<string>> = ref([])
     const disable24HourIndex: Ref<Array<number>> = ref([])
 
     const handStyle = computed(() => ({
-      transform: `rotate(${props.rad}deg)`,
+      transform: `rotate(${toNumber(props.rad)}deg)`,
       height: props.isInner && props.type === 'hour' ? 'calc(50% - 40px)' : 'calc(50% - 4px)',
-      backgroundColor: props.color,
-      borderColor: props.color,
+      backgroundColor: getHandleColor(),
+      borderColor: getHandleColor(),
     }))
 
-    const activeItemIndex: ComputedRef<number> = computed(() => {
+    const activeItemIndex: ComputedRef<number | undefined> = computed(() => {
+      if (props.rad === undefined) return
       const value = props.rad / 30
       return value >= 0 ? value : value + 12
     })
 
-    const timeList: ComputedRef<Array<string>> = computed(() => {
+    const timeScales: ComputedRef<Array<string>> = computed(() => {
       if (props.type === 'hour') return hoursAmpm
 
       return minSec
     })
 
+    const getHandleColor = () => {
+      if (activeItemIndex.value === undefined) return props.color
+      const time = props.isInner ? hours24[activeItemIndex.value] : timeScales.value[activeItemIndex.value]
+      return isDisable(time) ? '#bdbdbd' : props.color
+    }
+
     const isActive = (index: number, inner: boolean): boolean => {
       if (inner) return activeItemIndex.value === index && props.isInner
 
@@ -144,75 +152,122 @@ export default defineComponent({
       }
     }
 
-    const getStyle = (index: number, inner: boolean) => {
+    const getStyle = (index: number, hour: string, inner: boolean) => {
       const rad = ((2 * Math.PI) / 12) * index - Math.PI / 2
       const left = 50 * (1 + Math.cos(rad))
       const top = 50 * (1 + Math.sin(rad))
 
+      const computedColor = () => {
+        if (!isActive(index, inner)) {
+          return {
+            backgroundColor: null,
+            color: null,
+          }
+        }
+        if (isDisable(hour)) {
+          return {
+            backgroundColor: '#bdbdbd',
+            color: '#fff',
+          }
+        }
+
+        return {
+          backgroundColor: props.color,
+          color: null,
+        }
+      }
+
+      const { backgroundColor, color } = computedColor()
+
       return {
         left: `${left}%`,
         top: `${top}%`,
-        backgroundColor: isActive(index, inner) ? props.color : null,
+        backgroundColor,
+        color,
       }
     }
 
     const getSize = () => {
       const { width, height } = (inner.value as HTMLDivElement).getBoundingClientRect()
+
       return {
         width,
         height,
-        handStyle,
       }
     }
 
-    const getHour = (): string => {
-      if (props.ampm === 'am') {
-        const hour = toNumber(hoursAmpm[activeItemIndex.value])
-        return dayjs().hour(hour).format('hh')
-      }
+    const getHour = (): string | undefined => {
+      if (activeItemIndex.value === undefined) return undefined
+      const hours = props.ampm === 'am' ? hoursAmpm : hours24
 
-      return hours24[activeItemIndex.value]
+      return hours[activeItemIndex.value].padStart(2, '0')
     }
 
+    const findAvailableHour = (ampm: string): string | undefined => {
+      const index = hoursAmpm.findIndex((hour) => toNumber(hour) === toNumber(props.time.hour))
+      const hours = ampm === 'am' ? hoursAmpm : hours24
+      const realignmentHours = [...hours.slice(index), ...hours.slice(0, index)]
+
+      return realignmentHours.find((hour, index) => {
+        isPreventNextUpdate.value = index !== 0
+
+        return !disableHour.value.includes(hour)
+      })
+    }
+
+    watch(
+      () => props.ampm,
+      (ampm) => {
+        const newHour = findAvailableHour(ampm)
+        if (!newHour) return
+
+        const second = props.useSeconds ? `:${props.time.second}` : ''
+        const newTime = `${newHour.padStart(2, '0')}:${props.time.minute}${second}`
+        emit('update', newTime)
+      }
+    )
+
     watch([activeItemIndex, () => props.isInner], ([index, inner], [oldIndex, oldInner]) => {
       const isSame = index === oldIndex && inner === oldInner
-      if (isSame || props.type !== 'hour') return
+      if (isSame || props.type !== 'hour' || activeItemIndex.value === undefined) return
 
       const newHour = inner ? hours24[activeItemIndex.value] : getHour()
       const second = props.useSeconds ? `:${props.time.second}` : ''
       const newTime = `${newHour}:${props.time.minute}${second}`
 
-      emit('update', newTime)
+      if (!isPreventNextUpdate.value) emit('update', newTime)
+
+      isPreventNextUpdate.value = false
     })
 
     watch(
       () => props.rad,
       (rad, oldRad) => {
-        if (props.type === 'hour') return
+        if (props.type === 'hour' || rad === undefined || oldRad === undefined) return
 
         const radToMinSec = rad / 6 >= 0 ? rad / 6 : rad / 6 + 60
         const oldRadToMinSec = oldRad / 6 >= 0 ? oldRad / 6 : oldRad / 6 + 60
 
         if (radToMinSec === oldRadToMinSec) return
 
+        let newTime
+        const { hourStr } = convertHour(props.format, props.ampm, props.time.hour)
+
         if (props.type === 'minute') {
-          const { hourStr } = convertHour(props.format, props.ampm, props.time.hour)
           const newMinute = dayjs().minute(radToMinSec).format('mm')
           const second = props.useSeconds ? `:${props.time.second}` : ''
 
-          const newTime = `${hourStr}:${newMinute}${second}`
-
-          emit('update', newTime)
+          newTime = `${hourStr}:${newMinute}${second}`
         }
 
         if (props.type === 'second') {
-          const { hourStr } = convertHour(props.format, props.ampm, props.time.hour)
           const newSecond = dayjs().second(radToMinSec).format('ss')
           const second = props.useSeconds ? `:${newSecond}` : ''
 
-          const newTime = `${hourStr}:${props.time.minute}${second}`
-          emit('update', newTime)
+          newTime = `${hourStr}:${props.time.minute}${second}`
         }
+
+        emit('update', newTime)
       }
     )
 
@@ -226,7 +281,6 @@ export default defineComponent({
           const disableAmpmHours = hoursAmpm.filter((hour) => toNumber(hour) > maxHour)
           const disable24Hours = hours24.filter((hour) => toNumber(hour) > maxHour)
           disableHour.value = [...disableAmpmHours, ...disable24Hours]
-          return
         }
 
         if (!max && min) {
@@ -235,12 +289,11 @@ export default defineComponent({
           const disableAmpmHours = hoursAmpm.filter((hour) => toNumber(hour) < minHour)
           const disable24Hours = hours24.filter((hour) => toNumber(hour) < minHour)
           disableHour.value = [...disableAmpmHours, ...disable24Hours]
-          return
         }
 
         if (max && min) {
           const { hour: maxHour } = getNumberTime(max)
-          const { hour: minHour } = getNumberTime(max)
+          const { hour: minHour } = getNumberTime(min)
 
           const disableAmpmHours = hoursAmpm.filter((hour) => toNumber(hour) < minHour || toNumber(hour) > maxHour)
           const disable24Hours = hours24.filter((hour) => toNumber(hour) < minHour || toNumber(hour) > maxHour)
@@ -256,7 +309,7 @@ export default defineComponent({
 
     return {
       hours24,
-      timeList,
+      timeScales,
       inner,
       handStyle,
       disableHour,
diff --git a/packages/varlet-ui/src/time-picker/example/index.vue b/packages/varlet-ui/src/time-picker/example/index.vue
index c78cd4f9dea..3eb6ddd9131 100644
--- a/packages/varlet-ui/src/time-picker/example/index.vue
+++ b/packages/varlet-ui/src/time-picker/example/index.vue
@@ -5,14 +5,13 @@
     header-color="purple"
     color="#7bb872"
     min="2:28:38"
-    format="24hr"
     max="19:40:22"
     @change="change"
   />
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, onMounted, ref } from 'vue'
 import TimePicker from '..'
 
 export default defineComponent({
@@ -25,6 +24,11 @@ export default defineComponent({
     const change = (time) => {
       console.log(time)
     }
+    // onMounted(() => {
+    //   setTimeout(() => {
+    //     date.value = '18:01:11'
+    //   }, 2000)
+    // })
     return {
       date,
       change,
diff --git a/packages/varlet-ui/src/time-picker/utils.ts b/packages/varlet-ui/src/time-picker/utils.ts
index f601423e081..9d60b89aef3 100644
--- a/packages/varlet-ui/src/time-picker/utils.ts
+++ b/packages/varlet-ui/src/time-picker/utils.ts
@@ -12,7 +12,7 @@ type DisableProps = {
   disableHour: Array<string>
 }
 
-export const notConvert = (format: string, ampm: AmPm | undefined) => format === '24hr' || ampm === 'am'
+export const notConvert = (format: string, ampm: AmPm | undefined): boolean => format === '24hr' || ampm === 'am'
 
 export const convertHour = (format: string, ampm: AmPm | undefined, hour: string) => {
   const index = hoursAmpm.findIndex((hourAmpm) => toNumber(hourAmpm) === toNumber(hour))
@@ -34,7 +34,7 @@ export const getNumberTime = (time: string) => {
   }
 }
 
-export const getIsDisableMinute = (values: Omit<DisableProps, 'minute'>) => {
+export const getIsDisableMinute = (values: Omit<DisableProps, 'minute'>): boolean => {
   const { time, format, ampm, hour, max, min, disableHour } = values
   const { hourStr, hourNum } = convertHour(format, ampm, hour)
 
@@ -60,7 +60,7 @@ export const getIsDisableMinute = (values: Omit<DisableProps, 'minute'>) => {
   return false
 }
 
-export const getIsDisableSecond = (values: DisableProps) => {
+export const getIsDisableSecond = (values: DisableProps): boolean => {
   const { time, format, ampm, hour, minute, max, min, disableHour } = values
   const { hourStr, hourNum } = convertHour(format, ampm, hour)