From 9b82d9df763d54b56f658ae7134678e41bdc00d9 Mon Sep 17 00:00:00 2001
From: Dustella <fdnoaivj@outlook.com>
Date: Sat, 8 Feb 2025 17:44:39 +0800
Subject: [PATCH] feat: can set dates

---
 src/composables/dateOpt.ts | 24 +++++++++++++++++++++++-
 src/layouts/map.vue        | 10 +++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/composables/dateOpt.ts b/src/composables/dateOpt.ts
index 7565a2c..af4e96a 100644
--- a/src/composables/dateOpt.ts
+++ b/src/composables/dateOpt.ts
@@ -1,13 +1,35 @@
+import { type DateValue, parseDate } from '@internationalized/date'
+
 function _useOptions() {
   const options = reactive({
-    castBeginDate: '2022-01-01',
+    castBeginDate: '',
     castDayNo: 0,
     renderMode: 'heatmap' as 'heatmap' | 'image',
     isPlaying: false,
   })
 
+  function setCastBeginDate(date: DateValue) {
+    const datestr = date.toString()
+    options.castBeginDate = datestr.replaceAll('-', '')
+  }
+
+  function setTargetDate(date: DateValue) {
+    const castBeginDateStr = options.castBeginDate.toString()
+    if (castBeginDateStr.length !== 8) {
+      console.error(castBeginDateStr)
+      throw new Error('castBeginDate is invalid')
+    }
+    const newDateStr = `${castBeginDateStr.slice(0, 4)}-${castBeginDateStr.slice(4, 6)}-${castBeginDateStr.slice(6, 8)}`
+    const castBeginDate = parseDate(newDateStr)
+    const dayNo = date.compare(castBeginDate)
+    options.castDayNo = dayNo
+    return dayNo
+  }
+
   return {
     options,
+    setCastBeginDate,
+    setTargetDate,
   }
 }
 
diff --git a/src/layouts/map.vue b/src/layouts/map.vue
index 3aa7e75..f19f3f7 100644
--- a/src/layouts/map.vue
+++ b/src/layouts/map.vue
@@ -18,7 +18,7 @@ const df = new DateFormatter('en-US', {
 const castBeginDate = ref<DateValue>()
 const castTargetDate = ref<DateValue>()
 
-const { options } = useOptions()
+const { options, setCastBeginDate, setTargetDate } = useOptions()
 
 const mapping = ref < Record<string, string>>({})
 
@@ -62,6 +62,13 @@ const isTargetDateDisabled = computed(() => {
   }
   return _functionIsTargetDateDisabled
 })
+
+watch([castBeginDate, castTargetDate], () => {
+  if (castBeginDate.value && castTargetDate.value) {
+    setCastBeginDate(castBeginDate.value)
+    setTargetDate(castTargetDate.value)
+  }
+})
 </script>
 
 <template>
@@ -72,6 +79,7 @@ const isTargetDateDisabled = computed(() => {
           <legend class="px-1 text-sm font-medium -ml-1">
             日期设置
           </legend>
+          {{ options }}
           <div class="grid gap-3">
             <Label for="model">渲染模式</Label>
             <Select v-model="options.renderMode">