display correct vehicle image WIP

src/layouts/policy-vehicles/policy-vehicles.vue

@@ -50,9 +50,13 @@ export default {
     mixins: [BaseFormMixin],
     data() {
     return {
-      selectedVehicleVin: "",
+        selectedVehicleVin: "",
-      bailout: false
+        displayGeneric: false,
-        }
+        bailout: false
+    }
+    },
+    mounted() {
+        useMainStore().resetVehicleState();
     },
     async beforeRouteEnter(to, from, next)
     {
@@ -146,10 +150,48 @@ export default {
             VehiclesFromApi() {
                 return useMainStore().pageData(issPageValues.POLICY_VEHICLES);
             },
-            displayGeneric() {
+            selectedVehicle() {
-                return this.selectedVehicleVin && !this.selectedStyle;
+                const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin);
-            }            
+                return vehicle;
-        },        
+            },
+            //displayGeneric() {
+                // const selectedVehicle = useMainStore().lookupVehicleByVin(this.selectedVehicleVin);
+                // const styleOptions = this.mainStore.getVehicleStyles(
+                //     selectedVehicle.year,
+                //     selectedVehicle.make,
+                //     selectedVehicle.model,
+                // );
+
+
+                // const styleOptions = this.selectedVehicle.style;
+
+                // if (styleOptions.length > 1) {
+                //     return true;
+                // }
+                // return false;
+            //}            
+        },
+        watch: {
+            async selectedVehicleVin(value) {
+                const vehicle = await this.lookupVehicleByVin(value);
+                if (value === "Vehicle not listed") {
+                    this.mainStore.resetVehicleState();
+                }
+                this.mainStore.updateVehicle(vehicle.data);
+                
+                    const styleOptions = await this.mainStore.getVehicleStyles(
+                        vehicle.data.year,
+                        vehicle.data.make, 
+                        vehicle.data.model
+                    )
+    
+                    if (styleOptions.length > 1) {
+                        this.displayGeneric = true;
+                    }
+                
+            }
+
+        },     
         components: {
             siteHeader,
             siteFooter,