From df685e8e5a56dfe9a6233b2485c42abc4502c803 Mon Sep 17 00:00:00 2001
From: Chuian <chuiantw1212@gmail.com>
Date: Mon, 13 May 2024 16:42:10 +0800
Subject: [PATCH] fix no login usage

---
 components/calculator/career/labor.vue | 95 ++++++++++++--------------
 components/calculator/index.vue        |  3 +
 components/calculator/retirement.vue   |  8 ++-
 components/calculator/spouse.vue       |  6 +-
 4 files changed, 55 insertions(+), 57 deletions(-)

diff --git a/components/calculator/career/labor.vue b/components/calculator/career/labor.vue
index 472143f..d1d5c28 100644
--- a/components/calculator/career/labor.vue
+++ b/components/calculator/career/labor.vue
@@ -92,7 +92,7 @@
                 <el-col :span="12">
                     <el-form-item :label="`- 勞保自付額`">
                         <el-text>{{ Number(career.insurance?.expense).toLocaleString() }} (負擔率{{
-                            laborInsurace.premiumRate[career.insuredUnit] }}%)</el-text>
+                laborInsurace.premiumRate[career.insuredUnit] }}%)</el-text>
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -125,7 +125,7 @@
             </el-row>
             <el-row>
                 <el-col :span="12">
-                    <el-form-item label="月支出" required>
+                    <el-form-item label="月支出">
                         <el-input-number v-model="career.monthlyExpense" :min="0" :step="1000"
                             @change="calculateCareer($event)" />
                     </el-form-item>
