<template>
|
<div class="record-log-component">
|
<div class="mdTxt mt-30 mb-10">系統通知紀錄</div>
|
|
<InterviewRecordCard :noticeLogsList="displayLogs.slice(0, 3)"></InterviewRecordCard>
|
|
<section class="text--center mt-30" v-if="displayLogs.length > 3">
|
<div class="pam-link-button"
|
@click="readMoreBtn"
|
>展開看更多
|
<i class="icon-expand"></i></div>
|
</section>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Prop, Watch } from 'nuxt-property-decorator';
|
import { NoticeLogs } from '~/shared/models/appointment.model';
|
|
@Component
|
export default class AppointmentRecordList extends Vue {
|
|
@Prop()
|
noticeLogs!: NoticeLogs[];
|
|
appointmentId: string = '';
|
displayLogs : NoticeLogs[] = [];
|
|
//////////////////////////////////////////////////////////////////////
|
|
mounted() {
|
this.appointmentId = this.$route.params.appointmentId;
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
@Watch('noticeLogs', {immediate: true})
|
onNoticeLogsChange() {
|
if (this.noticeLogs.length) {
|
this.displayLogs = this.noticeLogs
|
.map((i) => ({ ...i, sortDate: new Date(i.createdDate)}))
|
.sort((preItem, nextItem) => +nextItem.sortDate - +preItem.sortDate);
|
}
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
readMoreBtn() {
|
this.$router.push(`/appointment/${this.appointmentId}/recordList`);
|
}
|
|
}
|
</script>
|
