<template>
|
<el-row type="flex" justify="center" :class="cusClass">
|
<el-button @click="addConsultant(agentInfo)" :disabled="isAdded">
|
<span> {{ isAdded ? '已加入顧問清單' : '+ 顧問清單' }}</span>
|
</el-button>
|
<el-button
|
:disabled="isDisableReserve"
|
@click="navigateToReservationForm"
|
type="primary"
|
>{{ isDisableReserve ? '已聯絡' : '進行預約'}}</el-button>
|
</el-row>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Prop, Emit, Action, State, namespace } from 'nuxt-property-decorator';
|
import { Consultant } from '~/shared/models/consultant.model';
|
|
const roleStorage = namespace('localStorage');
|
|
@Component
|
export default class AddAndReservedBtns extends Vue {
|
|
@Action
|
addToMyConsultantList!: (consultantToAdd: Consultant) => Promise<boolean>
|
|
@State('myConsultantList')
|
myConsultantList!: Consultant[];
|
|
@Prop()
|
agentInfo!: Consultant;
|
|
@Prop()
|
cusClass!: string;
|
|
@roleStorage.Getter
|
isUserLogin!: boolean;
|
|
isVisiblePopUp = false;
|
|
//////////////////////////////////////////////////////////////////////
|
|
@Emit('openPopUp')
|
openPopUp(popUpTxt: string = '成功加入顧問清單'): string {
|
return popUpTxt;
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
addConsultant(item: Consultant): void {
|
if (!this.isUserLogin) {
|
item = {
|
...item,
|
updateTime: new Date().toISOString()
|
};
|
}
|
this.addToMyConsultantList(item).then(addOk => {
|
addOk && this.openPopUp();
|
});
|
}
|
|
navigateToReservationForm(): void {
|
this.$router.push(`/questionnaire/${this.agentInfo.agentNo}`);
|
}
|
|
get isAdded() {
|
return this.myConsultantList.find(item => item.agentNo === this.agentInfo.agentNo)
|
? true : false
|
}
|
|
get isDisableReserve(): boolean {
|
return this.myConsultantList.some((agent) => {
|
return agent.agentNo === this.agentInfo.agentNo
|
&& agent.contactStatus === 'contacted';
|
});
|
}
|
}
|
</script>
|