@@ -249,9 +249,7 @@ function calculateCareer(options: any = { propagate: true }) {
         calculatePensionSalary()
         calculateCareerPensionContribution()
         calculateHealthPremium()
-        debounce(() => {
-            drawChartAndCalculateIncome(propagate)
-        })(propagate)
+        drawChartAndCalculateIncome(propagate)
         if (propagate) {
             emits('update:modelValue', career.value)
         }
@@ -421,6 +419,7 @@ function calculateMonthlySaving() {
 }
 // 畫圖
 let incomeChartInstance = ref<Chart>()
+const debounceId = ref()
 function drawChartAndCalculateIncome(propagate = false) {
     const { monthlyBasicSalary, insuredUnit, employeeWelfareFund, insurance, pension } = career.value
     if (isUnableToDraw.value) {
@@ -516,16 +515,12 @@ function drawChartAndCalculateIncome(propagate = false) {
         })
     }
 
-    if (0 <= fv) {
+    if (0 < fv) {
         dataAndDataIndex.push({
             label: '定期定額',
             data: [0, fv],
             datasetIndex: 0,
         })
-    } else {
-        if (!errorMssage.pending()) {
-            errorMssage()
-        }
     }
 
     const labels = dataAndDataIndex.map(item => item.label)
@@ -558,34 +553,44 @@ function drawChartAndCalculateIncome(propagate = false) {
         ]
     }
 
-    if (incomeChartInstance.value) {
-        incomeChartInstance.value.data = data
-        incomeChartInstance.value.update()
-        return
-    }
-    const ctx: any = document.getElementById('incomeChart')
-    const chartInstance = new Chart(ctx, {
-        type: 'bar',
-        data: data,
-        options: {
-            plugins: {
-                tooltip: {
-                    callbacks: {
-                        label: tooltipFormat,
+    clearTimeout(debounceId.value)
+    debounceId.value = setTimeout(() => {
+        // 錯誤訊息
+        if (fv <= 0) {
+            if (!errorMssage.pending()) {
+                errorMssage()
+            }
+        }
+        // 繪圖
+        if (incomeChartInstance.value) {
+            incomeChartInstance.value.data = data
+            incomeChartInstance.value.update()
+        } else {
+            const ctx: any = document.getElementById('incomeChart')
+            const chartInstance = new Chart(ctx, {
+                type: 'bar',
+                data: data,
+                options: {
+                    plugins: {
+                        tooltip: {
+                            callbacks: {
+                                label: tooltipFormat,
+                            }
+                        }
+                    },
+                    scales: {
+                        x: {
+                            stacked: true,
+                        },
+                        y: {
+                            stacked: true
+                        }
                     }
                 }
-            },
-            scales: {
-                x: {
-                    stacked: true,
-                },
-                y: {
-                    stacked: true
-                }
-            }
+            })
+            incomeChartInstance = shallowRef(chartInstance)
         }
-    })
-    incomeChartInstance = shallowRef(chartInstance)
+    }, 250)
 }
 function tooltipFormat(tooltipItems) {
     const { raw } = tooltipItems
@@ -594,27 +599,11 @@ function tooltipFormat(tooltipItems) {
 }
 
 import { ElMessage, } from 'element-plus'
-import { throttle, debounce } from '../lodash.js'
+import { throttle, } from '../lodash.js'
 const errorMssage = throttle(() => {
-    // ElMessage.error('收入：兩袖清風！')
+    ElMessage.error('收入：兩袖清風！')
 }, 4000)
 
-
-const debounceId = ref()
-function debounce(func, delay = 250) {
-    return (immediate) => {
-        clearTimeout(debounceId.value)
-        if (immediate) {
-            func()
-        } else {
-            debounceId.value = setTimeout(() => {
-                debounceId.value = undefined
-                func()
-            }, delay)
-        }
-    }
-}
-
 defineExpose({
     calculateCareer,
 })
diff --git a/components/calculator/index.vue b/components/calculator/index.vue
index fae0a2b..896a8e6 100644
--- a/components/calculator/index.vue
+++ b/components/calculator/index.vue
@@ -344,6 +344,8 @@ const userForm = reactive({
         monthlyContribution: 0,
         weddingExpense: 0,
         yearOfBirth: '',
+        monthlyNetPay: 0,
+        monthlyExpense: 0,
     },
     parenting: {
         childAnnualExpense: 212767,
@@ -366,6 +368,7 @@ const userForm = reactive({
         downpayGoal: 0,
         monthlyRepay: 0,
         downpayYear: 0,
+        downpayTotalPrice: 0,
     },
     estatePrice: {
         county: '',
diff --git a/components/calculator/retirement.vue b/components/calculator/retirement.vue
index dd0fcdf..bca2ef9 100644
--- a/components/calculator/retirement.vue
+++ b/components/calculator/retirement.vue
@@ -28,7 +28,8 @@
                 </el-col>
                 <el-col :span="12">
                     <el-form-item label="退休後餘命">
-                        <el-text>{{ retirement.lifeExpectancy }} 年</el-text>
+                        <el-text>{{ retirement.lifeExpectancy }} 年
+                            ({{ Math.ceil(retirement.yearOfRetire + retirement.lifeExpectancy) }})</el-text>
                     </el-form-item>
                 </el-col>
             </el-row> -->
@@ -285,8 +286,9 @@ const retirement = computed(() => {
     return props.modelValue
 })
 const isFormDisabled = computed(() => {
-    const { monthlyBasicSalary } = props.career
-    return !monthlyBasicSalary
+    const { monthlyBasicSalary, } = props.career
+    const { careerInsuranceType } = props.profile
+    return !monthlyBasicSalary || !careerInsuranceType
 })
 const unableToDraw = computed(() => {
     const { monthlyBasicSalary } = props.career
diff --git a/components/calculator/spouse.vue b/components/calculator/spouse.vue
index 127508b..69f6b39 100644
--- a/components/calculator/spouse.vue
+++ b/components/calculator/spouse.vue
@@ -151,7 +151,11 @@ function calculatecSpouse(options: any = { propagate: true }) {
 }
 function calculateMonthlyContribution() {
     const { monthlyNetPay, monthlyExpense } = spouse.value
-    spouse.value.monthlyContribution = monthlyNetPay - monthlyExpense
+    if (monthlyNetPay) {
+        spouse.value.monthlyContribution = monthlyNetPay - monthlyExpense
+    } else {
+        spouse.value.monthlyContribution = 0
+    }
 }
 function calculateYearOfMarriage() {
     const { yearOfMarriage } = spouse.value