DigitalConsumer.FixMyGlass/src/layouts/vehicle-damage/windshield-options/windshield-options.vue

<template>
    <transition name="fade">
        <div class="windshield-options" aria-live="polite">
            <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
                v-if="isWindshieldDamageLocation"
                :questionText="questionText"
                :answersFromCms="answersFromCms"
                :suppressError="suppressError"
                groupName="WindshieldDamageTypeQuestion"
                v-model="selectedWindshieldDamageTypeValues" 
            />
            <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
                v-if="isWindshieldDamageLocation && isRepairOptionSelected"
                :questionText="chipCountQuestionText"
                :answersFromCms="chipCountAnswersFromCms"
                groupName="WindshieldChipCountQuestion"
                v-model="selectedWindshieldChipCountValues" 
            />
            <replaceOptionsQuestion ref="replaceOptionsQuestion"
                isAvailable
                groupName="WindshieldReplaceOptions"
                v-model="selectedWindshieldReplaceOptionsValues"
            />
        </div>
    </transition>
</template>

<script>
import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
export default ({
    name: "windshieldOptions",
    updated() {
        console.log("wo:isWindshieldDamageLocation=>" + this.isWindshieldDamageLocation);
        console.log("wo:selectedWindshieldDamageTypeValues=>" + this.selectedWindshieldDamageTypeValues);
        // if (this.isReplaceOptionSelected)
        //     this.$options.components.replaceOptionsQuestion.methods.initializeComponent(this.wsrFromCms, this.wsrOptions);
    },
    data(){
        return {
            questionText: String,
            answersFromCms: Array,
            chipCountQuestionText: String,
            chipCountAnswersFromCms: Array,
            replaceOptionsQuestionText: String,
            replaceOptionsAnswersFromCms: Array,
            availableReplacementOptions: Array,
            // wsrFromCms: Array,
            // wsrOptions: Array,
            sro:[],

            selectedWindshieldDamageType: null,
            selectedWindshieldChipCount: null,
            selectedWindshieldReplaceOptions: [],
        }
    },

    props: {
        modelValue: Array,
        selectedDamageLocations: Array,
        selectedChipCount: Array,
        selectedReplaceOptions: Array,
        suppressError: Boolean
    },

    methods: {
        initializeComponent(windshieldDamageTypeQuestionFromCms, windshieldChipCountQuestionFromCms, 
            windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions){
            this.questionText = windshieldDamageTypeQuestionFromCms.QuestionText;
            this.answersFromCms = windshieldDamageTypeQuestionFromCms.Answers;

            this.chipCountQuestionText = windshieldChipCountQuestionFromCms.QuestionText;
            this.chipCountAnswersFromCms = windshieldChipCountQuestionFromCms.Answers;

            this.replaceOptionsQuestionText = windshieldReplaceOptionsQuestionFromCms.QuestionText;
            this.replaceOptionsAnswersFromCms = windshieldReplaceOptionsQuestionFromCms.Answers;

            this.wsrFromCms = windshieldReplaceOptionsQuestionFromCms;
            this.wsrOptions = windshieldAvailableReplacementOptions;

            //this.$refs.windshieldDamageTypeQuestion.initializeComponent(this.questionText, this.answersFromCms);
            this.$options.components.replaceOptionsQuestion.methods.initializeComponent(windshieldReplaceOptionsQuestionFromCms, windshieldAvailableReplacementOptions);
        },
        getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
            return {
                selectedWindshieldDamageType: selectedWindshieldDamageType,
                selectedWindshieldChipCount: selectedWindshieldChipCount,
                selectedWindshieldReplaceOptions: selectedWindshieldReplaceOptions
            }
        },
    },
    computed: {
        selectedValues: {
            get: function() {
                return this.modelValue;
            },
            set: function(newValue) {
                //console.log("oldval=>" + this.modelValue);
                this.$emit("update:modelValue", newValue);
                // this.$options.components.replaceOptionsQuestion2.methods.initializeComponent(this.wsrFromCms, this.wsrOptions);
            }
        },
        selectedWindshieldDamageTypeValues:{
            get: function() {
                return this.selectedValues.selectedWindshieldDamageType;
            },
            set: function(newValue) {
                this.selectedValues = this.getWindshieldOptions(newValue, this.selectedWindshieldChipCountValues, this.selectedWindshieldReplaceOptionsValues);
            }
        },
        selectedWindshieldChipCountValues: {
            get: function() {
                return this.selectedValues.selectedChipCount;
            },
            set: function(newValue) {
                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, newValue, this.selectedWindshieldReplaceOptionsValues);
                //console.log("here=>" + newValue);
                //this.$emit("update:selectedChipCount", newValue);
            }
        },
        selectedWindshieldReplaceOptionsValues: {
            get: function() {
                return this.selectedValues.selectedWindshieldReplaceOptions;
            },
            set: function(newValue) {
                this.selectedValues = this.getWindshieldOptions(this.selectedWindshieldDamageTypeValues, this.selectedWindshieldChipCountValues, newValue);
            }
        },
        isWindshieldDamageLocation() {
            return  this.selectedDamageLocations.some(selectedDamages => 
                {
                    const categoryAndGlass = selectedDamages.split('-'); //ie: "Suv-Windshield" Splits the answers into [0]"Suv" [1]"Windshield"
                    return Boolean(categoryAndGlass[1].toUpperCase() === "WINDSHIELD");
                });
        },
        isRepairOptionSelected(){
            if (this.selectedWindshieldDamageTypeValues === undefined) return false;

            return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPAIR");
        },
        // isReplaceOptionSelected(){
        //     if (this.selectedWindshieldDamageTypeValues === undefined) return false;

        //     return this.selectedWindshieldDamageTypeValues.some(val => val.toUpperCase() === "REPLACE");
        // },
    },
    components: {
        windshieldDamageTypeQuestion,
        windshieldChipCountQuestion,
        replaceOptionsQuestion
    },
})
</script>