{"version":3,"file":"pages-_articleId_-28f392c0.js","sources":["../../../../../src/pages/video/[articleId].vue"],"sourcesContent":["<script setup lang='ts'>\r\nimport { ARTICLE_TYPE, LOAD_STATUS, imageTransform, videoHomePath } from '@qcwp/common'\r\nimport { isClient, trimStr } from '@qcwp/utils'\r\nimport { useArticleDetailPage, useVideoDetailMobileOrTabletComponent } from '~~/src/pages/news/hooks/detail'\r\nimport { useJump } from '~~/src/pages/news/hooks/jump'\r\nimport { SYMBOL_CONTENT_DETAIL, SYMBOL_SHARE_BASE, SYMBOL_SHARE_MEDIA } from '~~/src/common/const/symbol'\r\nimport { useDailyStore } from '~~/src/store'\r\n\r\nimport { LogicArticleList } from '~~/src/logic/article/list'\r\n\r\nconst route = useRoute()\r\nconst { currentArticle } = storeToRefs(useDailyStore())\r\n\r\nconst { isMobileOrTablet } = useDevice()\r\nconst {\r\n  // detail info\r\n  isAuthor,\r\n  status,\r\n  detail,\r\n  detailType,\r\n  siteMeta,\r\n  media,\r\n  shareBase,\r\n  // To comment list\r\n  commentClick,\r\n  initHandle: init,\r\n  starHandle,\r\n  // mediaRecommendAttention handle\r\n  mediaRecommendAttentionStatusChange,\r\n  // to comment list\r\n  detailComponentRef,\r\n  commentClickHandle,\r\n} = useArticleDetailPage(ARTICLE_TYPE.VIDEO)\r\n\r\nconst {\r\n  active,\r\n  carTestDriveRef,\r\n  recommendRef,\r\n  commentRef,\r\n  itemsContainerRef,\r\n  itemsTabsRef,\r\n  changeActive,\r\n} = useVideoDetailMobileOrTabletComponent()\r\nconst { list, serverHandler: getArticleList } = LogicArticleList({ pageNum: 1, pageSize: 10 })\r\nconst data = computed(() => list.value.filter(v => v?.id && v.id !== detail.value?.id).slice(0, 6))\r\n\r\nif (isClient) {\r\n  provide(unref(SYMBOL_CONTENT_DETAIL()), detail)\r\n  provide(unref(SYMBOL_SHARE_BASE()), shareBase)\r\n  provide(unref(SYMBOL_SHARE_MEDIA()), media)\r\n}\r\n\r\nasync function initHandler() {\r\n  try {\r\n    const promises = [\r\n      init(),\r\n      getArticleList(),\r\n    ]\r\n    await Promise.all(promises)\r\n    if (isClient) {\r\n      shareBase.value && useShare(shareBase.value)\r\n      if (detail.value) {\r\n        currentArticle.value = {\r\n          ...detail.value.generateDailyData(),\r\n          isSwiper: route.query.swiper === 'true',\r\n        }\r\n      }\r\n    }\r\n  }\r\n  catch (error) {\r\n    recordError(error)\r\n    showDialogError(error)\r\n  }\r\n}\r\n\r\nawait initHandler()\r\nconst { targetRef, containerRef, style, tips } = useJump(detail.value?.id || '')\r\n</script>\r\n\r\n<template>\r\n  <div class=\"linear-gray-to-white-transition md:pb-20\">\r\n    <utils-site-head :site-meta=\"siteMeta\" />\r\n    <layout-nav-default-back :title=\"detail?.title || '视频详情'\" />\r\n    <div ref=\"containerRef\" class=\"layout-default-container-1100 md:pt-4 relative\">\r\n      <div v-if=\"!isMobileOrTablet\" lt-md:hidden md:block>\r\n        <layout-breadcrumb v-if=\"detailType && detailType === ARTICLE_TYPE.VIDEO\" title=\"视频\" :title-url=\"videoHomePath()\" :sub-title=\"detail?.title || '视频详情'\" />\r\n        <layout-breadcrumb v-else sub-title=\"视频详情\" />\r\n      </div>\r\n      <div ref=\"targetRef\">\r\n        <div md=\"mt-3\" class=\"relative overflow-hidden\">\r\n          <div v-if=\"isAuthor === '1'\" class=\"tag primary\">\r\n            预览\r\n          </div>\r\n          <div v-if=\"detail !== null && status === LOAD_STATUS.END\" md=\"flex items-start\">\r\n            <div lg=\"flex-grow w-0\" class=\"flex-shrink-0 w-full\">\r\n              <div class=\"bg-white w-full\" md=\"rounded-md overflow-hidden\" lt-md=\"h-[calc(100vh-6.5rem)] flex flex-col\">\r\n                <base-proportion :proportion=\"56\" class=\"flex-shrink-0 bg-black\">\r\n                  <base-video\r\n                    v-if=\"detail?.videoUrl\"\r\n                    class=\"w-full h-full\"\r\n                    :src=\"detail?.videoUrl\"\r\n                    :title=\"detail?.title\"\r\n                    :poster=\"imageTransform(detail?.imgs?.[0], { format: 'webp' })\"\r\n                  />\r\n                  <p v-else class=\"text-white grid place-items-center w-full h-full\" :data-src=\"detail?.videoUrl\">\r\n                    未找到相关视频\r\n                  </p>\r\n                </base-proportion>\r\n\r\n                <div ref=\"itemsContainerRef\" class=\"flex-grow overflow-y-auto\">\r\n                  <div p-3>\r\n                    <h1 class=\"text-4 font-bold\" md=\"text-5\">\r\n                      {{ detail?.title }}\r\n                    </h1>\r\n                    <!-- 作者信息 -->\r\n                    <PageNewsArticleDetailAuthor\r\n                      v-if=\"detail\"\r\n                      class=\"md:pr-3 mt-2\"\r\n                      :media-name=\"detail.mediaName\"\r\n                      :media-id=\"detail.mediaUserId\"\r\n                      :media-type=\"detail.mediaType\"\r\n                      :media-avatar=\"detail.mediaAvatar\"\r\n                      :author-name=\"detail.authorName\"\r\n                      :sys-user-name=\"detail.sysUserName\"\r\n                      :worker=\"detail.articleWorkerVOList\"\r\n                      :time=\"detail.showCreateTime\"\r\n                      :look=\"detail.look\"\r\n                      :is-focus=\"detail.focus\"\r\n                      :media-grade=\"detail.mediaGrade\"\r\n                      @mediaRecommendAttentionStatusChange=\"mediaRecommendAttentionStatusChange\"\r\n                    />\r\n                    <n-ellipsis v-if=\"detail?.summary\" class=\"text-4 mt-3\" expand-trigger=\"click\" line-clamp=\"2\" :tooltip=\"false\">\r\n                      {{ trimStr(detail.summary) }}\r\n                    </n-ellipsis>\r\n                  </div>\r\n\r\n                  <div v-if=\"isMobileOrTablet\" class=\"bg-white\">\r\n                    <div ref=\"itemsTabsRef\" class=\"flex items-center justify-around text-4 bg-white h-10 sticky top-0 z-4 border-y-1 border-gray-100\">\r\n                      <span :class=\"[active === 0 ? 'tabs-active' : 'tabs-inactive']\" @click=\"changeActive(0)\">预约试驾</span>\r\n                      <span :class=\"[active === 1 ? 'tabs-active' : 'tabs-inactive']\" @click=\"changeActive(1)\">相关推荐</span>\r\n                      <span :class=\"[active === 2 ? 'tabs-active' : 'tabs-inactive']\" @click=\"changeActive(2)\">评论 {{ detail?.commentCount || '' }}</span>\r\n                    </div>\r\n                    <div ref=\"carTestDriveRef\" class=\"px-1 md:hidden\">\r\n                      <LayoutCarTestDrive class=\"mt-3\" :hidden-title=\"true\" :car-list=\"detail?.porArticleCarRefList\" />\r\n                    </div>\r\n                    <div ref=\"recommendRef\" p-4 md:hidden>\r\n                      <layout-article-left-item v-for=\"v in data\" :key=\"v\" :article=\"v\" mb-3 last:mb-0 />\r\n                    </div>\r\n                    <div ref=\"commentRef\" bg-white rounded-md p-4 md=\"hidden\" class=\"border-t-1 border-gray-100\" lt-md=\"min-h-[calc(100vh-56vw-9rem)]\">\r\n                      <ClientOnly>\r\n                        <layout-comment-list :title=\"false\" :el=\"itemsContainerRef\" :comment-count=\"detail?.commentCount || 0\" :param=\"{ articleId: detail?.id, level: 1 }\" />\r\n                      </ClientOnly>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <ClientOnly v-if=\"!isMobileOrTablet\">\r\n                <LayoutCarTestDrive class=\"mt-3 lt-md:hidden\" :car-list=\"detail?.porArticleCarRefList\" />\r\n                <div id=\"comment-textarea\" mt-3 bg-white rounded-md py-4 px-6 lt-md=\"hidden\">\r\n                  <layout-comment-textarea :article-id=\"detail?.id\" />\r\n                </div>\r\n                <div mt-3 bg-white rounded-md py-4 px-6 lt-md=\"hidden\">\r\n                  <layout-comment-list\r\n                    :comment-count=\"detail?.commentCount || 0\"\r\n                    :param=\"{ articleId: detail?.id, level: 1 }\"\r\n                  />\r\n                </div>\r\n              </ClientOnly>\r\n            </div>\r\n            <!-- pc 推荐 -->\r\n            <div v-if=\"!isMobileOrTablet\" lg=\"w-80 ml-3\">\r\n              <h1 class=\"text-5 mb-1.5 font-bold\">\r\n                相关推荐\r\n              </h1>\r\n              <div>\r\n                <layout-article-left-item v-for=\"v in data\" :key=\"v\" :article=\"v\" mb-2 last:mb-0 />\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <template v-else-if=\"status === LOAD_STATUS.NULL\">\r\n            <base-empty bg-white rounded-md py-4 px-3 md=\"px-8\" text=\"未找到相关视频\" />\r\n          </template>\r\n          <div v-else-if=\"status === LOAD_STATUS.LOADING\" class=\"bg-white rounded-md py-4 px-3 md:px-8 font-bold text-center pt-20\">\r\n            <span>数据加载中...</span>\r\n          </div>\r\n          <div v-else class=\" bg-white rounded-md py-4 px-3 md:px-8\">\r\n            <base-empty text=\"数据加载失败,请稍后重试\" />\r\n            <button class=\"text-4 px-lg py-2 rounded-md bg-blue-5 text-white mt-5 block m-auto\" @click=\"initHandler\">\r\n              重新加载\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <ClientOnly v-if=\"detail !== null && status === LOAD_STATUS.END\">\r\n        <layout-article-jump :style=\"style\" :tips=\"tips\" />\r\n        <div v-if=\"!isMobileOrTablet\" lt-md=\"hidden\" lt-xl=\"fixed left-0 bottom-10\" xl=\"absolute -left-23 top-3\" class=\"z-99 \">\r\n          <!-- 左侧浮钉 -->\r\n          <utils-affix-pc\r\n            :article-id=\"detail.id\"\r\n            :is-favor=\"false\"\r\n            :favor-count=\"10\"\r\n            :is-star=\"detail.collect\"\r\n            :comment-count=\"detail.commentCount\"\r\n            :share-base=\"shareBase\"\r\n            @commentClick=\"commentClick\"\r\n            @starHandle=\"starHandle\"\r\n          />\r\n        </div>\r\n        <div v-else md=\"hidden\">\r\n          <!-- TODO: 点赞 -->\r\n          <layout-tabbar-detail\r\n            :article-id=\"detail.id\"\r\n            :is-favor=\"false\"\r\n            :favor-count=\"10\"\r\n            :is-star=\"detail.collect\"\r\n            :comment-count=\"detail.commentCount\"\r\n            :param=\"{ articleId: detail.id, level: 1 }\"\r\n            :on-comment-click-handle=\"commentClickHandle\"\r\n            @starHandle=\"starHandle\"\r\n          />\r\n        </div>\r\n      </ClientOnly>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style lang=\"scss\">\r\n@import \"~~/src/components/page/news/article-detail/styles/video.scss\";\r\n@import \"~~/src/components/page/news/article-detail/styles/status.scss\";\r\n</style>\r\n"],"names":["route","useRoute","currentArticle","storeToRefs","useDailyStore","isMobileOrTablet","useDevice","isAuthor","status","detail","detailType","siteMeta","media","shareBase","commentClick","init","starHandle","mediaRecommendAttentionStatusChange","detailComponentRef","commentClickHandle","useArticleDetailPage","ARTICLE_TYPE","active","carTestDriveRef","recommendRef","commentRef","itemsContainerRef","itemsTabsRef","changeActive","useVideoDetailMobileOrTabletComponent","list","getArticleList","LogicArticleList","data","computed","v","_a","isClient","provide","unref","SYMBOL_CONTENT_DETAIL","SYMBOL_SHARE_BASE","SYMBOL_SHARE_MEDIA","initHandler","promises","useShare","error","recordError","showDialogError","__temp","__restore","_withAsyncContext","targetRef","containerRef","style","tips","useJump"],"mappings":"szJAUA,MAAAA,EAAAC,KACA,CAAA,eAAAC,CAAA,EAAAC,GAAAC,GAAA,CAAA,EAEA,CAAA,iBAAAC,GAAAC,KACA,CAAM,SAAAC,EAEJ,OAAAC,EACA,OAAAC,EACA,WAAAC,EACA,SAAAC,GACA,MAAAC,GACA,UAAAC,EACA,aAAAC,GAEA,WAAAC,GACY,WAAAC,EACZ,oCAAAC,GAEA,mBAAAC,GAEA,mBAAAC,EACA,EAAAC,GAAAC,EAAA,KAAA,EAGF,CAAM,OAAAC,EACJ,gBAAAC,GACA,aAAAC,GACA,WAAAC,GACA,kBAAAC,EACA,aAAAC,GACA,aAAAC,CACA,EAAAC,GAAA,EAEF,CAAA,KAAAC,GAAA,cAAAC,IAAAC,GAAA,CAAA,QAAA,EAAA,SAAA,EAAA,CAAA,EACAC,EAAAC,GAAA,IAAAJ,GAAA,MAAA,OAAAK,GAAA,OAAA,OAAAA,GAAA,YAAAA,EAAA,KAAAA,EAAA,OAAAC,EAAA3B,EAAA,QAAA,YAAA2B,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,CAAA,EAEAC,IACEC,EAAAC,EAAAC,IAAA,EAAA/B,CAAA,EACA6B,EAAAC,EAAAE,IAAA,EAAA5B,CAAA,EACAyB,EAAAC,EAAAG,IAAA,EAAA9B,EAAA,GAGF,eAAA+B,GAAA,CACE,GAAA,CACE,MAAAC,EAAA,CAAiB7B,GAAA,EACVgB,GAAA,CACU,EAEjB,MAAA,QAAA,IAAAa,CAAA,EACAP,IACExB,EAAA,OAAAgC,GAAAhC,EAAA,KAAA,EACAJ,EAAA,QACEP,EAAA,MAAA,CAAuB,GAAAO,EAAA,MAAA,kBAAA,EACa,SAAAT,EAAA,MAAA,SAAA,MACD,GAGvC,OAAA8C,EAAA,CAGAC,GAAAD,CAAA,EACAE,GAAAF,CAAA,CAAqB,CACvB,CAGF,CAAAG,EAAAC,CAAA,EAAAC,GAAA,IAAAR,EAAA,CAAA,EAAA,MAAAM,EAAAC,IACA,KAAA,CAAA,UAAAE,GAAA,aAAAC,GAAA,MAAAC,GAAA,KAAAC,EAAA,EAAAC,KAAApB,EAAA3B,EAAA,QAAA,YAAA2B,EAAA,KAAA,EAAA"}