|
import { Vue, Component, namespace } from 'nuxt-property-decorator';
|
|
|
import { fastQuery } from '~/assets/ts/api/consultant';
|
import { QuestionOption } from '~/assets/ts/models/question-option.model';
|
import { Consultant } from '~/assets/ts/models/consultant.model';
|
import { Selected } from '~/assets/ts/models/selected.model';
|
import { FastQueryParams } from '~/assets/ts/models/fast-query-params.model';
|
|
const localStorage = namespace('localStorage');
|
@Component
|
export default class QuickFilter extends Vue {
|
@localStorage.Mutation storageQuickFilter!: (token: string) => void;
|
@localStorage.Getter quickFilterSelectedData!: Selected[];
|
|
isOpenQuestionPopUp = false;
|
consultantList: Consultant[] = [];
|
questionOption = {};
|
confirmItem: Selected[] = [];
|
questionList: QuestionOption[] = [
|
{
|
name: 'gender',
|
title: '顧問性別',
|
detail: [
|
{ name: '男性', value: 'male', className: 'btn_man'},
|
{ name: '女性', value: 'female', className: 'btn_woman'}
|
],
|
type: 'radio'
|
},
|
{
|
name: 'avgScore',
|
title: '顧問滿意度',
|
detail: [],
|
type: ''
|
},
|
{
|
name: 'communicationStyles',
|
title: '溝通風格',
|
detail: [
|
{ value: '謹慎務實', className: 'btn_owl'},
|
{ value: '明快主動', className: 'btn_tiger'},
|
{ value: '耐心傾聽', className: 'btn_koala'},
|
{ value: '健談風趣', className: 'btn_peacock'}
|
],
|
type: 'checkbox'
|
},
|
// {
|
// name: 'status',
|
// title: '上線狀態',
|
// detail: [],
|
// type: 'radio'
|
// }
|
];
|
|
mounted() {
|
if (this.quickFilterSelectedData && this.quickFilterSelectedData.length > 0) {
|
this.confirmItem = this.quickFilterSelectedData;
|
this.getRecommendList();
|
}
|
}
|
|
gender(): string {
|
const filter = this.confirmItem.filter(item => item.option === 'gender').map(i => i.value);
|
return filter.length === 0 ? '' : filter[0];
|
}
|
|
avgScore(): number {
|
const filter = this.confirmItem.filter(item => item.option === 'avgScore').map(i => i.value);
|
return filter.length === 0 ? '' : filter[0];
|
}
|
|
communicationStyles(): string[] {
|
return this.confirmItem.filter(item => item.option === 'communicationStyles').map(i => i.value);
|
}
|
|
isActive(name: string) {
|
return name === 'gender' && !!this.gender()
|
|| name === 'avgScore' && !!this.avgScore()
|
|| name === 'communicationStyles' && !!this.communicationStyles().length
|
}
|
|
openPopUp(question: QuestionOption) {
|
this.questionOption = question;
|
this.isOpenQuestionPopUp =true;
|
}
|
|
removeTag(value: string) {
|
this.confirmItem = this.confirmItem.filter(item => item.value !== value);
|
this.confirmItem.length > 0 ? this.getRecommendList() : this.consultantList = [];
|
}
|
|
confirm(event: Selected) {
|
this.setConfirmData(event);
|
this.confirmItem.length > 0 ? this.getRecommendList() : this.consultantList = [];
|
this.isOpenQuestionPopUp = false;
|
}
|
|
setConfirmData(event: Selected) {
|
if (event.option === 'communicationStyles') {
|
this.filterCommunicationStyles(event);
|
} else {
|
const findIndex = this.confirmItem.findIndex(item => item.option === event.option);
|
findIndex === -1 ? this.confirmItem.push(event) : this.confirmItem[findIndex] = event;
|
}
|
}
|
|
filterCommunicationStyles(event: Selected) {
|
const confirmValue = this.confirmItem
|
.filter(item => item.option === 'communicationStyles')
|
.map(i => i.value);
|
const pickerValue = event.value;
|
|
this.confirmItem = this.confirmItem
|
.filter(item => pickerValue.includes(item.value) || item.option !== 'communicationStyles');
|
|
const addValue = pickerValue.filter(item => !confirmValue.includes(item)).map(i => {
|
return {
|
option: 'communicationStyles',
|
value: i
|
}
|
})
|
if (addValue.length > 0) {
|
this.confirmItem.push(...addValue);
|
}
|
}
|
|
getRecommendList() {
|
const data: FastQueryParams = {
|
gender: this.gender(),
|
communicationStyles: this.communicationStyles(),
|
avgScore: this.avgScore(),
|
status: ''
|
}
|
|
fastQuery(data).then((res) => {
|
this.consultantList = res.data;
|
this.storageQuickFilter(JSON.stringify(this.confirmItem))
|
})
|
}
|
|
}
|
