{"version":3,"sources":["webpack:///./src/components/listing/TheListingBasicDetails.vue","webpack:///src/components/listing/TheListingBasicDetails.vue","webpack:///./src/components/listing/TheListingBasicDetails.vue?9500","webpack:///./src/components/listing/TheListingBasicDetails.vue?43bb","webpack:///./src/components/listing/TheListingBasicDetails.vue?6bf3"],"names":["_c","_self","staticClass","_vm","directives","name","modifiers","value","expression","styles","key","attrs","loading","ListingTags","callback","style","_l","nofkList","nofk","_v","_s","p","seatsList","seats","doors","class","staticStyle","borderColor","c","externalColors","genericColors","bodyTypes","bodyType","b","transmissionsTypes","transmissionsType","t","isFuelsExpand","fuel","f","cylinders","cylinder","displacements","displacement","d","drivetrains","drivetrain","_e","scopedSlots","hide","sf","TagValues","staticRenderFns","props","restart","type","nextButton","styleList","components","TheListingCard","TheSaveAndLeave","data","text","doorsList","externalColor","trim","fuels","fuelslength","standardFeatures","selectedFeature","tags","carInfo","color18","code","errorMessage","computed","isExternalColorExpand","methods","showStyles","l","selectStyle","getColors","colorList","saveInput","addToShowMoreList","array","checkNextButton","response","ListingId","VIN","StyleId","planId","element","el","setListing","TagId","ListingTagId","Value","mileage","Tags","console","setFeature","existed","feature","beforeMount","updated","beforeDestroy","component"],"mappings":"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pE,YAAAoE,gBACA,CAAApE,aAAAoE,gBACA,CAAApE,cAAAoE,gBACA,CAAApE,cAAAoE,gBACA,CAAApE,WAAAoE,gBACA,CAAApE,cAAAoE,gBACA,CAAApE,YAAAoE,gBACA,CAAApE,YAAAoE,gBACA,CAAApE,cAAAoE,gBACA,CAAApE,aAAAoE,iBAEAC,oBAGAC,aACA,gBACA,eACA,iBACA,kBACA,gBACA,4BACA,oBACA,sBACA,kBACA,eACA,eACA,sBACA,eACA,uBAEAC,wBACA,0DAEAvC,gBACA,mDAGAwC,SAIAC,aACA,wBACA,2BACAC,0BACA,sCAGA,6BACA,0BACA,6BAGAC,eACA,gDACA,mBACA,0CAEAC,aACA,qBAQA,qBACAC,wBACA,sBAEA,uBAEAC,eACA,2BAEAC,qBACA,8BACAC,UACA,8CAEAC,kBAEA,0BACA,mBACA,mBACA,mBACA,sBACA,0BACA,sBACA,oBACA,gCACA,uBAEA,4BAEA,6BAGA,oBAGA,MAFA,gBACA,uBAEA,IAEAC,EADA,yCACAA,4BACAC,qDAGAD,4BACAE,4BACAC,UACAC,2CAGA,oBACA,8DACA,uCACAC,mBACA,aACA,4BAEA,eACA,2BAEA,cACA,6CACA,uBACA,4BAEAC,wBACA,cACA,2BACA,oDAIA,eACA,6CACA,uBACA,wBAEAA,wBACA,cACA,uBACA,oDAIA,eACA,+CACA,uBACA,8BAEAA,wBACA,cACA,6BACA,sDAIA,eACA,iDACA,uBACA,qCAEAA,wBACA,cACA,oCACA,wDAIA,eACA,2CACA,uBACA,4BAEAA,wBACA,cACA,2BACA,kDAIA,eACA,uDACA,uBACA,gCAEAA,wBACA,cACA,+BACA,8DAIA,gBACA,yCACAA,wBACA,cACA,uBACA,kDAKA,WACA,yCAGA,gBACA,iBACA,SACA,sBAIAC,kBACA,mBACA,gBACAC,QACAC,eACAC,WAGA,0BACA,MAEAC,EADA,uCACAA,4CAEAA,mCAEAA,eACA,gBACAH,SACAE,UAEA,UACA,+BACAT,6CACAW,iBAEA,SACAC,iBAGAC,gBACA,MACAC,KACA,+BACA,iCACA,cACAA,KACA,iCACA,uCAIA,IAEAC,EADA,EACAA,CAAAR,QAAAE,eAEAM,CAAAR,QAAAE,cAEA,+BAGA,sBACA,iCACA,UACA,+BACAT,6CACAW,4BAEA,SACAC,kBAKAI,cACA,kBACA,qCAEA,mBAGAC,UACA,wBAEAC,gBACA,2BCvxBohB,I,wBCQhhBC,EAAY,eACd,EACA,EACAvD,GACA,EACA,KACA,KACA,MAIa,aAAAuD,E,2CCnBf","file":"assets/js/chunk-0fc76073.8619b984.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('b-container',{staticClass:\"text-center vehicle-details\"},[_c('h2',{staticClass:\"text-primary title\"},[_vm._v(_vm._s(_vm.$t(\"listing.label.details\")))]),_c('div',{staticClass:\"mt-4\"},[_c('TheListingCard')],1),_c('b-link',{directives:[{name:\"b-modal\",rawName:\"v-b-modal.notYourVehicle\",modifiers:{\"notYourVehicle\":true}}],staticClass:\"not-your-vehicle\"},[_vm._v(_vm._s(_vm.$t(\"ListingProcess.notYourVehicle\")))]),_c('b-card',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.errorMessage),expression:\"errorMessage\"}],staticClass:\"my-5 text-danger\"},[_vm._v(\" \"+_vm._s(_vm.errorMessage)+\" \")]),_c('div',[_c('div',{staticClass:\"text-left\"},[(_vm.styles)?_c('section',{staticClass:\"mb-5\"},[_c('h6',{staticClass:\"border-bottom py-3\"},[_vm._v(_vm._s(_vm.$t(\"ListingProcess.Styles\")))]),_vm._l((_vm.styles),function(t,key){return _c('b-btn',{key:key,staticClass:\"m-1\",attrs:{\"disabled\":_vm.loading}},[_c('b-form-checkbox',{attrs:{\"disabled\":_vm.loading,\"unchecked-value\":null,\"value\":t.ListingTags[0].Value},on:{\"change\":function($event){return _vm.selectStyle(t.StyleId)}},model:{value:(_vm.style),callback:function ($$v) {_vm.style=$$v},expression:\"style\"}},[_vm._v(\" \"+_vm._s(t.ListingTags[0].Value)+\" \")])],1)})],2):_vm._e(),_c('b-overlay',{attrs:{\"show\":_vm.loading,\"opacity\":\"0.9\",\"variant\":\"white\"}},[(_vm.style)?_c('div',[_c('section',{staticClass:\"listing-details-section\"},[_c('h6',{staticClass:\"section-title\"},[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.NumberOfKeys\"))+\" \"),(_vm.vehicleNumberOfKeys)?_c('span',[_vm._v(\": \"+_vm._s(_vm.vehicleNumberOfKeys))]):_vm._e()]),_c('div',{staticClass:\"section-item-wrapper\"},_vm._l((_vm.nofkList),function(p,key){return _c('b-form-checkbox',{key:key,attrs:{\"button\":\"\",\"value\":p.Value,\"button-variant\":\"outline-primary\"},on:{\"change\":function($event){_vm.saveInput('vehicleNumberOfKeys', _vm.nofk ? p.Value : null),\n                    _vm.setListing(13, p.TagValueId, p.ListingTagId)}},model:{value:(_vm.nofk),callback:function ($$v) {_vm.nofk=$$v},expression:\"nofk\"}},[(_vm.nofk === p.Value)?_c('b-icon-check',{attrs:{\"variant\":\"white\"}}):_vm._e(),_c('span',{staticClass:\"px-1\"},[_vm._v(_vm._s(p.Value))])],1)}),1)]),_c('section',{directives:[{name:\"show\",rawName:\"v-show\",value:(!_vm.$store.getters.hasSeatInfo),expression:\"!$store.getters.hasSeatInfo\"}],staticClass:\"listing-details-section\"},[_c('h6',{staticClass:\"section-title\"},[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.NumberOfSeats\"))),(_vm.vehicleSeats)?_c('span',[_vm._v(\": \"+_vm._s(_vm.vehicleSeats))]):_vm._e()]),_c('div',{staticClass:\"section-item-wrapper\"},_vm._l((_vm.seatsList),function(p,key){return _c('b-form-checkbox',{key:key,attrs:{\"button\":\"\",\"value\":p.Value,\"button-variant\":\"outline-primary\"},on:{\"change\":function($event){_vm.saveInput('vehicleSeats', _vm.seats ? p.Value : null),\n                    _vm.setListing(7, p.Value, p.ListingTagId)}},model:{value:(_vm.seats),callback:function ($$v) {_vm.seats=$$v},expression:\"seats\"}},[(_vm.seats === p.Value)?_c('b-icon-check',{attrs:{\"variant\":\"white\"}}):_vm._e(),_c('span',{staticClass:\"px-1\"},[_vm._v(_vm._s(p.text))])],1)}),1)]),_c('section',{directives:[{name:\"show\",rawName:\"v-show\",value:(!_vm.$store.getters.hasDoorInfo),expression:\"!$store.getters.hasDoorInfo\"}],staticClass:\"listing-details-section\"},[_c('h6',{staticClass:\"border-bottom py-3\"},[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.NumberOfDoors\"))),(_vm.vehicleDoors)?_c('span',[_vm._v(\": \"+_vm._s(_vm.vehicleDoors))]):_vm._e()]),_vm._l((_vm.doorsList),function(p,key){return _c('b-form-checkbox',{key:key,staticClass:\"mx-1\",attrs:{\"button\":\"\",\"value\":p.Value,\"button-variant\":\"outline-primary\"},on:{\"change\":function($event){_vm.saveInput('vehicleDoors', _vm.doors ? p.Value : null),\n                  _vm.setListing(6, p.Value, p.ListingTagId)}},model:{value:(_vm.doors),callback:function ($$v) {_vm.doors=$$v},expression:\"doors\"}},[(_vm.doors === p.Value)?_c('b-icon-check',{attrs:{\"variant\":\"white\"}}):_vm._e(),_c('span',{staticClass:\"px-1\"},[_vm._v(_vm._s(p.text))])],1)})],2),_c('section',{staticClass:\"listing-details-section\"},[_c('h6',{staticClass:\"section-title\"},[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.ExternalColour\"))),(_vm.vehicleColor)?_c('span',[_vm._v(\": \"+_vm._s(_vm.vehicleColor))]):_vm._e()]),(!_vm.isExternalColorExpand)?_c('div',[_c('div',{staticClass:\"section-item-wrapper\"},[_c('div',{staticClass:\"section-item-wrapper color\"},_vm._l((_vm.externalColors),function(c,key){return _c('div',{key:key,staticClass:\"d-inline-block\"},[_c('b-btn',{class:c.Code !== '#FFFFFF' ? '' : 'blue-border',staticStyle:{\"width\":\"80px\",\"height\":\"40px\"},style:({\n                        background: c.Code ? c.Code : 'transparent',\n                        borderColor: c.code !== '#FFFFFF' ? 'transparent' : '',\n                      }),on:{\"click\":function($event){(_vm.externalColor = _vm.externalColor === c.Value ? null : c.Value),\n                          _vm.setListing(8, c.TagValueId, c.ListingTagId),\n                          _vm.saveInput('vehicleColor', _vm.externalColor ? c.Value : null)}}},[_c('b-icon-check',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.externalColor === c.Value),expression:\"externalColor === c.Value\"}],attrs:{\"scale\":\"1.5\",\"variant\":c.Code !== '#FFFFFF' ? 'white' : 'primary'}})],1),_c('p',{staticClass:\"color-name\",class:{\n                        'text-primary': _vm.externalColor === c.Value,\n                      }},[_vm._v(\" \"+_vm._s(c.Value)+\" \")])],1)}),0),_c('b-btn',{staticClass:\"more-color\",attrs:{\"variant\":\"transparent\"},on:{\"click\":function($event){return _vm.addToShowMoreList('externalColor')}}},[_c('b-link',[_vm._v(_vm._s(_vm.$t(\"ListingProcess.SeeMoreColor\"))+\" \"),_c('b-icon-chevron-right')],1)],1)],1)]):_c('div',{staticClass:\"section-item-wrapper\"},_vm._l((_vm.genericColors),function(c,key){return _c('div',{key:key,staticClass:\"d-inline-block\"},[_c('b-btn',{class:c.Code !== '#FFFFFF' ? '' : 'blue-border',staticStyle:{\"width\":\"80px\",\"height\":\"40px\"},style:({\n                    background: c.Code ? c.Code : 'transparent',\n                    borderColor: c.code !== '#FFFFFF' ? 'transparent' : '',\n                  }),on:{\"click\":function($event){(_vm.externalColor = _vm.externalColor === c.Value ? null : c.Value),\n                      _vm.setListing(8, c.TagValueId, c.ListingTagId),\n                      _vm.saveInput('vehicleColor', _vm.externalColor ? c.Value : null)}}},[_c('b-icon-check',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.externalColor === c.Value),expression:\"externalColor === c.Value\"}],attrs:{\"scale\":\"1.5\",\"variant\":c.Code !== '#FFFFFF' ? 'white' : 'primary'}})],1),_c('p',{staticClass:\"color-name\",class:{\n                    'text-primary': _vm.externalColor === c.Value,\n                  }},[_vm._v(\" \"+_vm._s(c.Value)+\" \")])],1)}),0)]),_c('section',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.bodyTypes),expression:\"bodyTypes\"}],staticClass:\"listing-details-section\"},[_c('h6',{staticClass:\"section-title\"},[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.BodyType\"))),(_vm.vehicleBodyType)?_c('span',[_vm._v(\": \"+_vm._s(_vm.vehicleBodyType))]):_vm._e()]),_c('div',{staticClass:\"section-item-wrapper\"},_vm._l((_vm.bodyTypes),function(b,key){return _c('b-form-checkbox',{key:key,attrs:{\"button\":\"\",\"value\":b.TagValueId,\"button-variant\":\"outline-primary\"},on:{\"change\":function($event){_vm.saveInput('vehicleBodyType', _vm.bodyType ? b.Value : null),\n                    _vm.setListing(9, b.TagValueId, b.ListingTagId)}},model:{value:(_vm.bodyType),callback:function ($$v) {_vm.bodyType=$$v},expression:\"bodyType\"}},[(_vm.bodyType === b.TagValueId)?_c('b-icon-check',{attrs:{\"variant\":\"white\"}}):_vm._e(),_c('span',{staticClass:\"px-1\"},[_vm._v(_vm._s(b.Value))])],1)}),1)]),_c('section',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.transmissionsTypes),expression:\"transmissionsTypes\"}],staticClass:\"listing-details-section\"},[_c('h6',{staticClass:\"section-title\"},[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.TransmissionsType\"))),(_vm.vehicleTransmission)?_c('span',[_vm._v(\": \"+_vm._s(_vm.vehicleTransmission))]):_vm._e()]),_c('div',{staticClass:\"section-item-wrapper\"},_vm._l((_vm.transmissionsTypes),function(t,key){return _c('b-form-checkbox',{key:key,attrs:{\"button\":\"\",\"value\":t.TagValueId,\"button-variant\":\"outline-primary\"},on:{\"change\":function($event){_vm.saveInput('vehicleTransmission', _vm.transmissionsType ? t.Value : null),\n                    _vm.setListing(21, t.TagValueId, t.ListingTagId)}},model:{value:(_vm.transmissionsType),callback:function ($$v) {_vm.transmissionsType=$$v},expression:\"transmissionsType\"}},[(_vm.transmissionsType === t.TagValueId)?_c('b-icon-check',{attrs:{\"variant\":\"white\"}}):_vm._e(),_c('span',{staticClass:\"px-1\"},[_vm._v(_vm._s(t.Value))])],1)}),1)]),_c('section',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.fuels),expression:\"fuels\"}],staticClass:\"listing-details-section\"},[_c('h6',{staticClass:\"section-title\"},[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.FuelType\"))),(_vm.vehicleFuelType)?_c('span',[_vm._v(\": \"+_vm._s(_vm.vehicleFuelType))]):_vm._e()]),_c('div',{staticClass:\"section-item-wrapper\"},[_c('div',{staticClass:\"section-item-wrapper\"},[_vm._l((_vm.fuels),function(f,key){return [(!_vm.isFuelsExpand && key <= _vm.fuelslength)?_c('b-form-checkbox',{key:key,attrs:{\"button\":\"\",\"value\":f.TagValueId,\"button-variant\":\"outline-primary\"},on:{\"change\":function($event){_vm.saveInput('vehicleFuelType', _vm.fuel ? f.Value : null),\n                        _vm.setListing(18, f.TagValueId, f.ListingTagId)}},model:{value:(_vm.fuel),callback:function ($$v) {_vm.fuel=$$v},expression:\"fuel\"}},[(_vm.fuel === f.TagValueId)?_c('b-icon-check',{attrs:{\"variant\":\"white\"}}):_vm._e(),_c('span',{staticClass:\"px-1\"},[_vm._v(_vm._s(f.Value))])],1):_vm._e(),(_vm.isFuelsExpand)?_c('b-form-checkbox',{key:key + 'fuel',attrs:{\"button\":\"\",\"value\":f.TagValueId,\"button-variant\":\"outline-primary\"},on:{\"change\":function($event){_vm.saveInput('vehicleFuelType', _vm.fuel ? f.Value : null),\n                        _vm.setListing(18, f.TagValueId, f.ListingTagId)}},model:{value:(_vm.fuel),callback:function ($$v) {_vm.fuel=$$v},expression:\"fuel\"}},[(_vm.fuel === f.TagValueId)?_c('b-icon-check',{attrs:{\"variant\":\"white\"}}):_vm._e(),_c('span',{staticClass:\"px-1\"},[_vm._v(_vm._s(f.Value))])],1):_vm._e()]}),(!_vm.isFuelsExpand)?_c('b-form-checkbox',{staticClass:\"more-color\",attrs:{\"button\":\"\"},on:{\"change\":function($event){(_vm.fuelslength = _vm.fuels.length), _vm.addToShowMoreList('fuels')}}},[_vm._v(\" \"+_vm._s(_vm.$t(\"carDetail.label.showMore\"))+\" \"),_c('b-icon-chevron-right')],1):_vm._e()],2)])]),_c('section',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.cylinders),expression:\"cylinders\"}],staticClass:\"listing-details-section\"},[_c('h6',{staticClass:\"section-title\"},[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.EngineNumberCylinder\"))),(_vm.vehicleEngine)?_c('span',[_vm._v(\": \"+_vm._s(_vm.vehicleEngine))]):_vm._e()]),_c('div',{staticClass:\"section-item-wrapper\"},_vm._l((_vm.cylinders),function(c,key){return _c('b-form-checkbox',{key:key,attrs:{\"button\":\"\",\"value\":c.TagValueId,\"button-variant\":\"outline-primary\"},on:{\"change\":function($event){_vm.saveInput('vehicleEngine', _vm.cylinder ? c.Value : null),\n                    _vm.setListing(24, c.TagValueId, c.ListingTagId)}},model:{value:(_vm.cylinder),callback:function ($$v) {_vm.cylinder=$$v},expression:\"cylinder\"}},[(_vm.cylinder === c.TagValueId)?_c('b-icon-check',{attrs:{\"variant\":\"white\"}}):_vm._e(),_c('span',{staticClass:\"px-1\"},[_vm._v(_vm._s(c.Value))])],1)}),1)]),_c('section',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.displacements),expression:\"displacements\"}],staticClass:\"listing-details-section\"},[_c('h6',{staticClass:\"section-title\"},[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.EngineDisplacement\"))+\" \"),(_vm.vehicleEngineDisplacement)?_c('span',[_vm._v(\": \"+_vm._s(_vm.vehicleEngineDisplacement))]):_vm._e()]),_c('div',{staticClass:\"section-item-wrapper\"},_vm._l((_vm.displacements),function(d,key){return _c('b-form-checkbox',{key:key,attrs:{\"button\":\"\",\"value\":d.TagValueId,\"button-variant\":\"outline-primary\"},on:{\"change\":function($event){_vm.saveInput('vehicleEngineDisplacement', _vm.displacement ? d.Value : null),\n                    _vm.setListing(25, d.TagValueId, d.ListingTagId)}},model:{value:(_vm.displacement),callback:function ($$v) {_vm.displacement=$$v},expression:\"displacement\"}},[(_vm.displacement === d.TagValueId)?_c('b-icon-check',{attrs:{\"variant\":\"white\"}}):_vm._e(),_c('span',{staticClass:\"px-1\"},[_vm._v(_vm._s(d.Value))])],1)}),1)]),_c('section',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.drivetrains),expression:\"drivetrains\"}],staticClass:\"listing-details-section\"},[_c('h6',{staticClass:\"section-title\"},[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.Drivetrain\"))),(_vm.vehicleDrivetrain)?_c('span',[_vm._v(\": \"+_vm._s(_vm.vehicleDrivetrain))]):_vm._e()]),_c('div',{staticClass:\"section-item-wrapper\"},_vm._l((_vm.drivetrains),function(d,key){return _c('b-form-checkbox',{key:key,attrs:{\"button\":\"\",\"value\":d.TagValueId,\"button-variant\":\"outline-primary\"},on:{\"change\":function($event){_vm.saveInput('vehicleDrivetrain', _vm.drivetrain ? d.Value : null),\n                    _vm.setListing(20, d.TagValueId, d.ListingTagId)}},model:{value:(_vm.drivetrain),callback:function ($$v) {_vm.drivetrain=$$v},expression:\"drivetrain\"}},[(_vm.drivetrain === d.TagValueId)?_c('b-icon-check',{attrs:{\"variant\":\"white\"}}):_vm._e(),_c('span',{staticClass:\"px-1\"},[_vm._v(_vm._s(d.Value))])],1)}),1)])]):_vm._e()])],1)]),_c('b-modal',{attrs:{\"id\":\"fullFeatures\",\"hide-header\":\"\",\"hide-footer\":\"\",\"centered\":\"\",\"no-close-on-backdrop\":\"\",\"size\":\"lg\"},scopedSlots:_vm._u([{key:\"default\",fn:function({ hide }){return [_c('div',[_c('b-button',{staticClass:\"close p-2 m-2\",on:{\"click\":function($event){hide(), _vm.submitFeature()}}},[_c('b-icon',{attrs:{\"icon\":\"x\",\"scale\":\"1.5\"}})],1)],1),_c('div',{staticClass:\"p-4\"},[_c('h2',[_vm._v(_vm._s(_vm.$t(\"ListingProcess.StandardFeatures\")))]),_c('p',{staticClass:\"text-half-dark\"},[_vm._v(\"Actual features may differ\")]),_vm._l((_vm.standardFeatures),function(sf,key){return _c('div',{key:key},[_c('h3',{staticClass:\"border-bottom pt-2\"},[_vm._v(_vm._s(sf.Name))]),_vm._l((sf.Tags),function(sft,key){return _c('div',{key:key,staticClass:\"px-3\"},[_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(sft.IsRequired),expression:\"sft.IsRequired\"}]},[_c('b-form-checkbox',{attrs:{\"checked\":sft.TagValues[0].Installed},on:{\"change\":function($event){return _vm.setFeature(sft.TagId, sft.TagValues[0].Installed)}}},[_vm._v(_vm._s(sft.TagName)+\" \")])],1)])}),_vm._l((sf.TagCategories),function(sftc,key){return _c('div',{key:key,staticClass:\"px-3\"},[_c('h4',{staticClass:\"border-bottom\"},[_vm._v(_vm._s(sftc.Name))]),_vm._l((sftc.Tags),function(sftct,key){return _c('div',{key:key,staticClass:\"px-3\"},[_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(sftct.IsRequired),expression:\"sftct.IsRequired\"}]},[_c('b-form-checkbox',{attrs:{\"checked\":sftct.TagValues[0].Installed},on:{\"change\":function($event){return _vm.setFeature(_vm.sft.TagId, _vm.sft.TagValues[0].Installed)}}},[_vm._v(_vm._s(sftct.TagName)+\" \")])],1)])})],2)})],2)})],2),_c('div',{staticClass:\"m-auto text-center\"},[_c('b-button',{staticClass:\"px-3 my-3\",attrs:{\"pill\":\"\",\"size\":\"md\",\"variant\":\"primary\"},on:{\"click\":function($event){_vm.submitFeature(), hide()}}},[_vm._v(\" \"+_vm._s(_vm.$t(\"ListingProcess.CloseAndSubmit\"))+\" \")])],1)]}}])}),_c('div',{staticClass:\"d-flex justify-content-between align-items-center mt-10\"},[_c('div',{staticClass:\"d-flex justify-content-between align-items-center\"},[_c('b-button',{directives:[{name:\"b-modal\",rawName:\"v-b-modal.cancelModal\",modifiers:{\"cancelModal\":true}}],staticClass:\"px-3\",attrs:{\"pill\":\"\",\"variant\":\"half-dark\"}},[_c('v-icon',[_vm._v(\"mdi-close\")]),_vm._v(\" \"+_vm._s(_vm.$t(\"global.button.cancel\"))+\" \")],1)],1),_c('TheSaveAndLeave')],1)],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <b-container class=\"text-center vehicle-details\">\r\n    <h2 class=\"text-primary title\">{{ $t(\"listing.label.details\") }}</h2>\r\n\r\n    <div class=\"mt-4\">\r\n      <TheListingCard />\r\n    </div>\r\n\r\n    <b-link v-b-modal.notYourVehicle class=\"not-your-vehicle\">{{ $t(\"ListingProcess.notYourVehicle\") }}</b-link>\r\n\r\n    <b-card v-show=\"errorMessage\" class=\"my-5 text-danger\">\r\n      {{ errorMessage }}\r\n    </b-card>\r\n\r\n    <div>\r\n      <div class=\"text-left\">\r\n        <section v-if=\"styles\" class=\"mb-5\">\r\n          <h6 class=\"border-bottom py-3\">{{ $t(\"ListingProcess.Styles\") }}</h6>\r\n          <b-btn class=\"m-1\" v-for=\"(t, key) in styles\" :key=\"key\" :disabled=\"loading\">\r\n            <b-form-checkbox\r\n              :disabled=\"loading\"\r\n              :unchecked-value=\"null\"\r\n              v-model=\"style\"\r\n              :value=\"t.ListingTags[0].Value\"\r\n              @change=\"selectStyle(t.StyleId)\"\r\n            >\r\n              {{ t.ListingTags[0].Value }}\r\n            </b-form-checkbox>\r\n          </b-btn>\r\n        </section>\r\n        <!-- <section v-else>\r\n          <h6 class=\"border-bottom py-3\">Style: {{ style }}</h6>\r\n        </section> -->\r\n\r\n        <b-overlay :show=\"loading\" opacity=\"0.9\" variant=\"white\">\r\n          <div v-if=\"style\">\r\n            <section class=\"listing-details-section\">\r\n              <h6 class=\"section-title\">\r\n                {{ $t(\"ListingProcess.NumberOfKeys\") }}\r\n                <span v-if=\"vehicleNumberOfKeys\">: {{ vehicleNumberOfKeys }}</span>\r\n              </h6>\r\n              <!-- <b-form-checkbox-group\r\n            v-model=\"nofk\"\r\n          >\r\n            <b-btn class=\"m-1\" v-for=\"(p, key) in nofkList\" :key=\"key\">\r\n              <b-form-checkbox\r\n                :value=\"p.value\"\r\n                >{{ p.text }}</b-form-checkbox\r\n              >\r\n            </b-btn>\r\n          </b-form-checkbox-group> -->\r\n              <!-- <p>{{nofkList}}</p> -->\r\n              <div class=\"section-item-wrapper\">\r\n                <b-form-checkbox\r\n                  v-model=\"nofk\"\r\n                  button\r\n                  v-for=\"(p, key) in nofkList\"\r\n                  :key=\"key\"\r\n                  :value=\"p.Value\"\r\n                  button-variant=\"outline-primary\"\r\n                  @change=\"\r\n                    saveInput('vehicleNumberOfKeys', nofk ? p.Value : null),\r\n                      setListing(13, p.TagValueId, p.ListingTagId)\r\n                  \"\r\n                >\r\n                  <b-icon-check v-if=\"nofk === p.Value\" variant=\"white\" />\r\n                  <span class=\"px-1\">{{ p.Value }}</span>\r\n                </b-form-checkbox>\r\n              </div>\r\n            </section>\r\n\r\n            <section class=\"listing-details-section\" v-show=\"!$store.getters.hasSeatInfo\">\r\n              <h6 class=\"section-title\">\r\n                {{ $t(\"ListingProcess.NumberOfSeats\") }}<span v-if=\"vehicleSeats\">: {{ vehicleSeats }}</span>\r\n              </h6>\r\n\r\n              <div class=\"section-item-wrapper\">\r\n                <b-form-checkbox\r\n                  v-model=\"seats\"\r\n                  button\r\n                  v-for=\"(p, key) in seatsList\"\r\n                  :key=\"key\"\r\n                  :value=\"p.Value\"\r\n                  button-variant=\"outline-primary\"\r\n                  @change=\"\r\n                    saveInput('vehicleSeats', seats ? p.Value : null),\r\n                      setListing(7, p.Value, p.ListingTagId)\r\n                  \"\r\n                  ><b-icon-check v-if=\"seats === p.Value\" variant=\"white\" />\r\n                  <span class=\"px-1\">{{ p.text }}</span>\r\n                </b-form-checkbox>\r\n              </div>\r\n            </section>\r\n\r\n            <section class=\"listing-details-section\" v-show=\"!$store.getters.hasDoorInfo\">\r\n              <h6 class=\"border-bottom py-3\">\r\n                {{ $t(\"ListingProcess.NumberOfDoors\") }}<span v-if=\"vehicleDoors\">: {{ vehicleDoors }}</span>\r\n              </h6>\r\n              <b-form-checkbox\r\n                v-model=\"doors\"\r\n                button\r\n                v-for=\"(p, key) in doorsList\"\r\n                :key=\"key\"\r\n                :value=\"p.Value\"\r\n                class=\"mx-1\"\r\n                button-variant=\"outline-primary\"\r\n                @change=\"\r\n                  saveInput('vehicleDoors', doors ? p.Value : null),\r\n                    setListing(6, p.Value, p.ListingTagId)\r\n                \"\r\n                ><b-icon-check v-if=\"doors === p.Value\" variant=\"white\" />\r\n                <span class=\"px-1\">{{ p.text }}</span>\r\n              </b-form-checkbox>\r\n            </section>\r\n\r\n            <section class=\"listing-details-section\">\r\n              <h6 class=\"section-title\">\r\n                {{ $t(\"ListingProcess.ExternalColour\") }}<span v-if=\"vehicleColor\">: {{ vehicleColor }}</span>\r\n              </h6>\r\n              <div v-if=\"!isExternalColorExpand\">\r\n                <div class=\"section-item-wrapper\">\r\n                  <div class=\"section-item-wrapper color\">\r\n                    <div\r\n                      v-for=\"(c, key) in externalColors\"\r\n                      :key=\"key\"\r\n                      class=\"d-inline-block\"\r\n                    >\r\n                      <b-btn\r\n                        :class=\"c.Code !== '#FFFFFF' ? '' : 'blue-border'\"\r\n                        style=\"width: 80px; height: 40px\"\r\n                        :style=\"{\r\n                          background: c.Code ? c.Code : 'transparent',\r\n                          borderColor: c.code !== '#FFFFFF' ? 'transparent' : '',\r\n                        }\"\r\n                        @click=\"\r\n                          (externalColor = externalColor === c.Value ? null : c.Value),\r\n                            setListing(8, c.TagValueId, c.ListingTagId),\r\n                            saveInput('vehicleColor', externalColor ? c.Value : null)\r\n                        \"\r\n                        ><b-icon-check\r\n                          v-show=\"externalColor === c.Value\"\r\n                          scale=\"1.5\"\r\n                          :variant=\"c.Code !== '#FFFFFF' ? 'white' : 'primary'\"\r\n                        />\r\n                      </b-btn>\r\n                      <p\r\n                        class=\"color-name\"\r\n                        :class=\"{\r\n                          'text-primary': externalColor === c.Value,\r\n                        }\"\r\n                      >\r\n                        {{ c.Value }}\r\n                      </p>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <b-btn\r\n                    class=\"more-color\"\r\n                    variant=\"transparent\"\r\n                    @click=\"addToShowMoreList('externalColor')\"\r\n                    ><b-link>{{ $t(\"ListingProcess.SeeMoreColor\") }} <b-icon-chevron-right /></b-link>\r\n                  </b-btn>\r\n                </div>\r\n              </div>\r\n              <div v-else class=\"section-item-wrapper\">\r\n                <div v-for=\"(c, key) in genericColors\" :key=\"key\" class=\"d-inline-block\">\r\n                  <b-btn\r\n                    :class=\"c.Code !== '#FFFFFF' ? '' : 'blue-border'\"\r\n                    style=\"width: 80px; height: 40px\"\r\n                    :style=\"{\r\n                      background: c.Code ? c.Code : 'transparent',\r\n                      borderColor: c.code !== '#FFFFFF' ? 'transparent' : '',\r\n                    }\"\r\n                    @click=\"\r\n                      (externalColor = externalColor === c.Value ? null : c.Value),\r\n                        setListing(8, c.TagValueId, c.ListingTagId),\r\n                        saveInput('vehicleColor', externalColor ? c.Value : null)\r\n                    \"\r\n                    ><b-icon-check\r\n                      v-show=\"externalColor === c.Value\"\r\n                      scale=\"1.5\"\r\n                      :variant=\"c.Code !== '#FFFFFF' ? 'white' : 'primary'\"\r\n                    />\r\n                  </b-btn>\r\n                  <p\r\n                    class=\"color-name\"\r\n                    :class=\"{\r\n                      'text-primary': externalColor === c.Value,\r\n                    }\"\r\n                  >\r\n                    {{ c.Value }}\r\n                  </p>\r\n                </div>\r\n              </div>\r\n            </section>\r\n\r\n            <section class=\"listing-details-section\" v-show=\"bodyTypes\">\r\n              <h6 class=\"section-title\">\r\n                {{ $t(\"ListingProcess.BodyType\") }}<span v-if=\"vehicleBodyType\">: {{ vehicleBodyType }}</span>\r\n              </h6>\r\n              <div class=\"section-item-wrapper\">\r\n                <b-form-checkbox\r\n                  v-model=\"bodyType\"\r\n                  button\r\n                  v-for=\"(b, key) in bodyTypes\"\r\n                  :key=\"key\"\r\n                  :value=\"b.TagValueId\"\r\n                  button-variant=\"outline-primary\"\r\n                  @change=\"\r\n                    saveInput('vehicleBodyType', bodyType ? b.Value : null),\r\n                      setListing(9, b.TagValueId, b.ListingTagId)\r\n                  \"\r\n                  ><b-icon-check v-if=\"bodyType === b.TagValueId\" variant=\"white\" />\r\n                  <span class=\"px-1\">{{ b.Value }}</span>\r\n                </b-form-checkbox>\r\n              </div>\r\n            </section>\r\n\r\n            <section class=\"listing-details-section\" v-show=\"transmissionsTypes\">\r\n              <h6 class=\"section-title\">\r\n                {{ $t(\"ListingProcess.TransmissionsType\") }}<span v-if=\"vehicleTransmission\">: {{ vehicleTransmission }}</span>\r\n              </h6>\r\n              <div class=\"section-item-wrapper\">\r\n                <b-form-checkbox\r\n                  v-model=\"transmissionsType\"\r\n                  button\r\n                  v-for=\"(t, key) in transmissionsTypes\"\r\n                  :key=\"key\"\r\n                  :value=\"t.TagValueId\"\r\n                  button-variant=\"outline-primary\"\r\n                  @change=\"\r\n                    saveInput('vehicleTransmission', transmissionsType ? t.Value : null),\r\n                      setListing(21, t.TagValueId, t.ListingTagId)\r\n                  \"\r\n                  ><b-icon-check\r\n                    v-if=\"transmissionsType === t.TagValueId\"\r\n                    variant=\"white\"\r\n                  />\r\n                  <span class=\"px-1\">{{ t.Value }}</span>\r\n                </b-form-checkbox>\r\n              </div>\r\n            </section>\r\n\r\n            <section class=\"listing-details-section\" v-show=\"fuels\">\r\n              <h6 class=\"section-title\">\r\n                {{ $t(\"ListingProcess.FuelType\") }}<span v-if=\"vehicleFuelType\">: {{ vehicleFuelType }}</span>\r\n              </h6>\r\n              <div class=\"section-item-wrapper\">\r\n                <div class=\"section-item-wrapper\">\r\n                  <template v-for=\"(f, key) in fuels\">\r\n                    <b-form-checkbox\r\n                      :key=\"key\"\r\n                      v-if=\"!isFuelsExpand && key <= fuelslength\"\r\n                      v-model=\"fuel\"\r\n                      button\r\n                      :value=\"f.TagValueId\"\r\n                      button-variant=\"outline-primary\"\r\n                      @change=\"\r\n                        saveInput('vehicleFuelType', fuel ? f.Value : null),\r\n                          setListing(18, f.TagValueId, f.ListingTagId)\r\n                      \"\r\n                      ><b-icon-check v-if=\"fuel === f.TagValueId\" variant=\"white\" />\r\n                      <span class=\"px-1\">{{ f.Value }}</span>\r\n                    </b-form-checkbox>\r\n                    <b-form-checkbox\r\n                      :key=\"key + 'fuel'\"\r\n                      v-if=\"isFuelsExpand\"\r\n                      v-model=\"fuel\"\r\n                      button\r\n                      :value=\"f.TagValueId\"\r\n                      button-variant=\"outline-primary\"\r\n                      @change=\"\r\n                        saveInput('vehicleFuelType', fuel ? f.Value : null),\r\n                          setListing(18, f.TagValueId, f.ListingTagId)\r\n                      \"\r\n                      ><b-icon-check v-if=\"fuel === f.TagValueId\" variant=\"white\" />\r\n                      <span class=\"px-1\">{{ f.Value }}</span>\r\n                    </b-form-checkbox>\r\n                  </template>\r\n\r\n                  <b-form-checkbox\r\n                    button\r\n                    class=\"more-color\"\r\n                    v-if=\"!isFuelsExpand\"\r\n                    @change=\"(fuelslength = fuels.length), addToShowMoreList('fuels')\"\r\n                  >\r\n                    {{ $t(\"carDetail.label.showMore\") }}\r\n                    <b-icon-chevron-right/>\r\n                  </b-form-checkbox>\r\n                </div>\r\n              </div>\r\n            </section>\r\n\r\n            <section class=\"listing-details-section\" v-show=\"cylinders\">\r\n              <h6 class=\"section-title\">\r\n                {{ $t(\"ListingProcess.EngineNumberCylinder\") }}<span v-if=\"vehicleEngine\"\r\n                  >: {{ vehicleEngine }}</span\r\n                >\r\n              </h6>\r\n              <div class=\"section-item-wrapper\">\r\n                <b-form-checkbox\r\n                  v-model=\"cylinder\"\r\n                  button\r\n                  v-for=\"(c, key) in cylinders\"\r\n                  :key=\"key\"\r\n                  :value=\"c.TagValueId\"\r\n                  button-variant=\"outline-primary\"\r\n                  @change=\"\r\n                    saveInput('vehicleEngine', cylinder ? c.Value : null),\r\n                      setListing(24, c.TagValueId, c.ListingTagId)\r\n                  \"\r\n                >\r\n                  <b-icon-check v-if=\"cylinder === c.TagValueId\" variant=\"white\" />\r\n                  <span class=\"px-1\">{{ c.Value }}</span>\r\n                </b-form-checkbox>\r\n              </div>\r\n            </section>\r\n\r\n            <section class=\"listing-details-section\" v-show=\"displacements\">\r\n              <h6 class=\"section-title\">\r\n                {{ $t(\"ListingProcess.EngineDisplacement\") }}\r\n                <span v-if=\"vehicleEngineDisplacement\">: {{ vehicleEngineDisplacement }}</span>\r\n              </h6>\r\n              <div class=\"section-item-wrapper\">\r\n                <b-form-checkbox\r\n                  v-model=\"displacement\"\r\n                  button\r\n                  v-for=\"(d, key) in displacements\"\r\n                  :key=\"key\"\r\n                  :value=\"d.TagValueId\"\r\n                  button-variant=\"outline-primary\"\r\n                  @change=\"\r\n                    saveInput('vehicleEngineDisplacement', displacement ? d.Value : null),\r\n                      setListing(25, d.TagValueId, d.ListingTagId)\r\n                  \"\r\n                  ><b-icon-check v-if=\"displacement === d.TagValueId\" variant=\"white\" />\r\n                  <span class=\"px-1\">{{ d.Value }}</span>\r\n                </b-form-checkbox>\r\n              </div>\r\n            </section>\r\n\r\n            <section class=\"listing-details-section\" v-show=\"drivetrains\">\r\n              <h6 class=\"section-title\">\r\n                {{ $t(\"ListingProcess.Drivetrain\") }}<span v-if=\"vehicleDrivetrain\">: {{ vehicleDrivetrain }}</span>\r\n              </h6>\r\n              <div class=\"section-item-wrapper\">\r\n                <b-form-checkbox\r\n                  v-model=\"drivetrain\"\r\n                  button\r\n                  v-for=\"(d, key) in drivetrains\"\r\n                  :key=\"key\"\r\n                  :value=\"d.TagValueId\"\r\n                  button-variant=\"outline-primary\"\r\n                  @change=\"\r\n                    saveInput('vehicleDrivetrain', drivetrain ? d.Value : null),\r\n                      setListing(20, d.TagValueId, d.ListingTagId)\r\n                  \"\r\n                  ><b-icon-check v-if=\"drivetrain === d.TagValueId\" variant=\"white\" />\r\n                  <span class=\"px-1\">{{ d.Value }}</span>\r\n                </b-form-checkbox>\r\n              </div>\r\n            </section>\r\n          </div>\r\n        </b-overlay>\r\n      </div>\r\n    </div>\r\n    <b-modal\r\n      id=\"fullFeatures\"\r\n      hide-header\r\n      hide-footer\r\n      centered\r\n      no-close-on-backdrop\r\n      size=\"lg\"\r\n    >\r\n      <template #default=\"{ hide }\">\r\n        <div>\r\n          <b-button class=\"close p-2 m-2\" @click=\"hide(), submitFeature()\">\r\n            <b-icon icon=\"x\" scale=\"1.5\"/>\r\n          </b-button>\r\n        </div>\r\n        <div class=\"p-4\">\r\n          <h2>{{ $t(\"ListingProcess.StandardFeatures\") }}</h2>\r\n          <p class=\"text-half-dark\">Actual features may differ</p>\r\n          <div v-for=\"(sf, key) in standardFeatures\" :key=\"key\">\r\n            <h3 class=\"border-bottom pt-2\">{{ sf.Name }}</h3>\r\n            <div v-for=\"(sft, key) in sf.Tags\" :key=\"key\" class=\"px-3\">\r\n              <div v-show=\"sft.IsRequired\">\r\n                <b-form-checkbox\r\n                  :checked=\"sft.TagValues[0].Installed\"\r\n                  @change=\"setFeature(sft.TagId, sft.TagValues[0].Installed)\"\r\n                  >{{ sft.TagName }}\r\n                </b-form-checkbox>\r\n              </div>\r\n            </div>\r\n            <div v-for=\"(sftc, key) in sf.TagCategories\" :key=\"key\" class=\"px-3\">\r\n              <h4 class=\"border-bottom\">{{ sftc.Name }}</h4>\r\n              <div v-for=\"(sftct, key) in sftc.Tags\" :key=\"key\" class=\"px-3\">\r\n                <div v-show=\"sftct.IsRequired\">\r\n                  <b-form-checkbox\r\n                    :checked=\"sftct.TagValues[0].Installed\"\r\n                    @change=\"setFeature(sft.TagId, sft.TagValues[0].Installed)\"\r\n                    >{{ sftct.TagName }}\r\n                    <!-- <span class=\"text-half-dark\">{{ sftct }}</span> -->\r\n                  </b-form-checkbox>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"m-auto text-center\">\r\n          <b-button\r\n            pill\r\n            size=\"md\"\r\n            variant=\"primary\"\r\n            class=\"px-3 my-3\"\r\n            @click=\"submitFeature(), hide()\"\r\n          >\r\n            {{ $t(\"ListingProcess.CloseAndSubmit\") }}\r\n          </b-button>\r\n        </div>\r\n      </template>\r\n    </b-modal>\r\n    <div class=\"d-flex justify-content-between align-items-center mt-10\">\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n        <b-button pill variant=\"half-dark\" class=\"px-3\" v-b-modal.cancelModal>\r\n          <v-icon>mdi-close</v-icon> {{ $t(\"global.button.cancel\") }}\r\n        </b-button>\r\n      </div>\r\n        <TheSaveAndLeave />\r\n      </div>\r\n  </b-container>\r\n</template>\r\n\r\n<script>\r\nimport axios from \"axios\";\r\nimport { mapGetters } from \"vuex\";\r\n\r\nexport default {\r\n  props: {\r\n    restart: { type: Function },\r\n    nextButton: { type: Function },\r\n    styleList: { type: Array },\r\n  },\r\n  components: {\r\n    TheListingCard: () => import(\"@/components/listing/TheListingCard\"),\r\n    TheSaveAndLeave: () => import(\"@/components/listing/TheSaveAndLeaveButton\"),\r\n  },\r\n  data() {\r\n    return {\r\n      loading: false,\r\n      nofk: this.$store.getters.vehicleNumberOfKeys,\r\n      nofkList: null,\r\n      seats: this.$store.getters.vehicleSeats,\r\n      seatsList: [\r\n        { text: \"2\", value: \"2\" },\r\n        { text: \"4\", value: \"4\" },\r\n        { text: \"5\", value: \"5\" },\r\n        { text: \"6\", value: \"6\" },\r\n        { text: \"7\", value: \"7\" },\r\n        { text: \"9\", value: \"9\" },\r\n      ],\r\n      doors: this.vehicleDoors,\r\n      doorsList: [\r\n        { text: \"2\", value: \"2\" },\r\n        { text: \"3\", value: \"3\" },\r\n        { text: \"4\", value: \"4\" },\r\n        { text: \"6\", value: \"6\" },\r\n      ],\r\n      styles: null,\r\n      style: this.$store.getters.vehicleStyle,\r\n      externalColors: null,\r\n      externalColor: this.$store.getters.vehicleColor,\r\n      genericColors: null,\r\n      trim: null,\r\n      fuels: null,\r\n      fuel: null,\r\n      fuelslength: 4,\r\n      drivetrains: null,\r\n      drivetrain: null,\r\n      transmissionsTypes: null,\r\n      transmissionsType: null,\r\n      bodyTypes: null,\r\n      bodyType: null,\r\n      cylinders: null,\r\n      cylinder: null,\r\n      displacements: null,\r\n      displacement: null,\r\n      standardFeatures: null,\r\n      selectedFeature: [],\r\n      tags: [],\r\n      carInfo: null,\r\n      color18: [\r\n        { name: \"Black\", code: \"#000000\" },\r\n        { name: \"White\", code: \"#FFFFFF\" },\r\n        { name: \"Red\", code: \"#FF0000\" },\r\n        { name: \"Yellow\", code: \"#FFFF00\" },\r\n        { name: \"Blue\", code: \"#0000FF\" },\r\n        { name: \"Green\", code: \"#008000\" },\r\n        { name: \"Silver\", code: \"#C0C0C0\" },\r\n        { name: \"Gold\", code: \"#FFD700\" },\r\n        { name: \"Brown\", code: \"#A52A2A\" },\r\n        { name: \"Orange\", code: \"#FFA500\" },\r\n        { name: \"Purple\", code: \"#800080\" },\r\n        { name: \"Tan\", code: \"#D2B48C\" },\r\n        { name: \"Maroon\", code: \"#800000\" },\r\n        { name: \"Teal\", code: \"#008080\" },\r\n        { name: \"Gray\", code: \"#808080\" },\r\n        { name: \"Copper\", code: \"#B87333\" },\r\n        { name: \"Beige\", code: \"#F5F5DC\" },\r\n      ],\r\n      errorMessage: null,\r\n    };\r\n  },\r\n  computed: {\r\n    ...mapGetters([\r\n      \"vehicleStyle\",\r\n      \"vehicleStyleId\",\r\n      \"vehicleBodyType\",\r\n      \"vehicleEngine\",\r\n      \"vehicleEngineDisplacement\",\r\n      \"vehicleDrivetrain\",\r\n      \"vehicleTransmission\",\r\n      \"vehicleFuelType\",\r\n      \"vehicleDoors\",\r\n      \"vehicleSeats\",\r\n      \"vehicleNumberOfKeys\",\r\n      \"vehicleColor\",\r\n      \"detailPageShowMore\",\r\n    ]),\r\n    isExternalColorExpand() {\r\n      return this.detailPageShowMore.includes(\"externalColor\");\r\n    },\r\n    isFuelsExpand() {\r\n      return this.detailPageShowMore.includes(\"fuels\");\r\n    },\r\n  },\r\n  methods: {\r\n    //JHMCG56492C003897 trim:s package:s\r\n    //2FMDK4KC4CBA27842 trim:s package:m\r\n    //JN1EV7AR5JM611460 trim:m package:m\r\n    showStyles() {\r\n      let l = this.styleList[0];\r\n      if (this.styleList.length === 1) {\r\n        l.ListingTags.forEach((element) => {\r\n          if (element.TagId === 389) this.style = element.Value;\r\n        });\r\n        // this.getCarInfo(l.StyleId);\r\n        this.selectStyle(l.StyleId);\r\n      } else if (this.styleList.length > 1) {\r\n        this.styles = this.styleList;\r\n      }\r\n    },\r\n    selectStyle(id) {\r\n      this.$store.dispatch(\"vehicleStyle\", this.style);\r\n      this.getCarInfo(id);\r\n      this.$store.dispatch(\"vehicleStyleId\", id);\r\n    },\r\n    getColors(colorList) {\r\n      this.genericColors = colorList;\r\n      // colorList.forEach(element => {\r\n      //   this.color18.forEach(color => {\r\n      //     if (element.Value === color.name) {\r\n      //       element.Code = color.code;\r\n      //     }\r\n      //   });\r\n      // });\r\n      this.genericColors = colorList;\r\n      colorList = colorList.filter(function (el) {\r\n        return el.Installed;\r\n      });\r\n      this.externalColors = colorList;\r\n    },\r\n    saveInput(item, value) {\r\n      this.$store.dispatch(item, value);\r\n    },\r\n    addToShowMoreList(value) {\r\n      let array = this.detailPageShowMore;\r\n      array.push(value);\r\n      this.$store.dispatch(\"detailPageShowMore\", array);\r\n    },\r\n    checkNextButton() {\r\n      if (\r\n        this.vehicleNumberOfKeys &&\r\n        this.vehicleSeats &&\r\n        this.vehicleDoors &&\r\n        this.vehicleColor &&\r\n        this.vehicleBodyType &&\r\n        this.vehicleTransmission &&\r\n        this.vehicleFuelType &&\r\n        this.vehicleEngine &&\r\n        this.vehicleEngineDisplacement &&\r\n        this.vehicleDrivetrain\r\n      ) {\r\n        this.nextButton(\"page1\", false);\r\n      } else {\r\n        this.nextButton(\"page1\", true);\r\n      }\r\n    },\r\n    async getCarInfo(id) {\r\n      this.loading = true;\r\n      this.errorMessage = null;\r\n      let response;\r\n      try {\r\n        if (this.$store.getters.listingStockID) {\r\n          response = await axios.post(\"Listing/CarInfo\", {\r\n            ListingId: this.$store.getters.listingStockID,\r\n          });\r\n        } else {\r\n          response = await axios.post(\"Listing/CarInfo\", {\r\n            VIN: this.$store.getters.vin,\r\n            StyleId: id,\r\n            planId: this.$store.getters.listingPlanID,\r\n          });\r\n        }\r\n        this.carInfo = response.data;\r\n        this.$store.dispatch(\"listingStockID\", this.carInfo.ListingId);\r\n        this.carInfo.TagCategories.forEach((element) => {\r\n          element.Tags.forEach((el) => {\r\n            if (el.TagId === 8) {\r\n              this.getColors(el.TagValues);\r\n            }\r\n            if (el.TagId === 13) {\r\n              this.nofkList = el.TagValues;\r\n            }\r\n            if (el.TagId === 9) {\r\n              this.$store.dispatch(\"vehicleBodyType\", null);\r\n              if (el.TagValues.length > 1) {\r\n                this.bodyTypes = el.TagValues;\r\n              }\r\n              el.TagValues.forEach((e) => {\r\n                if (e.Installed) {\r\n                  this.bodyType = e.TagValueId;\r\n                  this.$store.dispatch(\"vehicleBodyType\", e.Value);\r\n                }\r\n              });\r\n            }\r\n            if (el.TagId === 18) {\r\n              this.$store.dispatch(\"vehicleFuelType\", null);\r\n              if (el.TagValues.length > 1) {\r\n                this.fuels = el.TagValues;\r\n              }\r\n              el.TagValues.forEach((e) => {\r\n                if (e.Installed) {\r\n                  this.fuel = e.TagValueId;\r\n                  this.$store.dispatch(\"vehicleFuelType\", e.Value);\r\n                }\r\n              });\r\n            }\r\n            if (el.TagId === 20) {\r\n              this.$store.dispatch(\"vehicleDrivetrain\", null);\r\n              if (el.TagValues.length > 1) {\r\n                this.drivetrains = el.TagValues;\r\n              }\r\n              el.TagValues.forEach((e) => {\r\n                if (e.Installed) {\r\n                  this.drivetrain = e.TagValueId;\r\n                  this.$store.dispatch(\"vehicleDrivetrain\", e.Value);\r\n                }\r\n              });\r\n            }\r\n            if (el.TagId === 21) {\r\n              this.$store.dispatch(\"vehicleTransmission\", null);\r\n              if (el.TagValues.length > 1) {\r\n                this.transmissionsTypes = el.TagValues;\r\n              }\r\n              el.TagValues.forEach((e) => {\r\n                if (e.Installed) {\r\n                  this.transmissionsType = e.TagValueId;\r\n                  this.$store.dispatch(\"vehicleTransmission\", e.Value);\r\n                }\r\n              });\r\n            }\r\n            if (el.TagId === 24) {\r\n              this.$store.dispatch(\"vehicleEngine\", null);\r\n              if (el.TagValues.length > 1) {\r\n                this.cylinders = el.TagValues;\r\n              }\r\n              el.TagValues.forEach((e) => {\r\n                if (e.Installed) {\r\n                  this.cylinder = e.TagValueId;\r\n                  this.$store.dispatch(\"vehicleEngine\", e.Value);\r\n                }\r\n              });\r\n            }\r\n            if (el.TagId === 25) {\r\n              this.$store.dispatch(\"vehicleEngineDisplacement\", null);\r\n              if (el.TagValues.length > 1) {\r\n                this.displacements = el.TagValues;\r\n              }\r\n              el.TagValues.forEach((e) => {\r\n                if (e.Installed) {\r\n                  this.displacement = e.TagValueId;\r\n                  this.$store.dispatch(\"vehicleEngineDisplacement\", e.Value);\r\n                }\r\n              });\r\n            }\r\n            if (el.TagId === 389) {\r\n              this.$store.dispatch(\"vehicleTrim\", null);\r\n              el.TagValues.forEach((e) => {\r\n                if (e.Installed) {\r\n                  this.trim = e.TagValueId;\r\n                  this.$store.dispatch(\"vehicleTrim\", e.Value);\r\n                }\r\n              });\r\n            }\r\n          });\r\n          if (element.Id === 4) {\r\n            this.standardFeatures = element.TagCategories;\r\n          }\r\n        });\r\n        this.loading = false;\r\n        this.styles = null;\r\n      } catch (error) {\r\n        this.errorMessage = error;\r\n        // this.loading = false;\r\n      }\r\n    },\r\n    setListing(tagId, value, listingTagId) {\r\n      let v = value.toString();\r\n      this.tags.push({\r\n        TagId: tagId,\r\n        ListingTagId: listingTagId,\r\n        Value: v,\r\n      });\r\n    },\r\n    async sendListingChange() {\r\n      let mileage;\r\n      if (this.$store.getters.mileageUnit === \"mi\") {\r\n        mileage = this.$store.getters.vehicleMileage * 1.609344;\r\n      } else {\r\n        mileage = this.$store.getters.vehicleMileage;\r\n      }\r\n      mileage = mileage.toString();\r\n      this.tags.push({\r\n        TagId: 11,\r\n        Value: mileage,\r\n      });\r\n      try {\r\n        await axios.post(\"Listing/SetListing\", {\r\n          ListingId: this.$store.getters.listingStockID,\r\n          Tags: this.tags,\r\n        });\r\n      } catch (error) {\r\n        console.log(error);\r\n      }\r\n    },\r\n    setFeature(tagId, value) {\r\n      let feature,\r\n        existed = false;\r\n      if (this.selectedFeature.length > 0) {\r\n        this.selectedFeature.forEach((element) => {\r\n          if (element.TagId === tagId) {\r\n            existed = true;\r\n            if (element.Value === \"True\") element.Value = \"False\";\r\n            else if (element.Value === \"False\") element.Value = \"True\";\r\n          }\r\n        });\r\n      }\r\n      if (!existed) {\r\n        if (value) {\r\n          feature = { TagId: tagId, Value: \"False\" };\r\n        } else {\r\n          feature = { TagId: tagId, Value: \"True\" };\r\n        }\r\n        this.selectedFeature.push(feature);\r\n      }\r\n    },\r\n    async submitFeature() {\r\n      if (this.selectedFeature.length > 0) {\r\n        try {\r\n          await axios.post(\"Listing/SetListing\", {\r\n            ListingId: this.$store.getters.listingStockID,\r\n            Tags: this.selectedFeature,\r\n          });\r\n        } catch (error) {\r\n          console.log(error);\r\n        }\r\n      }\r\n    },\r\n  },\r\n  beforeMount() {\r\n    if (this.vehicleStyle) {\r\n      this.getCarInfo(this.vehicleStyleId);\r\n    } else {\r\n      this.showStyles();\r\n    }\r\n  },\r\n  updated() {\r\n    this.checkNextButton();\r\n  },\r\n  beforeDestroy() {\r\n    this.sendListingChange();\r\n  },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n\r\n\r\n.cancelButton {\r\n  width: 188px;\r\n  height: 56px;\r\n  background: #acacac;\r\n  color: #111;\r\n  font-size: 20px !important;\r\n  font-weight: 600 !important;\r\n  font-family: \"Inter\" !important;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.vehicle-details {\r\n  \r\n  .title {\r\n    font-weight: 600;\r\n    font-size: 24px !important;\r\n    margin-bottom: 16px;\r\n  }\r\n  .not-your-vehicle {\r\n    font-size: 14px;\r\n  }\r\n}\r\n.listing-details-section {\r\n  margin-top: 64px;\r\n  .section-title {\r\n    font-size: 20px;\r\n    font-weight: 600;\r\n    font-family: \"Inter\" !important;\r\n    margin-bottom: 16px;\r\n    border-bottom: 1px solid #d0d0d0;\r\n    padding-bottom: 8px;\r\n  }\r\n  .section-item-wrapper {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    column-gap: 24px;\r\n    row-gap: 16px;\r\n    flex-wrap: wrap;\r\n    &.color {\r\n      column-gap: 16px;\r\n    }\r\n    button {\r\n      border-radius: 4px;\r\n      overflow: hidden;\r\n    }\r\n  }\r\n  .btn-group-toggle {\r\n    label {\r\n      height: 40px;\r\n      font-size: 14px;\r\n      font-weight: 400;\r\n      font-family: \"Inter\", sans-serif !important;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-width: 90px;\r\n      box-shadow: none;\r\n      transition: all 0.3s;\r\n      &.active,\r\n      &:active,\r\n      &:focus,\r\n      &:hover {\r\n        color: white !important;\r\n        span {\r\n          color: white !important;\r\n        }\r\n      }\r\n      svg {\r\n        font-size: 30px !important;\r\n        height: 30px;\r\n        width: 30px;\r\n      }\r\n    }\r\n  }\r\n  .color-name {\r\n    font-weight: 500;\r\n    font-size: 14px;\r\n    margin-top: 8px;\r\n    margin-bottom: 0;\r\n  }\r\n  .blue-border {\r\n    border: 1px solid $light-blue !important;\r\n  }\r\n  .more-color {\r\n    height: 40px;\r\n    vertical-align: top;\r\n    font-size: 14px;\r\n    min-width: 170px;\r\n    font-weight: 500;\r\n    border: 1px solid #dbdbdb;\r\n    color: $light-blue;\r\n    border-radius: 4px;\r\n    font-family: \"Inter\", sans-serif;\r\n    .b-icon {\r\n      font-size: 125% !important;\r\n      width: auto !important;\r\n      height: auto !important;\r\n    }\r\n    &:hover {\r\n      color: #004077 !important;\r\n    }\r\n    label {\r\n      background: none !important;\r\n      border: none !important;\r\n      font-size: 14px;\r\n      font-weight: 500;\r\n      color: $light-blue;\r\n      font-family: \"Inter\", sans-serif;\r\n      &:hover {\r\n        color: #004077 !important;\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../../node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./TheListingBasicDetails.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./TheListingBasicDetails.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./TheListingBasicDetails.vue?vue&type=template&id=77b9e44a&\"\nimport script from \"./TheListingBasicDetails.vue?vue&type=script&lang=js&\"\nexport * from \"./TheListingBasicDetails.vue?vue&type=script&lang=js&\"\nimport style0 from \"./TheListingBasicDetails.vue?vue&type=style&index=0&id=77b9e44a&prod&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/sass-loader/dist/cjs.js??ref--14-0!../../../node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./TheListingBasicDetails.vue?vue&type=style&index=0&id=77b9e44a&prod&lang=scss&\""],"sourceRoot":""}