<template>
|
<div>
|
<div class="mb-10" v-if="questionOption.title !== '顧問性別'">
|
<span class="mdTxt"
|
>{{questionOption.title}}
|
</span>
|
<span
|
class="smTxt_bold text--primary"
|
v-if="questionOption.name === 'communicationStyles'"
|
>(最多選擇兩種)</span>
|
<span
|
class="smTxt_bold text--primary"
|
v-if="questionOption.name === 'avgScore'"
|
>選取星星</span>
|
</div>
|
|
<!-------------------- 溝通風格 -------------------->
|
<div class="quickBtnBlock"
|
v-if="questionOption.name === 'communicationStyles'"
|
>
|
<el-checkbox-group
|
class="pam-quickFilter-checkbox"
|
v-model="pickedItem.communicationStyles"
|
>
|
<el-checkbox
|
v-for="(i, index) in questionOption.detail"
|
:key="index"
|
:label="i.value"
|
:name="i.value"
|
:class="i.className"
|
@change="selectedCommunicationStyles"
|
></el-checkbox>
|
</el-checkbox-group>
|
</div>
|
<!-------------------- 年資 -------------------->
|
<div class="quickBtnBlock"
|
v-else-if="questionOption.name === 'seniority'"
|
>
|
<el-radio-group
|
class="pam-quickFilter-radio pam-radio-group"
|
v-model="pickedItem.seniority"
|
>
|
<el-radio
|
v-for="(i, index) in questionOption.detail"
|
:key="index"
|
:label="i.value"
|
:class="i.className"
|
>
|
<div>{{i.name}}</div>
|
<div class="subtitle">{{i.subTitle}}</div>
|
</el-radio>
|
</el-radio-group>
|
</div>
|
<!-------------------- 性別 -------------------->
|
<div class="quickBtnBlock"
|
v-else-if="questionOption.name === 'gender'"
|
>
|
<el-radio-group
|
class="pam-quickFilter-radio"
|
v-model="pickedItem.gender"
|
>
|
<el-radio
|
v-for="(i, index) in questionOption.detail"
|
:key="index"
|
:label="i.value"
|
:class="i.className"
|
>{{i.name}}</el-radio>
|
</el-radio-group>
|
</div>
|
<!-------------------- 滿意度 -------------------->
|
<div v-else>
|
<el-rate
|
v-if="!hideReviews"
|
class="pam-rate mt-30"
|
v-model="pickedItem.avgScore"
|
></el-rate>
|
</div>
|
|
<div class="text--center mt-30">
|
<el-button
|
class="pam-select-confirm"
|
type="primary"
|
@click="confirm"
|
:disabled="isDisabled"
|
>確認</el-button>
|
</div>
|
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Vue, Component, Prop, Watch, Emit } from 'nuxt-property-decorator';
|
import { hideReviews } from '~/shared/const/hide-reviews';
|
import { FastQueryParams, QuestionOption, Selected } from '~/shared/models/quick-filter.model';
|
@Component
|
export default class QuickFilterDrawer extends Vue {
|
@Prop()
|
questionOption!: QuestionOption;
|
|
@Prop()
|
isOpenQuestionPopUp!: boolean;
|
|
@Prop()
|
confirmItem!: Selected[];
|
|
pickedItem: FastQueryParams = {
|
communicationStyles: [],
|
status: '',
|
gender: '',
|
avgScore: 0,
|
seniority: ''
|
}
|
hideReviews = hideReviews ;
|
|
//////////////////////////////////////////////////////////////////
|
|
@Watch('isOpenQuestionPopUp', {immediate: true})
|
onPopUpChange() {
|
this.pickedItem = {
|
communicationStyles: this.getCommunicationStyles(),
|
status: '',
|
gender: this.getGender(),
|
avgScore: this.getAvgScore(),
|
seniority: this.getSeniority()
|
}
|
}
|
|
@Emit('confirm')
|
confirm() {
|
const name = this.questionOption.name;
|
return {
|
option: name,
|
value: this.pickedItem[name]
|
}
|
}
|
|
//////////////////////////////////////////////////////////////////
|
|
get isDisabled() {
|
const name = this.questionOption.name;
|
return name === 'gender' && !this.pickedItem[name]
|
|| name === 'avgScore' && !this.pickedItem[name]
|
|| name === 'communicationStyles' && !this.pickedItem[name].length
|
|| name === 'seniority' && !this.pickedItem[name]
|
}
|
|
selectedCommunicationStyles() {
|
if (this.pickedItem.communicationStyles.length > 2) {
|
this.pickedItem.communicationStyles.shift();
|
}
|
}
|
|
//////////////////////////////////////////////////////////////////
|
|
private getGender(): string {
|
return this.filterSingleSelected('gender');
|
}
|
|
private getAvgScore(): number {
|
return this.filterSingleSelected('avgScore');
|
}
|
|
private getCommunicationStyles(): string[] {
|
return this.confirmItem
|
.filter(item => item.option === 'communicationStyles')
|
.map(item => item.value);
|
}
|
|
private getSeniority(): string {
|
return this.filterSingleSelected('seniority');
|
}
|
|
private filterSingleSelected(name: string) {
|
const filter = this.confirmItem.filter(item => item.option === name);
|
return filter.length > 0
|
? filter[0].value
|
: (name === 'avgScore' ? 0 : '');
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.quickBtnBlock {
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
}
|
|
.pam-radio-group {
|
height: 240px;
|
flex-wrap: wrap;
|
}
|
|
</style>
|
