From 35763876bab64a000858caa615e35e96228a6a3f Mon Sep 17 00:00:00 2001
From: Chuian <chuiantw1212@gmail.com>
Date: Fri, 10 May 2024 17:12:00 +0800
Subject: [PATCH] add story

---
 components/calculator/benchmark.vue | 115 +++++++++++--
 components/calculator/index.vue     |   8 +-
 components/calculator/profile.vue   | 241 +++++++++++-----------------
 3 files changed, 202 insertions(+), 162 deletions(-)

diff --git a/components/calculator/benchmark.vue b/components/calculator/benchmark.vue
index 9b61ba6..6bc9d2f 100644
--- a/components/calculator/benchmark.vue
+++ b/components/calculator/benchmark.vue
@@ -2,23 +2,112 @@
     <el-card>
         <template #header>
             <div class="card-header card-header--custom">
-                <span>非專業建議
+                <span>財務回顧
                 </span>
             </div>
         </template>
-        <el-form label-width="auto">    
-            <!-- <p>你破產了lol</p>
-            <ul>
-                若需專業建議請洽以下機構
-                <li>
-                    <a href="https://www.azsinopro.com.tw/" target="_blank">Azimut Sinopro 安睿宏觀｜全生涯理財規劃</a>
-                </li>
-            </ul> -->
-            <el-row>
-                <el-col>
+        <el-form label-width="auto">
+            <!-- {{config.counties}} -->
+            {{ meetChatGpt() }}
+            <!-- <p>你享壽{{ userForm.profile.age + userForm.profile.lifeExpectancy }}歲，</p>
+            <p>在{{ userForm.spouse.yearOfMarriage }}年時，遇見你的真愛，</p>
+            <p></p> -->
+            <!-- <el-row>
+                <el-col :span="12">
+                    <el-form-item label="享壽">
+                        {{ userForm.profile.age + userForm.profile.lifeExpectancy }} 歲
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item>
 
+                    </el-form-item>
                 </el-col>
-            </el-row>
+            </el-row> -->
         </el-form>
     </el-card>
-</template>
\ No newline at end of file
+</template>
+<script setup lang="ts">
+import { ref, computed, shallowRef, reactive, watch } from 'vue'
+const props = defineProps({
+    modelValue: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    config: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+})
+const userForm = computed(() => {
+    return props.modelValue
+})
+
+function meetChatGpt() {
+    const { profile, spouse, parenting, mortgage, estatePrice, career, retirement } = userForm.value
+    const { counties = [], insuranceTypes = [], townMap = {} } = props.config
+
+    const { yearOfBirth, age: profileAge, lifeExpectancy: profilelifeExpectancy, careerInsuranceType } = profile
+
+    const { careerHeadCount, } = career
+    const { age: retireAge, qualityLevel, futureSeniority, insurance } = retirement
+
+    const { yearOfMarriage } = spouse
+    const { headCount, independantAge } = parenting
+    const { downpayYear } = mortgage
+    const { county, town } = estatePrice
+
+    const totalAge = profileAge + profilelifeExpectancy
+    let story = ``
+    // profile
+    story += `你於${yearOfBirth}年，來到個世界上，`
+    story += `於${yearOfBirth + totalAge}年時，悄悄的離開，`
+    story += `在這${totalAge}間，你有著屬於自己的故事。`
+    // career
+    const insuranceTypeItem = insuranceTypes.find(item => item.value === careerInsuranceType)
+    if (insuranceTypeItem) {
+        story += `畢業後，你選擇成為一個${insuranceTypeItem.label}，`
+    }
+    if (careerHeadCount) {// 企業主
+        story += `成立了${careerHeadCount}人公司，`
+    }
+    if (insurance.futureSeniority) {
+        story += `競競業業的工作了${insurance.futureSeniority}年，並在${retireAge}歲時選擇退休。`
+    }
+    // spouse
+    if (yearOfMarriage) {
+        story += `感情方面，你在${yearOfMarriage}年時，遇見你的真愛，`
+    }
+    if (headCount > 1) {
+        story += `你們共組了${headCount}人的家庭，`
+    }
+    if (independantAge) {
+        story += `並將照顧子女的責任，延續到他們${independantAge}歲了為止。`
+    }
+    // mortgage
+    if (downpayYear) {
+        story += `${downpayYear}年是你置產的時間，這得來不易的安居地`
+        if (county) {
+            const countyItem = counties.find(item => item.value === county)
+            if (countyItem) {
+                story += `坐落於${countyItem.label}`
+                if (town) {
+                    const towns = townMap[county]
+                    const townItem = towns.find(item => item.value === town)
+                    if (townItem) {
+                        story += `${townItem.label}，`
+                    }
+                }
+            }
+        }
+        story += `為你提供了一切生活所需。`
+    }
+    const qualityLevelLabel = ['清貧', '尚可', '普通', '不錯', '優渥']
+    story += `你維持著${qualityLevelLabel[qualityLevel - 1]}的退休生活，直到生命的最後一天。`
+    return story
+}
+</script>
\ No newline at end of file
diff --git a/components/calculator/index.vue b/components/calculator/index.vue
index 859bdf4..f645936 100644
--- a/components/calculator/index.vue
+++ b/components/calculator/index.vue
@@ -19,6 +19,10 @@
             </template>
         </el-dialog>
 
