{"version":3,"file":"index-445bebdf.js","sources":["../../../../../src/components/page/series/parameter-config/index.vue"],"sourcesContent":["<script setup lang='ts'>\r\nimport { isArray } from '@qcwp/utils'\r\nimport { useModelParameterConfig } from './hooks/index'\r\nimport type { CompareCarItem } from '~~/src/pages/series/hooks/compareStore'\r\nconst props = withDefaults(defineProps<{\r\n  isCompare?: boolean\r\n  models: CompareCarItem[] // 当前展示的车型\r\n  closeHandle?: (modelId: string) => void\r\n  onlyClient?: boolean\r\n}>(), {\r\n  isCompare: false,\r\n  models: () => [],\r\n  onlyClient: false,\r\n})\r\n\r\n// 隐藏相同参数\r\nconst hideSameParams = ref(false)\r\n// 高亮不同参数\r\nconst highlightDifferentParams = ref(false)\r\n\r\nconst {\r\n  // 参数\r\n  carFieldType,\r\n  carFieldsMap,\r\n  carFieldInitHandle,\r\n  getFieldTypeId,\r\n  // 处理滚动相关事件\r\n  navRef,\r\n  itemsRef,\r\n  currentShowFiledTypeIndex,\r\n\r\n  // 参数是否相同\r\n  isSameMap,\r\n  getIsSame,\r\n  updateIsSame,\r\n  checkIsSame,\r\n  // models\r\n  modelFieldMap,\r\n  getModelsField,\r\n\r\n  // filter\r\n  allModels,\r\n  allModelIds,\r\n  filterOptions,\r\n  showModels,\r\n  showModelIds,\r\n  sortModels,\r\n  updateModels,\r\n  updateSortModels,\r\n  updateFilterOptions,\r\n  changeSticky,\r\n  changeSort,\r\n  changeCompare,\r\n  changeExtendsModelId,\r\n\r\n  getFieldValue,\r\n  setModelField,\r\n} = useModelParameterConfig()\r\nfunction getModelName(modelId: string) {\r\n  const model = allModels.value.find(v => v.modelId === modelId)\r\n  return model?.title || ''\r\n}\r\n\r\nconst promises: any[] = [carFieldInitHandle(props.onlyClient)]\r\n\r\ntry {\r\n  updateModels(props.models)\r\n  await Promise.all(promises)\r\n  if (isArray(props.models) && props.models.length) {\r\n    // 请求全部车型数据\r\n    // await getModelsField(allModelIds.value)\r\n    // setModelField(allModelIds.value)\r\n\r\n    // 请求过滤后的车型参数\r\n    await getModelsField(showModelIds.value)\r\n    setModelField(showModelIds.value)\r\n  }\r\n}\r\ncatch (error) {\r\n  recordError(error)\r\n}\r\n\r\nlet stopHandle = watch(() => props.models, async () => {\r\n  updateModels(props.models)\r\n  if (isArray(props.models) && props.models.length) {\r\n    await getModelsField(allModelIds.value)\r\n    setModelField(allModelIds.value)\r\n  }\r\n}, { deep: true })\r\nlet watchStopHandle = watch(showModelIds, async () => {\r\n  await getModelsField(showModelIds.value)\r\n  setModelField(showModelIds.value)\r\n})\r\n\r\nonUnmounted(() => {\r\n  stopHandle?.()\r\n  watchStopHandle?.()\r\n  stopHandle = null!\r\n  watchStopHandle = null!\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div bg-gray-100 pb-20 class=\"configuration\">\r\n    <slot name=\"header\" />\r\n    <div v-if=\"!isCompare\" class=\"sticky left-0 mt-3 md:w-300 pl-[calc((100vw-62.5rem)/2)]\">\r\n      <template v-for=\"checkbox in filterOptions\" :key=\"checkbox.label\">\r\n        <div v-if=\"checkbox.isShow && checkbox.type === 'checkbox'\" class=\"flex items-start mb-2\">\r\n          <span class=\"flex-shrink-0 mr-5\">{{ checkbox.label }}</span>\r\n          <n-checkbox-group v-model:value=\"checkbox.value\">\r\n            <n-space class=\"flex\">\r\n              <n-checkbox v-for=\"v in checkbox.options\" :key=\"v.value\" :value=\"v.value\" :label=\"v.label\" />\r\n            </n-space>\r\n          </n-checkbox-group>\r\n        </div>\r\n        <div v-if=\"checkbox.isShow && checkbox.type === 'tag' && checkbox.value.length\" class=\"flex items-start mb-2\">\r\n          <span class=\"flex-shrink-0 mr-5\">{{ checkbox.label }}</span>\r\n          <div class=\"flex items-center flex-wrap\">\r\n            <span\r\n              v-for=\"v, i in checkbox.value\" :key=\"i\"\r\n              class=\"px-sm py-0.5 text-3.5 bg-gray-3 rounded-md mr-2 mb-2 cursor-pointer \"\r\n              @click=\"changeExtendsModelId(v, 'remove')\"\r\n            >{{ getModelName(v) }}</span>\r\n          </div>\r\n        </div>\r\n      </template>\r\n    </div>\r\n    <div\r\n      class=\"configuration-wrapper\"\r\n      :style=\"{\r\n        paddingLeft: showModels.length > 4\r\n          ? '0'\r\n          : `calc((100vw - ${63.5 + (showModels.length >>> 2) * 6}rem) / 2)`,\r\n      }\"\r\n    >\r\n      <nav class=\"configuration-nav\">\r\n        <div v-memo=\"[currentShowFiledTypeIndex]\" class=\"configuration-nav_content\">\r\n          <n-scrollbar ref=\"scrollRef\" px-3>\r\n            <div ref=\"navRef\">\r\n              <div\r\n                v-for=\"filedType, index in carFieldType\" :key=\"filedType.id\"\r\n                class=\"nav-item\"\r\n                :data-nav-index=\"index\"\r\n                :class=\"{ active: index === currentShowFiledTypeIndex }\"\r\n              >\r\n                {{ filedType.carFieldTypeName }}\r\n              </div>\r\n            </div>\r\n          </n-scrollbar>\r\n        </div>\r\n      </nav>\r\n      <table\r\n        ref=\"modelTableRef\" class=\"model-table\"\r\n        :class=\"{ 'hide-same': hideSameParams, 'highlight-different': highlightDifferentParams }\"\r\n      >\r\n        <thead ref=\"modelTableHeadRef\" class=\"model-table_head model-table_root\">\r\n          <tr class=\"model-table_row model-table_row__head\">\r\n            <th class=\"model-table_col\">\r\n              <div class=\"text-3 pt-2\" md=\"text-4 pt-0 font-bold\">\r\n                共 <span text-error>{{ showModels.length }}</span> 款车型\r\n              </div>\r\n              <div class=\"flex items-center\" lt-md=\"flex-wrap mt-3 gap-1\">\r\n                <n-switch v-model:value=\"hideSameParams\" />\r\n                <span class=\"ml-1\">仅看差异</span>\r\n              </div>\r\n              <div class=\"flex items-center mt-2 lt-md:hidden\">\r\n                <n-switch v-model:value=\"highlightDifferentParams\" />\r\n                <span class=\"ml-1\">高亮不同参数</span>\r\n              </div>\r\n              <div class=\"mt-2\">\r\n                注：●标配 ○选配 -无\r\n              </div>\r\n            </th>\r\n            <th\r\n              v-for=\"model, index in showModels\"\r\n              :key=\"model.id\" scope=\"col\"\r\n              class=\"model-table_col cell-header\" :class=\"{ 'is-sticky': model.isSticky }\"\r\n            >\r\n              <div class=\"cell-header__content\">\r\n                <div class=\"flex-grow grid items-center text-center\">\r\n                  {{ model.title }}\r\n                </div>\r\n                <div class=\"flex items-center justify-between font-normal flex-shrink-0\" lt-md=\"px-2\">\r\n                  <span class=\"arrow\" :class=\"{ disabled: index === 0 }\" @click=\"changeSort(model.id, 'left')\">\r\n                    <i i-ic:outline-keyboard-arrow-left />\r\n                  </span>\r\n                  <ClientOnly>\r\n                    <span v-if=\"!isCompare\" class=\"text-blue-500 px-0 md:px-4 flex-grow cursor-pointer\" @click=\"changeCompare(model.id)\">\r\n                      {{ model.isAddCompare ? '已加对比' : ' + 对比' }}\r\n                    </span>\r\n                    <span v-else class=\"text-gray-500 px-0 md:px-4 flex-grow\">移动对比</span>\r\n                  </ClientOnly>\r\n                  <span class=\"arrow\" :class=\"{ disabled: index === showModels.length - 1 }\" @click=\"changeSort(model.id, 'right')\">\r\n                    <i i-ic:outline-keyboard-arrow-right />\r\n                  </span>\r\n                </div>\r\n              </div>\r\n              <span class=\"cell-header__close\" @click=\"() => { changeExtendsModelId(model.id);props.closeHandle?.(model.id) }\">\r\n                <i i-ic:sharp-close />\r\n              </span>\r\n              <div class=\"cell-header__pushpin\" :class=\"{ active: model.isSticky }\" @click=\"changeSticky(model.id)\">\r\n                <i class=\" icon\" />\r\n                <span>{{ model.isSticky ? '已钉住' : '钉在左侧' }}</span>\r\n              </div>\r\n            </th>\r\n          </tr>\r\n          <tr class=\"model-table_row\">\r\n            <th scope=\"row\" class=\"model-table_col\">\r\n              厂商指导价\r\n            </th>\r\n            <td\r\n              v-for=\"model in showModels\" :key=\"model.id\"\r\n              class=\"model-table_col font-bold text-red-500\"\r\n              :class=\"{ 'is-sticky': model.isSticky }\"\r\n              v-text=\"model.vendorGuidePrice\"\r\n            />\r\n          </tr>\r\n        </thead>\r\n        <tbody v-for=\"v, i in carFieldsMap\" :key=\"v[0]\" ref=\"itemsRef\" class=\"model-table_root\" :name=\"`config-body-${i}`\">\r\n          <tr scope=\"col\" :data-field-type=\"v[0]\" class=\"model-table_row model-table_row__type\" :class=\"{ 'is-same': getIsSame(v[0]) }\">\r\n            <th class=\"model-table_col model-table_title\">\r\n              {{ v[1].carFieldTypeName }}\r\n            </th>\r\n          </tr>\r\n          <tr\r\n            v-for=\"field in v[1].children\"\r\n            :key=\"field[0]\" scope=\"row\" :data-field=\"field[0]\"\r\n            class=\"model-table_row\"\r\n            :class=\"{ 'is-same': getIsSame(v[0], field[0]), 'is-different': !getIsSame(v[0], field[0]) }\"\r\n          >\r\n            <th class=\"model-table_col\">\r\n              {{ field[1].carFieldName }}\r\n            </th>\r\n            <template v-if=\"!['213', '225'].includes(field[0])\">\r\n              <td\r\n                v-for=\"model in showModels\" :key=\"model.id\"\r\n                class=\"model-table_col text-center\" :class=\"{ 'is-sticky': model.isSticky }\"\r\n                v-text=\"getFieldValue(v[0], field[0], model.id)\"\r\n              />\r\n            </template>\r\n            <template v-else>\r\n              <td\r\n                v-for=\"model in showModels\" :key=\"model.id\"\r\n                class=\"model-table_col\" :class=\"{ 'is-sticky': model.isSticky }\"\r\n                v-html=\"getFieldValue(v[0], field[0], model.id)\"\r\n              />\r\n            </template>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style lang='scss' scoped>\r\n@import \"./style.scss\";\r\n</style>\r\n"],"names":["hideSameParams","ref","highlightDifferentParams","carFieldType","carFieldsMap","carFieldInitHandle","getFieldTypeId","navRef","itemsRef","currentShowFiledTypeIndex","isSameMap","getIsSame","updateIsSame","checkIsSame","modelFieldMap","getModelsField","allModels","allModelIds","filterOptions","showModels","showModelIds","sortModels","updateModels","updateSortModels","updateFilterOptions","changeSticky","changeSort","changeCompare","changeExtendsModelId","getFieldValue","setModelField","useModelParameterConfig","getModelName","modelId","model","v","promises","props","__temp","__restore","_withAsyncContext","isArray","error","recordError","stopHandle","watch","watchStopHandle","onUnmounted"],"mappings":"+5EAgBAA,EAAAC,EAAA,EAAA,EAEAC,EAAAD,EAAA,EAAA,EAEA,CAAM,aAAAE,EAEJ,aAAAC,EACA,mBAAAC,EACA,eAAAC,GACA,OAAAC,EAEA,SAAAC,EACA,0BAAAC,EACA,UAAAC,GAGA,UAAAC,EACA,aAAAC,GACA,YAAAC,GACA,cAAAC,GAEA,eAAAC,EACA,UAAAC,EAGA,YAAAC,EACA,cAAAC,EACA,WAAAC,EACA,aAAAC,EACA,WAAAC,GACA,aAAAC,EACA,iBAAAC,GACA,oBAAAC,GACA,aAAAC,EACA,WAAAC,EACA,cAAAC,EACA,qBAAAC,EACA,cAAAC,EAEA,cAAAC,CACA,EAAAC,GAAA,EAEF,SAAAC,GAAAC,EAAA,CACE,MAAAC,EAAAlB,EAAA,MAAA,KAAAmB,GAAAA,EAAA,UAAAF,CAAA,EACA,OAAAC,GAAA,YAAAA,EAAA,QAAA,EAAuB,CAGzB,MAAAE,GAAA,CAAA/B,EAAAgC,EAAA,UAAA,CAAA,EAEA,GAAA,CACEf,EAAAe,EAAA,MAAA,EACA,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAA,QAAA,IAAAJ,EAAA,CAAA,EAAA,MAAAE,EAAAC,EAAA,EACAE,EAAAJ,EAAA,MAAA,GAAAA,EAAA,OAAA,SAME,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAAzB,EAAAK,EAAA,KAAA,CAAA,EAAA,MAAAkB,EAAAC,EAAA,EACAT,EAAAV,EAAA,KAAA,EACF,OAAAsB,EAAA,CAGAC,GAAAD,CAAA,CAAiB,CAGnB,IAAAE,EAAAC,EAAA,IAAAR,EAAA,OAAA,SAAA,CACEf,EAAAe,EAAA,MAAA,EACAI,EAAAJ,EAAA,MAAA,GAAAA,EAAA,OAAA,SACE,MAAAtB,EAAAE,EAAA,KAAA,EACAa,EAAAb,EAAA,KAAA,EACF,EAAA,CAAA,KAAA,EAAA,CAAA,EAEF6B,EAAAD,EAAAzB,EAAA,SAAA,CACE,MAAAL,EAAAK,EAAA,KAAA,EACAU,EAAAV,EAAA,KAAA,CAAgC,CAAA,EAGlC,OAAA2B,GAAA,IAAA,CACEH,GAAA,MAAAA,IACAE,GAAA,MAAAA,IACAF,EAAA,KACAE,EAAA,IAAkB,CAAA"}