From e02d6534d2dba4b8adcbb80e37cc77bf8bddd26c Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 09 三月 2022 16:50:48 +0800
Subject: [PATCH] update#136137: [諮詢度表現] 顧問詳細資訊API 前端調整串接

---
 PAMapp/components/Ui/UiTimePicker.vue |   99 ++++++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 92 insertions(+), 7 deletions(-)

diff --git a/PAMapp/components/Ui/UiTimePicker.vue b/PAMapp/components/Ui/UiTimePicker.vue
index 3a13512..291fbcd 100644
--- a/PAMapp/components/Ui/UiTimePicker.vue
+++ b/PAMapp/components/Ui/UiTimePicker.vue
@@ -4,9 +4,10 @@
         popper-class="pam-time-popper"
         v-model="timeValue"
         :clearable="false"
+        :editable="false"
         :picker-options="pickerOptions"
         placeholder="������"
-        prefix-icon="icon-down"
+        prefix-icon="icon-down down-icon"
         value-format="timestamp"
         @change="changeTime"
     >
@@ -14,20 +15,104 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Vue } from "nuxt-property-decorator";
+import { Component, Emit, Prop, Vue, Watch } from "nuxt-property-decorator";
 
 @Component
 export default class UiTimePicker extends Vue {
     timeValue = '';
-    pickerOptions = {
-        start: '09:00',
-        step: '00:15',
-        end: '21:00'
-    }
+
+    @Prop()
+    defaultValue!: string;
+
+    @Prop({default: ''})
+    changeDate!: Date | string;
+
+    @Prop()
+    isPastDateDisabled!: boolean;
+
+    @Prop()
+    isFutureDateDisabled!: boolean;
+
+    ///////////////////////////////////////////////////////////////////////
 
     @Emit('changeTime')
     changeTime() {
         return this.timeValue;
     }
+
+    @Watch('defaultValue', {immediate: true})
+    updateDefault() {
+        if (this.defaultValue) {
+            const defaultDate = new Date(this.defaultValue);
+            this.timeValue = this.formatTimeString(defaultDate);
+            this.changeTime();
+        }
+    }
+
+    ///////////////////////////////////////////////////////////////////////
+
+    get pickerOptions() {
+        let minTime = '';
+        let maxTime = '';
+        const currentDate = new Date();
+
+        if (this.changeDate && this.isPickedToday(currentDate)) {
+
+            if (this.isPastDateDisabled) {
+                minTime = this.formatTimeString(currentDate);
+                this.isPickedDisableTime(currentDate, minTime);
+            }
+
+            if (this.isFutureDateDisabled) {
+                maxTime = this.formatTimeString(currentDate);
+                this.isPickedDisableTime(currentDate, maxTime);
+            }
+
+        }
+
+        return {
+            start: '09:00',
+            step: '00:15',
+            end: '21:00',
+            minTime: minTime,
+            maxTime: maxTime
+        }
+    }
+
+    private isPickedDisableTime(currentDate: Date, minMaxTime: string) {
+        const currentTime = this.getTimeValue(currentDate, minMaxTime);
+        const pickedTime = this.getTimeValue(currentDate, this.timeValue);
+        if (this.isPastDateDisabled && pickedTime < currentTime) {
+            this.timeValue = '';
+            this.changeTime();
+        }
+        if (this.isFutureDateDisabled && currentTime < pickedTime) {
+            this.timeValue = '';
+            this.changeTime();
+        }
+    }
+
+    private isPickedToday(currentDate: Date) {
+        const pickedDate = new Date(this.changeDate);
+        const today = this.formatDateString(currentDate);
+        const picked = this.formatDateString(pickedDate);
+        return today === picked;
+    }
+
+    private getTimeValue(date: Date, time: string) {
+        const hour = time.split(':')[0];
+        const minute = time.split(':')[1];
+        return date.setHours(+hour, +minute);
+    }
+
+    private formatDateString(date: Date) {
+        return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+    }
+
+    private formatTimeString(date: Date) {
+        const hours = date.getHours();
+        const minutes = date.getMinutes();
+        return `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
+    }
 }
 </script>
\ No newline at end of file

--
Gitblit v1.8.0