From cbd3dd0632db02f147f27107971b6b5c22e035cf Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期二, 28 十二月 2021 12:32:55 +0800
Subject: [PATCH] [尚未完成] 編輯 AgentInfo

---
 PAMapp/pages/agentInfo/_agentNo.vue |  132 ++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 122 insertions(+), 10 deletions(-)

diff --git a/PAMapp/pages/agentInfo/_agentNo.vue b/PAMapp/pages/agentInfo/_agentNo.vue
index a3b562f..d5d6253 100644
--- a/PAMapp/pages/agentInfo/_agentNo.vue
+++ b/PAMapp/pages/agentInfo/_agentNo.vue
@@ -3,14 +3,15 @@
       <el-row
         type="flex"
         justify="center">
-        <UiAvatar :size="150" :fileName="agentInfo.image"></UiAvatar>
+        <UiAvatar :size="150" :fileName="agentInfo.img"></UiAvatar>
       </el-row>
 
       <el-row
         type="flex"
         class="pt-10"
         justify="center"
-        align="middle">
+        align="middle" v-if="!hideReviews">
+        <!-- TODO:���遛��漲 -->
           <i class="pam-icon icon--primary icon-star"></i>
           <h3 class="mdTxt">{{ agentInfo.avgScore }}</h3>
       </el-row>
@@ -57,7 +58,10 @@
         </UiField>
       </el-row>
 
-      <el-row
+      <!-- TODO: 靘�� 2021/12/10 10:30 ��� Charles ����������漲甈��＊蝷� [Tomas, 2021/12/10] -->
+      <!-- REF:  https://reurl.cc/OkO6Q9-->
+
+      <!-- <el-row
         type="flex"
         v-if="agentInfo.suitability"
         class="pam-paragraph">
@@ -83,7 +87,7 @@
             </el-progress>
           </div>
         </el-col>
-      </el-row>
+      </el-row> -->
 
       <el-row
         type="flex"
@@ -111,7 +115,7 @@
         class="pam-paragraph">
         <UiField icon="flag" label="撠����">
           <div class="pam-field-experts">
-            <div class="text--orange bold pr-10" v-for="(expert, index) in agentInfo.expertises" :key="index">
+            <div class="text--orange bold pr-10" v-for="(expert, index) in agentInfo.expertise" :key="index">
               #{{ expert }}
             </div>
           </div>
@@ -130,8 +134,8 @@
         type="flex"
         class="pam-paragraph">
         <UiField icon="school" label="�犖��">
-          <span v-for="(experience, index) in agentInfo.expertiseList" :key="index">
-            {{ experience }}<span v-if="index !== agentInfo.expertiseList.length - 1">, </span>
+          <span>
+            {{ agentInfo.experiences }}
           </span>
         </UiField>
       </el-row>
@@ -165,7 +169,6 @@
     </PopUpFrame>
 
     <PopUpFrame
-      drawerSize="40%"
       :isOpen.sync="isAlertFieldInfo"
       >
         <div class="text--center mdTxt fs-18">
@@ -179,11 +182,120 @@
             </div>
         </div>
     </PopUpFrame>
+    <div class="consultant-edit-btn" v-if="currentRole === role.ADMIN">
+      <el-button type="primary" @click.native="$router.push(`/agentInfo/edit/${agentInfo.agentNo}`)">蝺刻摩撣單鞈��</el-button>
+    </div>
     </div>
 </template>
 
-<script src="./agent-info.component.ts"></script>
+<script lang="ts">
+import { Context } from '@nuxt/types';
+import { namespace } from 'nuxt-property-decorator';
+import { Vue, Component } from 'vue-property-decorator';
+
+import myConsultantService from '~/shared/services/my-consultant.service';
+import { AgentInfo } from '~/shared/models/agent-info.model';
+import { hideReviews } from '~/shared/const/hide-reviews';
+import { Role } from '~/shared/models/enum/Role';
+
+const roleStorage = namespace('localStorage');
+
+@Component
+export default class AgentInfoComponent extends Vue {
+  @roleStorage.Getter currentRole!:string|null;
+  role = Role;
+  agentInfo!: AgentInfo;
+  isAlertAddSuccess = false;
+  isAlertFieldInfo = false;
+  fieldInfoTitle = '';
+  fieldInfoDesc = '';
+  hideReviews = hideReviews ;
+
+  //////////////////////////////////////////////////////////////////////
+
+  get agentName(): string {
+    return `${this.agentInfo.name}(${this.agentInfo.role})`;
+  }
+
+  async asyncData(context: Context) {
+    const agentNo = context.route.params.agentNo;
+    return {
+      agentInfo: await myConsultantService.getConsultantDetail(agentNo).then((res) => res)
+    }
+  }
+
+  alertAddSuccess(): void {
+      this.isAlertAddSuccess = true;
+  }
+
+  alertFieldInfo(field: string): void {
+    this.isAlertFieldInfo = true;
+    switch(field) {
+      case 'suitability':
+        this.fieldInfoTitle = '���漲';
+        this.fieldInfoDesc = '���漲��������翰�祟�敺����雿�憿批����脰�������蝯行�����潘��隞乩������“������潦��';
+        break;
+      case 'evaluation':
+        this.fieldInfoTitle = '隢株岷摨西”�';
+        this.fieldInfoDesc = '隢株岷摨西”��撠��雿�憿批�������垣閰Ｘ���脰�������蝯行�����潦��';
+        break;
+    }
+  }
+}
+
+</script>
 
 <style lang="scss">
-  @import "./agent-info.component.scss";
+.pam-icon {
+  font-size: 15px;
+  padding-right: 8px;
+  color: $PRUDENTIAL_GREY;
+  &.icon--primary {
+    color: $PRIMARY_RED;
+  }
+}
+.pam-field {
+  display: flex;
+  flex-direction: column;
+  .pam-field__label {
+    display: flex;
+    align-items: center;
+    .pam-icon {
+      font-size: 12px;
+    }
+    .pam-field__title {
+      font-size: 16px;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+.pam-field-suitability {
+  .el-progress-bar__inner {
+    background-color: $LIGHT_BLUE !important;
+  }
+}
+
+.pam-field-evaluation {
+  .el-progress-bar__inner {
+    background-color: $TEAL_GREEN!important;
+  }
+}
+
+.pam-field-experts {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.pam-progress__label {
+  justify-content: space-between;
+  flex-wrap: wrap;
+  line-height: 24px;
+}
+.consultant-edit-btn{
+  display: flex;
+  justify-content: center;
+}
 </style>

--
Gitblit v1.8.0