add story

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>
+</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>

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()