保誠-保戶業務員媒合平台
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<template>
    <div>
        <div class="pam-cus-tabs mb-30">
            <div
                class="cus-tab-item"
                :class="{'is-active': activeTabName === 'consultantList'}"
                @click="tabClick('consultantList')"
            >顧問清單
                <span class="p">({{consultantList.length}})</span>
            </div>
            <div
                class="cus-tab-item"
                :class="{'is-active': activeTabName === 'contactedList'}"
                @click="tabClick('contactedList')"
            >已聯絡
                <span class="p">({{contactedList.length}})</span>
            </div>
        </div>
 
        <NuxtChild
            :contactedList="contactedList"
            :consultantList="consultantList"
            @remove="removeAgent"
        ></NuxtChild>
    </div>
</template>
 
<script lang='ts'>
import { Vue, Component, Watch } from 'vue-property-decorator';
import { Route } from 'vue-router/types/router.d'
import { getFavoriteFromStorage, setFavoriteToStorage } from '~/assets/ts/storageConsultant';
import { addFavoriteConsultant, Consultants, deleteConsultant, getFavoriteConsultant } from '~/assets/ts/api/consultant';
import { isLogin } from '~/assets/ts/auth';
 
@Component
export default class myConsultantList extends Vue {
    activeTabName = 'consultantList';
    agents: Consultants[] = [];
    contactedList: Consultants[] = [];
    consultantList: Consultants[] = [];
 
    tabClick(path: string) {
        this.activeTabName = path;
        this.$router.push('/myConsultantList/' + this.activeTabName)
    }
 
    mounted() {
        if (isLogin()) {
            this.addFavoriteFromStorageToApi();
        } else {
            this.agents = getFavoriteFromStorage();
            this.filterContactedList()
        }
    }
 
    addFavoriteFromStorageToApi() {
        const agentNoList = getFavoriteFromStorage().map(i => i.agentNo)
        if (agentNoList.length > 0) {
            addFavoriteConsultant(agentNoList).then(res => this.getMyConsutant());
            localStorage.removeItem('favoriteConsultant');
            return;
        }
        this.getMyConsutant();
    }
 
    getMyConsutant() {
        getFavoriteConsultant().then((response) => {
            this.agents = response.data;
            this.filterContactedList();
        });
    }
 
    filterContactedList() {
        this.consultantList = this.agents
                .filter(item => item.contactStatus !== 'contacted')
                .sort((a, b) => a.updateTime > b.updateTime ? -1 : 1);
        this.contactedList = this.agents
                .filter(item => item.contactStatus === 'contacted')
                .sort((a, b) => a.updateTime > b.updateTime ? -1 : 1);
    }
 
    removeAgent(agentNo: string) {
        if (!isLogin()) {
            const fintIndex = this.consultantList.findIndex(item => item.agentNo === agentNo);
            this.consultantList.splice(fintIndex, 1);
            setFavoriteToStorage(this.consultantList);
        } else {
            deleteConsultant(agentNo).then(res => this.$router.go(0))
        }
    }
 
    @Watch('$route') watchRouter(currentRoute: Route) {
        const pathArray = currentRoute.fullPath.split('/');
        this.activeTabName = pathArray[pathArray.length - 1];
    }
 
}
</script>