Update#178944: 移除 lodash 套件

Tomas

2023-12-25 f065760fa7df1f88747395ab4b55349ce8b2faf0

 PAMapp/pages/questionnaire/_agentNo.vue

@@ -1,405 +1,602 @@
<template>
    <div class="ques-page">
        <div class="pb-18">
            <span class="mdTxt">在預約之前，請幫助我們填寫以下問題(<i style="color: #FF0000">*</i>必填)</span>
  <div class="ques-page--reset" v-if="isUserLogin">
    <div class="ques-header">
        <div class="ques-header__mob-banner"></div>
        <div
          class="ques-header__info"
          v-if="myRequest.contactType==='phone'">
          <div class="text--middle">
              <div class="mdTxt">您指定的聯繫方式</div>
              <div class="mt-10">
                  <span>手機：</span>
                  <span>{{myRequest.phone}}</span>
              </div>
          </div>
          <div class="mt-30">
              <div class="datepicker required">
                  <span class="mdTxt">手機連絡的方便時間</span>
                  <PhoneContactTimePicker
                  :scheduleList="myRequest.hopeContactTime"/>
              </div>
          </div>
          <div class="mt-30">
              <div class="mdTxt">其他備用聯繫方式</div>
              <div class="ques-header__input-block">
                  <span>Email：</span>
                  <input class="ques-header__input  break"
                    :class="{ 'is-invalid': !emailValid}"
                    placeholder="請輸入"
                    v-model="myRequest.email">
              </div>
              <div class="error mt-5 mb-5" style="margin-left:65px">
                  <span v-show="!emailValid">Email格式有誤</span>
              </div>
          </div>
        </div>
        <div class="pb-18">
            <span class="mdTxt required">請問您希望保險顧問以電話或Email聯繫您呢?</span>
            <span class="hint">可複選</span>
        <div class="ques-header__info" v-else>
          <div class="text--middle">
              <div class="mdTxt">您指定的聯繫方式</div>
              <div class="mt-10 ques-header__input-block">
                  <span>Email：</span>
                  <span class=" break">{{myRequest.email}}</span>
              </div>
          </div>
          <div class="mt-30">
              <div class="mdTxt">其他備用聯繫方式</div>
              <div class="ques-header__input-block">
                  <span>手機 : </span>
                  <input class="ques-header__input ml-4"
                    :class="{'is-invalid': !phoneValid}"
                    placeholder="請輸入"
                    maxlength="10"
                    v-model="myRequest.phone">
              </div>
              <div class="error mt-5 " style="margin-left:65px">
                <span v-show="!phoneValid">手機號碼格式有誤</span>
              </div>
          </div>
          <div class="mt-30" v-if="myRequest.phone && phoneValid">
              <div class="datepicker">
                  <span class="mdTxt">手機連絡的方便時間</span>
                  <PhoneContactTimePicker
                  :scheduleList="myRequest.hopeContactTime"/>
              </div>
          </div>
        </div>
        <div class="pam-tags">
            <el-button
             class="contactMax Btn"
              :class="{ 'active': isConnectMobile }"
              @click="toggleConnectDevice('mobile')"
            >
              手機
            </el-button>
            <el-button
              class="contactMax Btn"
              :class="{ 'active': isConnectEmail}"
              @click="toggleConnectDevice('email')"
            >
              Email
            </el-button>
    </div>
    <div class="ques-container">
      <div class="pam-paragraph">
        <div class="mdTxt">
            想了解的領域
            <span class="hint text--bold">
                (可複選)
            </span>
            <i class="icon-information text--bold" @click="showDrawer = true"></i>
        </div>
        <div class="connectDesktop">
            <div v-if="isConnectMobile">
                <span class="fz-20 phone-no">
                  0912345678
                </span>
            </div>
            <el-row class="pb-10 pt-10">
                <el-input
                  v-if="isConnectEmail"
                  class="pam-input"
                  placeholder="請輸入電子郵件信箱"
                  v-model="myRequest.email">
                </el-input>
            </el-row>
            <div v-if="isConnectMobile">
                <div class="datepicker">
                    <span class="mdTxt required">手機連絡的方便時間</span>
                    <PhoneContactTimePicker
                      :scheduleList.sync="myRequest.hopeContactTime"/>
                </div>
            </div>
        </div>
        <MultiSelectBtn class="mt-10"
          :mutiSelect.sync="myRequest.requirement"
          :options="requirementOptions" />
      </div>
      <div class="pam-paragraph">
        <div class="mdTxt">諮詢方式</div>
        <SingleSelectBtn class="mt-10"
           :singleSelected.sync="myRequest.consultationMethod"
           :options="consultationMethodOptions" />
      </div>
      <div class="pam-paragraph">
        <div class="mdTxt">您的性別</div>
        <SingleSelectBtn class="mt-10"
          :singleSelected.sync="myRequest.gender"
          :options="genderOptions" />
      </div>
      <div class="pam-paragraph">
        <div class="mdTxt">您的年齡</div>
        <SingleSelectBtn class="mt-10"
          :singleSelected.sync="myRequest.age"
          :options="ageRangeOptions" />
      </div>
      <div class="pam-paragraph">
        <CareerSelect :careerSelect.sync="myRequest.job"/>
      </div>
      <div class="pam-paragraph ques-footer">
        <el-button type="primary"
          :disabled="isDisabledSubmitBtn"
          @click.native="sentDemand">
          {{isEditBtn ? '更新' : '送出'}}
        </el-button>
      </div>
    </div>

        <div class="mb-30">
            <div>
            <div class="pb-10 mt-10 mdTxt required">
                想要詢問的問題
                <span class="hint text--bold">
                    (可複選)
                </span>
                <i class="icon-information text--bold" @click="showDrawer = true"></i>
            </div>
              <ConsultantQues
                @change="myRequest.myQuestion = $event"
                :selectedQuestions="myRequest.myQuestion"
                class="mb-30"/>
            </div>
        </div>
        <div>
            <div class="pb-10 mdTxt pt-10">您的性別</div>
            <div class="mb-30 pam-tags">
                <el-button class="desktopBtn tags" @click="myRequest.gender = 'male'" :class="{ 'active': myRequest.gender ==='male'}">男性</el-button>
                <el-button class="desktopBtn tags" @click="myRequest.gender = 'female'" :class="{'active': myRequest.gender === 'female'}">女性</el-button>
            </div>
        </div>
        <div class="mdTxt pb-10">年齡</div>
        <div class="pam-age-tags">
            <div>
                <el-button class="ageDesktop" @click="myRequest.age = '20'" :class="{'active': myRequest.age === '20'}">20歲以下</el-button>
                <el-button class="ageDesktop" @click="myRequest.age = '30'" :class="{'active': myRequest.age === '30'}">21-30歲</el-button>
                <el-button class="ageDesktopP2" @click="myRequest.age = '40'" :class="{'active': myRequest.age === '40'}">31-40歲</el-button>
                <el-button class="ageDesktop" @click="myRequest.age = '50'" :class="{'active': myRequest.age === '50'}">41-50歲</el-button>
                <el-button class="ageDesktopP2" @click="myRequest.age = '55'" :class="{'active': myRequest.age === '55'}">46-55歲</el-button>
                <el-button class="ageDesktop " @click="myRequest.age = '60'" :class="{'active': myRequest.age === '60'}">51-60歲</el-button>
                <el-button class="ageDesktopP2" @click="myRequest.age = '70'" :class="{'active': myRequest.age === '70'}">61-70歲</el-button>
                <el-button class="mb-10" @click="myRequest.age = '71'" :class="{'active': myRequest.age === '71'}">71歲以上</el-button>
            </div>
        </div>
    <PopUpFrame :isOpen.sync="showDrawer">
      <div class="qaTextTitle mdTxt">
        <strong>想了解的領域</strong>
      </div>
      <div class="qa-dialog">
          <div v-for="(qaText,index) in quesAboutList" :key="index" >
              <div class="pt-10">
                  <p class="p bold">{{qaText.title}}</p>
                  <p class="p">{{qaText.content}}</p>
              </div>
          </div>
      </div>
      <div class="text--center mdTxt mt-10">
          <el-button type="primary" @click="showDrawer = false">我知道了</el-button>
      </div>
    </PopUpFrame>

        <div class="mdTxt pt-10 pb-10">職業</div>
        <div class="job-pick" @click="showJobDrawer = true">
            <input class="fz-20 pl-18 input"
                style="outline:none margin-right:-18px"
                @click="showJobDrawer = true"
                placeholder="請選擇"
                :value="myRequest.job === '其他'
                        ? `其他, ${ myRequest.otherJob }`
                        : myRequest.job"
            >
              <i class="icon-down down-icon" style="margin-right:18px" @click="showJobDrawer = true" ></i>
    <PopUpFrame :isOpen.sync="sendReserve" @update:isOpen="closeReservePopUp">
        <div class="mdTxt mt-30 sendReserve-txt">預約成功！</div>
        <div class="mdTxt sendReserve-txt mb-30">您預約的顧問會儘速與您聯絡！</div>
        <div class="pam-app-review mb-10">
          <div class="mdTxt mb-10">對於
                <span class="mdTxt text--primary text--bold ">服務媒合</span>
                平台的整體服務，
            </div>
          <div class="mdTxt">您給予幾顆星評價？</div>
        </div>

        <div class="ques-footer">
        <el-rate v-model="score" class="pam-satisfaction-rate fix-chrome-click--issue"></el-rate>
        <div class="text--center mdTxt">
          <el-button @click="closeReservePopUp">略過</el-button>
          <el-button type="primary"
            :disabled="isInitScheduleDisabled || !isSelectedQues"
            @click.native="sentDemand"
          >
            @click="reviewPlatform">
            送出
          </el-button>
        </div>
    </PopUpFrame>

        <PopUpFrame :isOpen.sync="showDrawer" :drawerSize=" '95%' ">
            <div class="qaTextTitle mdTxt"><strong>想要詢問的問題</strong></div>
                <div class="qa-dialog">
                    <div v-for="(qaText,index) in queaAboutList" :key="index" >
                        <div class="pt-10">
                            <p class="p bold">{{qaText.title}}</p>
                            <p class="p">{{qaText.content}}</p>
                        </div>
                    </div>
                </div>
            <div class="text--center mdTxt mt-10">
                <el-button type="primary" @click="showDrawer = false">我知道了</el-button>
            </div>
        </PopUpFrame>

        <PopUpFrame :isOpen.sync="showJobDrawer" drawerSize='60%'>
            <div class="job-drawerTxt fz-20">
                <div class="subTitle mt-18">職業</div>

                <div class="radio-btn">
                    <el-radio-group  class="pam-radio-group--col" v-model="myRequest.job">
                        <el-radio-button style="margin-top:30px" text-color='#F09491' label="外勤"></el-radio-button>
                        <el-radio-button style="margin-top:30px" label="內勤"></el-radio-button>
                        <el-radio-button style="margin-top:30px" label="其他"></el-radio-button>
                    </el-radio-group>
                </div>
                <div class="job-inputDiv"><input v-if="myRequest.job === '其他'" class="job-input mb-30 fz-20 pl-20" v-model="myRequest.otherJob" > </div>
                <el-button type="primary" class="job-drawerBtn" @click="showJobDrawer = false">確定</el-button>
            </div>
        </PopUpFrame>

        <PopUpFrame :isOpen.sync="sendReserve" @update:isOpen="closeReservePopUp">
            <div class="fz-20 mt-30 sendReserve-txt">預約成功！您預約的保險顧問會</div>
            <div class="fz-20 sendReserve-txt">儘速與您聯絡！</div>
            <div class="text--center mdTxt">
                <el-button
                    type="primary"
                    @click="closeReservePopUp"
                >我知道了</el-button>
            </div>
        </PopUpFrame>

    </div>
    <PopUpFrame :isOpen.sync="isEditPopup">
      <div class="text--middle text--center mb-10">已於
        <span class="bold">{{appointmentTime | formatDate}}</span>
      進行預約，</div>
      <div class="text--middle text--center mb-30">是否繼續編輯？</div>
      <div class="text--center mdTxt">
        <el-button @click="$router.go(-1)">返回</el-button>
        <el-button @click="isEditPopup = false" type="primary">編輯</el-button>
      </div>
    </PopUpFrame>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { addFavoriteConsultant, appointmentDemand, AppointmentParams, AppointmentRequests } from '~/assets/ts/api/consultant';
