<template>
|
<div>
|
<div class="interview__header">
|
<div class="mdTxt">約訪紀錄</div>
|
<div class="pam-link-button"
|
@click="addInterview">+新增</div>
|
</div>
|
|
<InterviewCard :interviewList="displayAppointmentList"></InterviewCard>
|
|
<section class="text--right mt-30 interview-check-more" v-if="interviewList.length > 3">
|
<div class="pam-link-button" @click="readAllList = !readAllList">
|
{{ readAllList ? '顯示較少' : '展開看更多' }}
|
<i :class="readAllList ? 'icon-top' : 'icon-down'"></i>
|
</div>
|
</section>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Prop, Watch, namespace } from 'nuxt-property-decorator';
|
|
import { InterviewRecord } from '~/shared/models/appointment.model';
|
|
@Component
|
export default class AppointmentInterviewList extends Vue {
|
|
@Prop()
|
interviewList!: InterviewRecord[];
|
|
appointmentId!: string;
|
displayList: InterviewRecord[] = [];
|
readAllList = false;
|
|
get displayAppointmentList(): InterviewRecord[] {
|
return this.readAllList ? this.displayList : this.displayList.slice(0, 3);
|
}
|
|
|
//////////////////////////////////////////////////////////////////////
|
|
mounted() {
|
this.appointmentId = this.$route.params.appointmentId;
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
@Watch('interviewList', {immediate: true})
|
updateInterviewList() {
|
if (this.interviewList && this.interviewList.length > 0) {
|
this.displayList = this.interviewList
|
.map((i) => ({ ...i, sortDate: new Date(i.interviewDate)}))
|
.sort((preItem, nextItem) => +nextItem.sortDate - +preItem.sortDate);
|
}
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
addInterview(): void {
|
this.$router.push(`/appointment/${this.appointmentId}/interview/new`);
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.interview__header {
|
display : flex;
|
justify-content: space-between;
|
margin-bottom : 10px;
|
}
|
.interview-check-more{
|
display: flex;
|
justify-content: center;
|
}
|
</style>
|
