From f8323498255fee614b4b6d62fa638ecb2987a1dd Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Tue, 6 Jun 2023 18:04:21 -0400
Subject: [PATCH] display correct vehicle image WIP

---
 .../policy-vehicles/policy-vehicles.vue       | 56 ++++++++++++++++---
 1 file changed, 49 insertions(+), 7 deletions(-)

diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index be5f17dc..42144ec4 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -50,9 +50,13 @@ export default {
     mixins: [BaseFormMixin],
     data() {
     return {
-      selectedVehicleVin: "",
-      bailout: false
-        }
+        selectedVehicleVin: "",
+        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() {
-                return this.selectedVehicleVin && !this.selectedStyle;
-            }            
-        },        
+            selectedVehicle() {
+                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,