+        <h2 id="_基本資料" tabindex="-1">
+            基本資料
+            <a class="header-anchor" href="#基本資料" aria-label="Permalink to &quot;基本資料&quot;">&ZeroWidthSpace;</a>
+        </h2>
         <Profile v-model="userForm.profile" :user="user" :config="config" ref="ProfileRef" @sign-out="signOut()"
             @upload="setUserAndInitialize($event, { showMessage: true })" @update:modelValue="onProfileChanged()">
         </Profile>
@@ -83,7 +87,7 @@
 
         <h2 id="_試算結果" tabindex="-1">試算結果<a class="header-anchor" href="#試算結果"
                 aria-label="Permalink to &quot;試算結果&quot;">&ZeroWidthSpace;</a></h2>
-        <Bechmark></Bechmark>
+        <Bechmark v-model="userForm" :config="config"></Bechmark>
         <br>
         <DataCenter @export="exportUserForm()"></DataCenter>
     </div>
@@ -123,6 +127,7 @@ const config = reactive({
     buildingTypes: [],
     buildingAges: [],
     retirementQuartile: [],
+    insuranceTypes: [],
     // object types
     townMap: {},
     portfolioIRR: {},
@@ -151,6 +156,7 @@ async function setSelecOptionSync() {
         config.buildingAges = selectResJson.buildingAges || []
         config.genders = selectResJson.genders || []
         config.retirementQuartile = selectResJson.retirementQuartile || []
+        config.insuranceTypes = selectResJson.insuranceTypes || []
         Object.assign(config.townMap, selectResJson.townMap)
         // 由爬蟲抓回的設定
         const interestRate = await bankConfigRes[1].json()
diff --git a/components/calculator/profile.vue b/components/calculator/profile.vue
index daed2c9..2cf3254 100644
--- a/components/calculator/profile.vue
+++ b/components/calculator/profile.vue
@@ -1,120 +1,97 @@
 <template>
-    <div>
-        <h2 id="_基本資料" tabindex="-1">
-            基本資料
-            <a class="header-anchor" href="#基本資料" aria-label="Permalink to &quot;基本資料&quot;">&ZeroWidthSpace;</a>
-        </h2>
-        <el-card>
-            <template #header>
-                <div class="card-header card-header--custom">
-                    <span>基本資料與參數</span>
-                    <div class="header__btnGroup">
-                        <el-upload v-model:file-list="fileList" :limit="1" :show-file-list="false"
-                            @success="handleChange">
-                            <el-button>匯入</el-button>
-                        </el-upload>
-                        <el-button v-if="!user.uid" @click="openSignInDialog()">登入</el-button>
-                        <el-button v-else @click="emits('signOut')">登出</el-button>
-                    </div>
+    <el-card>
+        <template #header>
+            <div class="card-header card-header--custom">
+                <span>基本資料與參數</span>
+                <div class="header__btnGroup">
+                    <el-upload v-model:file-list="fileList" :limit="1" :show-file-list="false" @success="handleChange">
+                        <el-button>匯入</el-button>
+                    </el-upload>
+                    <el-button v-if="!user.uid" @click="openSignInDialog()">登入</el-button>
+                    <el-button v-else @click="emits('signOut')">登出</el-button>
                 </div>
-            </template>
-            <el-form ref="ruleFormRef" label-width="auto">
-                <el-row>
-                    <el-col v-if="user.photoURL" :span="12">
-                        <el-form-item :label="user.displayName">
-                            <el-avatar :src="user.photoURL"></el-avatar>
-                        </el-form-item>
-                    </el-col>
-                    <el-col v-if="user.email" :span="12">
-                        <el-form-item label="註冊信箱">
-                            <el-text>{{ user.email }}</el-text>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="12">
-                        <el-form-item label="出生年" required>
-                            <econSelect v-model="profile.yearOfBirth" @change="calculateProfile()" style="width: 130px"
-                                :options="birthYearOptions">
-                            </econSelect>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="試算年齡">
-                            <el-text>{{ profile.age }} 歲</el-text>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="12">
-                        <el-form-item label="性別" required>
-                            <el-radio-group v-model="profile.gender" @change="calculateProfile()">
-                                <el-radio v-for="(item, key) in config.genders" :value="item.value">
-                                    {{ item.label }}
-                                </el-radio>
-                            </el-radio-group>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="預估餘命">
-                            <el-text>{{ profile.lifeExpectancy }} 年</el-text>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="12">
-                        <el-form-item label="職業保險別" required>
-                            <econSelect v-model="profile.careerInsuranceType" @change="calculateProfile()"
-                                style="width: 130px" :options="insuranceTypeOptions">
-                            </econSelect>
-                            <!-- <el-radio-group v-model="profile.careerInsuranceType" @change="calculateProfile()">
-                                <el-radio v-for="(item) in insuranceTypeOptions" :value="item.value">
-                                    {{ item.label }}
-                                </el-radio>
-                            </el-radio-group> -->
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="通貨膨脹">
-                            <el-text>{{ config.inflationRate }}%</el-text>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <!-- <el-row>
-                    <el-col :span="12">
-                        <el-form-item label="配偶婚年" required>
-                            <econSelect v-model="profile.yearOfMarriage" @change="calculateProfile()"
-                                style="width: 130px" :items="marriageYearOptions" placeholder="未婚">
-                            </econSelect>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                    </el-col>
-                </el-row> -->
-            </el-form>
-            <template #footer>
-                <el-collapse>
-                    <el-collapse-item title="試算說明" name="1" :border="true">
-                        <ul>
-                            <li>
-                                預期餘命：<a href="https://data.gov.tw/dataset/39493" target="_blank">預期壽命推估</a>
-                            </li>
-                            <li>
-                                通貨膨脹(消費者物價指數年增率)：<a href="https://www.stat.gov.tw/Point.aspx?sid=t.2&n=3581&sms=11480"
-                                    target="_blank">中華民國統計資訊網</a>
-                            </li>
-                        </ul>
-                    </el-collapse-item>
-                </el-collapse>
-            </template>
-        </el-card>
-        <el-dialog v-model="loginDialogVisible" title="登入" :fullscreen="isFullScreen">
-            <p>
-                歡迎您使用我們的服務！註冊後，您可以輕鬆使用我們的平台，因為您的資料將被安全儲存，包括電子郵件地址和填寫的表單內容。這樣做是為了方便您下次登入時無需重新輸入表單資料，提供更順暢的使用體驗。我們十分尊重您的隱私，您的資料將受到保護並嚴格保密。
-            </p>
-            <div id="firebaseui-auth-container"></div>
-        </el-dialog>
-    </div>
+            </div>
+        </template>
+        <el-form ref="ruleFormRef" label-width="auto">
+            <el-row>
+                <el-col v-if="user.photoURL" :span="12">
+                    <el-form-item :label="user.displayName">
+                        <el-avatar :src="user.photoURL"></el-avatar>
+                    </el-form-item>
+                </el-col>
+                <el-col v-if="user.email" :span="12">
+                    <el-form-item label="註冊信箱">
+                        <el-text>{{ user.email }}</el-text>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="出生年" required>
+                        <econSelect v-model="profile.yearOfBirth" @change="calculateProfile()" style="width: 130px"
+                            :options="birthYearOptions">
+                        </econSelect>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="試算年齡">
+                        <el-text>{{ profile.age }} 歲</el-text>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="性別" required>
+                        <el-radio-group v-model="profile.gender" @change="calculateProfile()">
+                            <el-radio v-for="(item, key) in config.genders" :value="item.value">
+                                {{ item.label }}
+                            </el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="預估餘命">
+                        <el-text>{{ profile.lifeExpectancy }} 年</el-text>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="職業保險別" required>
+                        <econSelect v-model="profile.careerInsuranceType" @change="calculateProfile()"
+                            style="width: 130px" :options="config.insuranceTypes">
+                        </econSelect>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="通貨膨脹">
+                        <el-text>{{ config.inflationRate }}%</el-text>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <template #footer>
+            <el-collapse>
+                <el-collapse-item title="試算說明" name="1" :border="true">
+                    <ul>
+                        <li>
+                            預期餘命：<a href="https://data.gov.tw/dataset/39493" target="_blank">預期壽命推估</a>
+                        </li>
+                        <li>
+                            通貨膨脹(消費者物價指數年增率)：<a href="https://www.stat.gov.tw/Point.aspx?sid=t.2&n=3581&sms=11480"
+                                target="_blank">中華民國統計資訊網</a>
+                        </li>
+                    </ul>
+                </el-collapse-item>
+            </el-collapse>
+        </template>
+    </el-card>
+    <el-dialog v-model="loginDialogVisible" title="登入" :fullscreen="isFullScreen">
+        <p>
+            歡迎您使用我們的服務！註冊後，您可以輕鬆使用我們的平台，因為您的資料將被安全儲存，包括電子郵件地址和填寫的表單內容。這樣做是為了方便您下次登入時無需重新輸入表單資料，提供更順暢的使用體驗。我們十分尊重您的隱私，您的資料將受到保護並嚴格保密。
+        </p>
+        <div id="firebaseui-auth-container"></div>
+    </el-dialog>
 </template>
 <script setup lang="ts">
 /**
@@ -126,7 +103,7 @@
  * FirebaseUI for Web — Auth
  * https://firebaseopensource.com/projects/firebase/firebaseui-web/
  */
- const { VITE_BASE_URL } = import.meta.env
+const { VITE_BASE_URL } = import.meta.env
 import { ref, nextTick, computed, onMounted, onBeforeUnmount } from 'vue'
 import firebase from 'firebase/compat/app';
 import econSelect from '../econSelect.vue'
@@ -162,38 +139,6 @@ const props = defineProps({
 })
 const birthYearOptions = ref<any[]>([])
 const marriageYearOptions = ref<any[]>([])
-const insuranceTypeOptions = ref([
-    {
-        label: '勞工(勞保)',
-        value: 'employee',
-        disabled: false,
-    },
-    {
-        label: '企業主/自營(勞保)',
-        value: 'entrepreneur',
-        disabled: false,
-    },
-    {
-        label: '公教人員(公保)',
-        value: 'civilServant',
-        disabled: false,
-    },
-    {
-        label: '軍職人員(未完成)',
-        value: 'military',
-        disabled: true,
-    },
-    {
-        label: '農民(未完成)',
-        value: 'farmer',
-        disabled: true,
-    },
-    {
-        label: '國民(未完成)',
-        value: 'national',
-        disabled: true,
-    }
-])
 const isFullScreen = ref(false)
 // hooks
 onMounted(async () => {