<template>
|
<div>
|
<div class="mb-10" v-if="questionOption.title !== '顧問性別'">
|
<span class="mdTxt"
|
>{{questionOption.title === '顧問滿意度' ? '保險顧問滿意度' : 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 === '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-quickFilter-rate"
|
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 {
|
pickedItem: FastQueryParams = {
|
communicationStyles: [],
|
status: '',
|
gender: '',
|
avgScore: 0
|
}
|
hideReviews = hideReviews ;
|
|
@Prop() questionOption!: QuestionOption;
|
@Prop() isOpenQuestionPopUp!: boolean;
|
@Prop() confirmItem!: Selected[];
|
|
@Watch('isOpenQuestionPopUp', {immediate: true}) onPopUpChange() {
|
this.pickedItem = {
|
communicationStyles: this.communicationStyles,
|
status: '',
|
gender: this.gender,
|
avgScore: this.avgScore
|
}
|
}
|
|
get gender() {
|
const filter = this.confirmItem.filter(item => item.option === 'gender');
|
return filter.length > 0 ? filter[0].value : '';
|
}
|
|
get avgScore() {
|
const filter = this.confirmItem.filter(item => item.option === 'avgScore');
|
return filter.length > 0 ? filter[0].value : 0;
|
}
|
|
get communicationStyles() {
|
return this.confirmItem
|
.filter(item => item.option === 'communicationStyles')
|
.map(item => item.value);
|
}
|
|
get isDisabled() {
|
const name = this.questionOption.name;
|
return name === 'gender' && !this.pickedItem[name]
|
|| name === 'avgScore' && !this.pickedItem[name]
|
|| name === 'communicationStyles' && !this.pickedItem[name].length
|
}
|
|
selectedCommunicationStyles() {
|
if (this.pickedItem.communicationStyles.length > 2) {
|
this.pickedItem.communicationStyles.shift();
|
}
|
}
|
|
@Emit('confirm')
|
confirm() {
|
const name = this.questionOption.name;
|
return {
|
option: this.questionOption.name,
|
value: this.pickedItem[name]
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
|
.quickBtnBlock {
|
display: flex;
|
justify-content: space-between;
|
align-content: space-between;
|
flex-wrap: wrap;
|
}
|
|
</style>
|