import { getRequestsFromStorage, setRequestsToStorage } from '~/assets/ts/storageRequests';
import { Vue, Component, State, Action, Watch, namespace } from 'nuxt-property-decorator';
import { getRequestsFromStorage, removeRequestQuestionFromStorage, setRequestsToStorage } from '~/shared/storageRequests';

@Component
    export default class Questionnaire extends Vue {
import accountSettingService from '~/shared/services/account-setting.service';
import appointmentService from '~/shared/services/appointment.service';
import authService from '~/shared/services/auth.service';
import queryConsultantService from '~/shared/services/query-consultant.service';
import reviewsService from '~/shared/services/reviews.service';
import { Consultant } from '~/shared/models/consultant.model';
import { ContactType } from '~/shared/models/enum/ContactType';
import { Gender } from '~/shared/models/enum/Gender';
import { RegisterInfo } from '~/shared/models/registerInfo';
import { AppointmentParams, AppointmentRequests } from '~/shared/models/appointment.model';
import { UserSetting } from '~/shared/models/account.model';
import { SatisfactionType } from '~/shared/models/enum/satisfaction-type';
import { UserReviewParams } from '~/shared/models/reviews.model';

                myRequest: AppointmentRequests = {
                  connectDevices: [],
                  hopeContactTime: [{
                    selectWeekOptions:[],
                    selectTimesOptions:[],
                  }],
                  gender: '',
                  email: '',
                  job: '',
                  otherJob: '',
                  myQuestion: [],
                  age: '',
                };
  const roleStorage = namespace('localStorage');
  @Component
  export default class Questionnaire extends Vue {
    @State('myConsultantList')
    myConsultantList!: Consultant[];

                showDrawer= false;
                showJobDrawer = false;
                sendReserve = false;
    @Action
    storeConsultantList!: () => Promise<number>;

                queaAboutList = [
                  {
                      title:'健康與保障',
                      content:'突發的意外或疾病，往往造成個人或家庭沉重的經濟負擔，周全的保險才能擁有一個無憂的未來。'
                  },
                  {
                      title:'子女教育',
                      content:'利用分紅保單，規劃教育基金 提早為子女作準備，讓生活更有保障！'
                  },
                  {
                      title:'資產規劃',
                      content:'當財務責任加重時，規劃充足的保障、提供經濟上的庇護，是人生最堅強的後盾。'
                  },
                  {
                      title:'樂活退休',
                      content:'兼具保險與投資雙重功能，可靈活搭配各種附約，順應人生不同階段的靈活需要。'
                  },
                  {
                      title:'保單健檢/規劃',
                      content:'全面檢視自己的保障結構是否符合現在或未來的風險移轉需求，透過「斷、捨、離」把錢花在刀口上。'
                  },
                  {
                      title:'防疫保單',
                      content:'匹配度是透過嚴選配對或快速篩選後，將每一位保險顧問資料進行比對後排序推薦給您的媒合數值，您可以作為選擇適合顧問的參考值。'
                  }
                ];
    @roleStorage.Getter
    isUserLogin!:boolean;

                agentNo!: string;
    @roleStorage.State
    recommendConsultantItem!:string;

                get disableActionButton(): boolean {
                    return true;
                };
    @roleStorage.Mutation
    storageUserInfo!: (params: RegisterInfo) => void;

                get isConnectMobile(): boolean {
                    return this.myRequest.connectDevices.includes('mobile');
                }
    score = 0;

                get isConnectEmail(): boolean {
                    return this.myRequest.connectDevices.includes('email');
                }
    genderOptions=[
      {
        title:'男性',
        label:Gender.MALE,
      },
      {
        title:'女性',
        label:Gender.FEMALE,
      }
    ];

                get isSelectedQues(): boolean {
                  return !!this.myRequest.myQuestion.length;
                }
    consultationMethodOptions = [
      {
        title: '線上',
        label: 'online'
      },
      {
        title: '線下',
        label: 'offline'
      }
    ];

                get isInitScheduleDisabled() {
                  if (this.isConnectMobile && this.isConnectEmail) {
                      return !this.myRequest?.hopeContactTime[0]?.selectWeekOptions?.length
                          || !this.myRequest?.hopeContactTime[0]?.selectTimesOptions?.length
                          || !this.myRequest.email
                  } else if (this.isConnectMobile) {
                      return !this.myRequest?.hopeContactTime[0]?.selectWeekOptions?.length
                        || !this.myRequest?.hopeContactTime[0]?.selectTimesOptions?.length
                  } else if (this.isConnectEmail) {
                      return !this.myRequest.email
                  }
                  return true;
                }
    requirementOptions=[
      {
        title:'健康與保障',
        label:'健康與保障',
      },
      {
        title:'子女教育',
        label:'子女教育',
      },
      {
        title:'資產規劃',
        label:'資產規劃',
      },
      {
        title:'樂活退休',
        label:'樂活退休',
      },
      {
        title:'保單健檢/規劃',
        label:'保單健檢/規劃',
      },
      {
        title:'分紅保單',
        label:'分紅保單',
      },
    ];

                mounted() {
                    this.agentNo = this.$route.params.agentNo;
                    const storageMyRequest = getRequestsFromStorage();
                    if (storageMyRequest) {
                      this.myRequest = storageMyRequest;
                    }
                }
    ageRangeOptions=[
      {
        title:'20歲以下',
        label:'under_20',
      },
      {
        title:'21-30 歲',
        label:'21-30'
      },
      {
        title:'31-40 歲',
        label:'31-40'
      },
      {
        title:'41-50 歲',
        label:'41-50'
      },
      {
        title:'51-60 歲',
        label:'51-60',
      },
      {
        title:'61-70 歲',
        label:'61-70',
      },
      {
        title:'71 歲以上',
        label:'over_71',
      }
    ];

                toggleConnectDevice(selectDevice: 'mobile' | 'email'): void {
                    const deviceSelected = this.myRequest.connectDevices.includes(selectDevice);
                    if (deviceSelected) {
                        const deviceIndex = this.myRequest.connectDevices.findIndex((device) => device === selectDevice);
                        this.myRequest.connectDevices.splice(deviceIndex, 1);
    quesAboutList = [
      {
          title:'健康與保障',
          content:'唯有把身體照顧好，才是保障幸福之本，不做盲目燃燒的蠟燭，只做綻開的陽光，陪孩子多走一哩路，人生的美正要開展。'
      },
      {
          title:'子女教育',
          content:'孩子，我們是雙方的導師也是學生，面對未來要並肩作戰，學會勇敢無畏、克服挫折、善於理財，這條路上我們一起學。'
      },
      {
          title:'資產規劃',
          content:'真正的財富來自嚴謹規劃資產傳承，為人生蓋一堵抵禦財務風險的牆，確保資產穩健成長，替全家族的未來做好萬全準備。'
      },
      {
          title:'樂活退休',
          content:'拼一輩子，退休後的日子要輕鬆快活，就得提早透過保險商品規劃退休財務，替自己創造穩定收入，為精彩的熟年人生揭開序幕。'
      },
      {
          title:'保單健檢/規劃',
          content:'全面檢視自己的保障結構是否符合現在或未來的風險移轉需求。'
      },
      {
          title:'分紅保單',
          content:'分紅保單是兼具「分攤風險」與「紅利共享」特色的保單，具有一定穩定度，讓您可以同時享有壽險保障及紅利！'
      }
    ];

                        if (selectDevice === 'mobile') {
                            this.myRequest.hopeContactTime = [{
                                selectWeekOptions:[],
                                selectTimesOptions:[],
                            }]
                        }
    myRequest: AppointmentRequests = {
      name           : '',
      phone          : '',
      email          : '',
      contactType    : this.userInfo?.contactType === ContactType.SMS ? ContactType.PHONE: ContactType.EMAIL,
      gender         : '',
      age            : '',
      job            : '',
      requirement    : [],
      hopeContactTime: [{
        selectWeekOptions : [],
        selectTimesOptions: [],
      }],
      agentNo: '',
      consultationMethod: '',
    };

                        if (selectDevice === 'email') {
                            this.myRequest.email = '';
                        }
                        return;
                    }
                    this.myRequest.connectDevices.push(selectDevice);
                }
    showDrawer= false;
    sendReserve = false;
    isEditPopup = false;
    isEditBtn = false;

                sentDemand() {
                    addFavoriteConsultant([this.agentNo]).then(res => this.sentAppointmentDemand());
                }
    appointmentId = 0;
    appointmentTime = '';

                sentAppointmentDemand() {
                    const data: AppointmentParams = {
                        phone: '09123456789',
                        email: this.myRequest.email,
                        contactType: this.myRequest.connectDevices.toString(),
                        gender: this.myRequest.gender,
                        age: this.myRequest.age,
                        job: this.myRequest.job !== '其他' ? this.myRequest.job : this.myRequest.otherJob,
                        requirement: this.myRequest.myQuestion
                                      .filter((ques) => ques.selected)
                                      .map((selQues) => selQues.name).toString(),
                        hopeContactTime: this.getHopeContactTime(),
                        agentNo: this.agentNo
                    };
    ////////////////////////////////////////////////////////////////////////////

                    appointmentDemand(data).then(res => {
                        this.sendReserve = true;
                        console.log('sendMyReq', this.myRequest.myQuestion);
                        this.myRequest.myQuestion = this.myRequest.myQuestion
                                      .filter((ques) => ques.selected)
                                      .map((selQues) => selQues.name);
                        setRequestsToStorage(this.myRequest);
                    });
                }
    beforeRouteEnter(to: any, from: any, next: any) {
      next(vm => {
        const isUserLogin = authService.isUserLogin();
        if (from.name === 'login' && !isUserLogin) {
          vm.$router.go(-1);
          return;
        }

                getHopeContactTime() {
                    return this.myRequest.hopeContactTime.map(i => {
                        return `'${i.selectWeekOptions}、${i.selectTimesOptions}'`}
                    ).toString();
                }

                closeReservePopUp() {
                    this.sendReserve = false;
                    this.$router.push('/')
                }
        if (!isUserLogin) {
          vm.$router.push('/login');
        }
      })
    }

    export interface SelectedQuestion {
        name: string;
        selected: boolean;
    mounted(): void {
      if (authService.isUserLogin()) {
        this.storeConsultantList();
      };
      this.setMyRequest();
    }

    private setMyRequest(): void {
      const storageMyRequest = getRequestsFromStorage();
      const storageMyRequirement = this.recommendConsultantItem ? JSON.parse(this.recommendConsultantItem).requirements:[];

      if (storageMyRequest) {
        this.myRequest = {
          ...storageMyRequest,
          hopeContactTime: storageMyRequest.hopeContactTime?.length
                            ? storageMyRequest.hopeContactTime
                            : [{
                                selectWeekOptions: [],
                                selectTimesOptions: [],
                              }],
        };
      }

      if (storageMyRequirement) {
        this.myRequest = {
          ...this.myRequest,
          requirement: storageMyRequirement
        }
        removeRequestQuestionFromStorage();
      }

      if (authService.isUserLogin()) {
        accountSettingService.getUserAccountSetting().then((contactTypeDetail) => {
              this.myRequest = {
                ...this.myRequest,
                ...contactTypeDetail
              }
        })
      }


    }

    ////////////////////////////////////////////////////////////////////////////

    @Watch('myConsultantList')
    onMyConsultantListChange() {
      if (authService.isUserLogin() && this.myConsultantList.length > 0) {
          const editAppointment = this.getLatestReserved(this.$route.params.agentNo);

          if (editAppointment && editAppointment.agentNo) {
            this.myRequest = JSON.parse(JSON.stringify(editAppointment));
            if (!this.$route.query || this.$route.query.edit !== 'true') {
              this.isEditPopup = true;
            }
            this.isEditBtn = true;
          }
      }
    }

    private getLatestReserved(agentNo) {
      const agentInfo = this.myConsultantList.filter(item => item.agentNo === agentNo);
      const appointmentInfo = agentInfo.length > 0 && agentInfo[0].appointments
        ? agentInfo[0].appointments!
              .filter((appointment) => appointment.communicateStatus === 'reserved')
              .map((reversedAppointment) => (
                { ...reversedAppointment,
                  sortDate: new Date(reversedAppointment.appointmentDate)
                }))
              .sort((preAppointment, nextAppointment) => +nextAppointment.sortDate - +preAppointment.sortDate)[0]
        : null;
      return this.getReservedData(appointmentInfo);
    }

    private getReservedData(appointmentInfo) {
      if (appointmentInfo) {
        const hopeContactTime = appointmentInfo!.hopeContactTime
          ?  appointmentInfo!.hopeContactTime.split("'").filter(item => item && item !== ',').map(item => {
                const info = item.split('、');
                return {
                    selectWeekOptions: info[0].split(','),
                    selectTimesOptions: info[1].split(',')
                }
            })
          :[{selectWeekOptions : [],selectTimesOptions: []}];
        this.getAppointmentId(appointmentInfo);

        return {
            ...appointmentInfo,
            hopeContactTime: hopeContactTime,
            requirement: appointmentInfo.requirement
                        ? appointmentInfo.requirement.split(',')
                        : []
          }
      } else {
        return null;
      }
    }

    private getAppointmentId(appointmentInfo) {
      this.appointmentId = appointmentInfo.id;
      this.appointmentTime = appointmentInfo.lastModifiedDate
                  ? appointmentInfo.lastModifiedDate
                  : appointmentInfo.appointmentDate;
    }

    ////////////////////////////////////////////////////////////////////////////


    async sentDemand() {
      if (this.isEditBtn) {
        await this.editAppointmentDemand();
      } else {
        // 使用 async/await 來等待異步操作的回傳結果
        const addFavoriteAgentList = [{ agentNo: this.$route.params.agentNo, createdTime: new Date().toISOString() }];
        const response = await queryConsultantService.addFavoriteConsultant(addFavoriteAgentList);

        // 確保異步操作的回傳結果不為 null 或 undefined
        if (response !== null) {
          await this.sentAppointmentDemand();
        } else {
          throw new Error('queryConsultantService.addFavoriteConsultant returned null-like value.');
        }
      }

      const editSettingInfo: UserSetting = {
        name: this.myRequest.name,
        phone: this.myRequest.phone,
        email: this.myRequest.email,
      };

      await accountSettingService.updateAccountSetting(editSettingInfo);
      this.storageUserInfo(this.userInfo);
    }


    private editAppointmentDemand() {
      const info = {
          ...this.myRequest,
          requirement: this.myRequest.requirement.map(o => o).toString(),
          hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
          id: this.appointmentId,
          otherRequirement: null
        }
      appointmentService.editAppointment(info).then(res => {
        this.sendReserve = true;
        this.myRequest.hopeContactTime = [];
        setRequestsToStorage(this.myRequest);
      });
    }

    private sentAppointmentDemand() {
        const data: AppointmentParams = {
          ...this.myRequest,
          requirement: this.myRequest.requirement.map(o => o).toString(),
          hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
          agentNo: this.$route.params.agentNo
        };

        queryConsultantService.appointmentDemand(data).then(res => {
            this.sendReserve = true;
            this.myRequest.hopeContactTime = [];
            this.appointmentId = res['id'];
            setRequestsToStorage(this.myRequest);
        });
    }

    private getHopeContactTime() {
        const selectedHopeContactTime = this.myRequest.hopeContactTime.filter((i) => i.selectWeekOptions?.length && i.selectTimesOptions?.length);
        return selectedHopeContactTime.map(i => {
            return `'${i.selectWeekOptions}、${i.selectTimesOptions}'`}
        ).toString();
    }

    reviewPlatform(): void {
      const reviewPlatformParams: UserReviewParams = {
        appointmentId: this.appointmentId,
        score: this.score,
        type: SatisfactionType.SYSTEM
      };
      reviewsService.reviewPlatform(reviewPlatformParams).then((_) => {
        this.closeReservePopUp();
      });
    }

    closeReservePopUp() {
        this.sendReserve = false;
        this.$router.push('/')
    }

    ////////////////////////////////////////////////////////////////////////////

    get phoneValid(): boolean {
      const rule = /^09[0-9]{8}$/;
      return this.myRequest.phone
            ? rule.test(this.myRequest.phone) && this.myRequest.phone.length === 10
            : true;
    }

    get emailValid() {
      const rule = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
      return this.myRequest.email ? rule.test(this.myRequest.email) : true;
    }

    get userInfo(): RegisterInfo {
      const initUserInfo = JSON.parse(localStorage.getItem('userInfo')!);
      return initUserInfo;
    }

    get isDisabledSubmitBtn(): boolean {
      return this.myRequest.contactType.includes(ContactType.PHONE)
        ? !this.isHopeContactTimeDone() || !this.emailValid
        : !this.phoneValid;
    }

    private isHopeContactTimeDone():boolean{
      return this.myRequest.hopeContactTime[0]?.selectWeekOptions.length >0 && this.myRequest.hopeContactTime[0]?.selectTimesOptions.length >0;
    }

  }
</script>

<style lang="scss" scoped>
.input{
    border:none;
    border-radius: 10px;
}
.pl-18{
    padding-left: 18px;
}
.ageDesktop{
    margin-bottom: 10px;
    margin-right: 20px;
    height:47px;
}
.ageDesktopP2{
    margin-right: 30px;
    margin-bottom: 10px;
    height:47px;
}

.ml-5{
    margin-left: -5px;
}
.mr-25{
    margin-right: 30px;
}
.job-drawerTxt{
  input:focus,textarea:focus {
  outline: none;
  border: 1px solid #ED1B2E;
  }
}

input:focus,textarea:focus {
    outline: none;
    border: 1px solid #FFFFFF;
}

.sendReserve-txt{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 26px;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.job-inputDiv{
    height:90px;
}

.jobBtn{
    font-weight:bold;
}//職業選項,按了變粗體

.job-input{
    height: 50px;
    width: 294px;
    border: 1px solid #FF0000;
}//職業選項,其他輸入框樣式

.job-pick{
    height: 50px;
    border-radius:10px;
    border:1px solid #D0D0CE ;
    display: flex;
    justify-content: space-between;
    background-color: #FFFFFF;
}

//drawer最底下文字樣式
.qa-dialog-footer{
    display: flex;
    justify-content: center;
    margin-bottom: 81px;
    color: #ED1B2E;
    cursor: pointer;
}//drawer最底下文字樣式

.mt-18{
    margin-top: 18px;
  display: flex;
  justify-content: center;
  margin-bottom: 81px;
  color: #ED1B2E;
  cursor: pointer;
}

.job-drawerTxt{
    display: flex;
    flex-direction: column;
    align-items: center;
    .el-button {
.error {
  color:$PRIMARY_RED
}
//送出按鈕樣式與排版
.ques-footer{
  justify-content: center;
  margin: 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  .el-button {
    width: 120px;
    height:50px;
    background-color: #ED1B2E;
    color:#FFFFFF;
    font-weight: normal;
    @extend .fz-20;
    @extend .text--middle ;
    &.el-button--default {
        color: $PRIMARY_RED;
        background-color: #FFFFFF;
@@ -417,195 +614,129 @@
    pointer-events: none;
    }
  }
}//職業選項內所有文字排版與按鈕樣式設定
}

.ques-footer{
    justify-content: center;
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .el-button {
    width: 120px;
    height:50px;
    background-color: #ED1B2E;
    color:#FFFFFF;
    font-weight: normal;
    @extend .fz-20;
    &.el-button--default {
        color: $PRIMARY_RED;
        background-color: #FFFFFF;
        border-color: $PRIMARY_RED;
    }
    &.el-button--primary {
        background-color: $PRIMARY_RED;
        border-color: $PRIMARY_RED;
    }
    &.is-disabled {
    color: $PRIMARY_WHITE;
    background-color: $MID_GREY;
    border-color: $MID_GREY;
    border-style: solid;
    pointer-events: none;
    }
    }
}//送出按鈕樣式與排版

//詳細問題drawer中間內容空間大小設置
.qa-dialog{
    overflow-y:auto;
    height: 500px;
    margin-top: 20px;
}//詳細問題drawer中間內容空間大小設置
  overflow-y:auto;
  height: 60vh;
  margin-top: 20px;
}

//詳細問題drawer主要標題
.qaTextTitle{
    margin-top:30px;
    display: flex;
    justify-content: center;
}//詳細問題drawer主要標題

.el-drawer__container ::-webkit-scrollbar {
        display: none;
}

.phone-no{
    margin-bottom: 30px;
    margin-left: 5px;
}
.qa-dialog-footer{
    display: flex;
    justify-content: center;
    margin-bottom: 81px;
    cursor: pointer;
}
.el-button+.el-button{
    margin-left: 0;
}

.down-icon{
        color:#ED1B2E;
        font-size: 25px;
        display: flex;
        justify-content: flex-end;
        padding-top: 11px;
        margin-left: -20px;
}

.job-txt{
    align-self: center;
    margin-left: 18px;
    color:#D0D0CE;
}

.date-txt{
    align-self: center;
    margin-left: 18px;
    color: #68737A;
}

.add-date{
    color:#D0D0CE;
    padding-top: 10px;
    padding-bottom: 30px;
    font-size: 20px;
}

.pb-16{
    padding-bottom: 16px;
}

.date-pick{
    height: 50px;
    border-radius:10px;
    border:1px solid #D0D0CE ;
    display: flex;
    justify-content: space-between;
}

.date-icon{
    color:#ED1B2E;
        font-size: 25px;
        display: flex;
        justify-content: flex-end;
        padding-right: 16px;
        padding-top: 11px;
}

.addDate{
    margin-left: -20px;
}

.ageTags{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  margin-top:30px;
  display: flex;
  justify-content: center;
}

.datepicker{
    display: flex;
    flex-direction: column;
}

.pb-18{
    padding-bottom: 18px;
}

.mr-20{
    margin-right: 20px;
}

.pam-age-tags {
    display: flex;
    .el-button {
    border-width: 2px;
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: normal;
    @extend .fz-20;
    &.el-button--default {
        color: black;
        background-color: #FFFFFF;
        border-color: #D0D0CE;
    }
    &.el-button--primary {
        background-color: $PRIMARY_RED;
        border-color: #D0D0CE;
    }
    &.active {
        background-color: #F09491;
        color: white;
    }
  }
  display: flex;
  flex-direction: column;
}

.required {
  position: relative;
  &::before {
      content: '*';
      position: absolute;
      color: #FF0000;
      transform: translate(-12px, 0);
  }
}
.break{
  word-break: break-all;
  line-height: 1.2;
}
.ques-page--reset.pam-page-container {
  margin: 0px auto;
}

.ques-header {
  position: relative;
}

.ques-header__mob-banner {
  width: 100%;
  min-height: 80px;
  background-color: #F8F9FA;
  background-image: url('~/assets/images/questionnaire/reserve_bg_mob.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

  .ques-header__info {
    position: relative;
    &::before {
        content: '*';
        position: absolute;
        color: #FF0000;
        transform: translate(-12px, 0);
    padding:30px 20px;
    margin: 0px 20px;
    background-color: #B3E7E3;
    border-radius: 10px;
  }

  .ques-header__input-block {
    display: flex;
    align-items: center;
    @extend .text--middle,.mt-10 ;
    .ques-header__input{
      &.is-invalid{
        border: 1px solid $PRIMARY_RED !important;
      }
      flex: 1;
      height: 50px;
      border-radius: 10px;
      border: 1px #CCCCCC solid;
      background-color: $PRIMARY_WHITE;
      padding: 15px 10px;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
    }
  }
  .ml-4{
    margin-left: 4px;
  }
  .ques-container {
    position: relative;
    margin: 0px 20px;
  }

.pam-app-review{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@include desktop {

    .contactMax{
        margin-right: 10px;
    }
    .connectDesktop{
        display: flex;
        flex-direction: column;
    }
    .desktopBtn{
        margin-right: 10px;
        height:47px
    }
    .ageDesktop{
        margin-right: 10px;
    }
    .ageDesktopP2{
        margin-right: 10px;
    }
.pam-satisfaction-rate{
  margin-bottom: 45px;
}

  @include desktop{
  .ques-header{
    display: flex;
    justify-content: flex-end;
    min-height: 460px;
    background-image: url('~/assets/images/questionnaire/reserve_bg_web.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
  }
  .ques-header__mob-banner{
    display: none;
  }
  .ques-header__info{
    margin: 30px 20px;
    width:500px;
    min-height: 400px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
  }
  .ques-container{
    margin: 0px;
  }
}


</style>