{"version":3,"file":"Role.b686cb3f.js","sources":["../../../mcdofficial/src/hooks/roleHook.ts","../../../mcdofficial/src/components/role/MediaPlay.vue","../../../mcdofficial/src/components/section/Role.vue"],"sourcesContent":["import { ref } from 'vue';\nimport { useIntersectionObserver } from '@vueuse/core';\nimport { point } from \"@/utils/pointUtils\";\nimport { showYoutubeVideo } from './popupHook';\nimport websiteConfig from '@/configs/websiteConfig';\nconst list = websiteConfig.role.list\nconst langDiff = websiteConfig.role.langDiffs\nconst roleMenuName = list.map(item => item.name); // 板块目录\nconst roleSectionRef = ref(null);\nlet roleViewActive = false;\nuseIntersectionObserver(roleSectionRef, ([{ isIntersecting }]) => {\n  if (!roleViewActive && isIntersecting) {\n    roleViewActive = true;\n    point({\n      eventName: 'view_page',\n      eventType: '角色展示',\n    });\n  }\n});\nconst roleRef = ref(null);\nconst targetIsVisible = ref(false);\nconst { isSupported } = useIntersectionObserver(roleRef, ([{ isIntersecting }], observerElement) => {\n  targetIsVisible.value = isIntersecting;\n});\nexport default function () {\n  const audioState = ref(false);\n  const handleMedia = (detail) => {\n    let nowMediaType = detail.mediaType\n    point({\n      eventName: 'click_button',\n      eventType: '角色列表',\n      eventReason: '媒体播放-' + detail.name,\n    })\n    if (nowMediaType === 'video') {\n      showYoutubeVideo(detail.url)\n      return;\n    }\n    if (nowMediaType === 'audio') {\n      const audio = new Audio(detail.url);\n      if (audioState.value) {\n        audio.pause();\n        audio.currentTime = 0;\n        audioState.value = false;\n        return;\n      }\n      audio.play();\n      audioState.value = true;\n      audio.addEventListener(\"ended\", function() {\n        // 当音轨播放完毕时候做你想做的事情\n        audioState.value = false;\n      });\n    }\n  }\n  const outsideSwiperConfig = {\n    el: '.type-pagination',\n    clickable: true,\n    bulletClass: 'type-nav-item',\n    bulletActiveClass: 'active',\n    renderBullet: function (index, className) {\n      return `\n                <a href=\"javascript:void(0)\" class=\"${className}\" data-reason=\"role\" data-type=\"role-${roleMenuName[index]}\">\n                      <span class=\"text\">${roleMenuName[index]}</span>\n                </a>`;\n    },\n  };\n  const generateRolePagination = (detail) => {\n    const avatarArr = detail.map(item => item.avatar)\n    return {\n      el: '.avatar-pagination',\n      clickable: true,\n      bulletClass: 'avatar',\n      bulletActiveClass: 'active',\n      renderBullet: function (index, className) {\n        return `\n                <a href=\"javascript:void(0)\" class=\"${className}\" style=\"background-image: url(${avatarArr[index]})\" data-reason=\"roleDetail\" data-type=\"role-${index}\"></a>`;\n      },\n    }\n  }\n  return {\n    outsideSwiperConfig,\n    roleRef,\n    roleSectionRef,\n    targetIsVisible,\n    isSupported,\n    handleMedia,\n    audioState,\n    websiteConfig,\n    generateRolePagination,\n    langDiff\n  };\n}\n","<template>\n  <a href=\"javascript:void(0);\" class=\"voice\" @click=\"handleMedia(detail)\" v-if=\"detail.mediaType\">\n    <span class=\"icon\" :class=\"{ active: audioState }\"></span>\n    <span class=\"text\">{{ detail.mediaType === 'video' ? '视频播放' : detail.cv }}</span>\n  </a>\n</template>\n\n<script lang=\"ts\" setup>\nimport roleHook from '@/hooks/roleHook';\nconst props = defineProps({\n  detail: {\n    type: Object,\n    default: () => {\n      return {\n        mediaType: '',\n      }\n    }\n  },\n});\nconst { handleMedia, audioState } = roleHook();\n</script>\n","<template>\n  <div class=\"sectionRole\" id=\"role\" ref=\"roleSectionRef\">\n    <div class=\"header\">\n      <p class=\"big\">{{  langDiff ? $t(websiteConfig.role.mainTitle) : websiteConfig.role.mainTitle }}</p>\n      <p class=\"small\" v-if=\"websiteConfig.role.subTitle\" >{{langDiff ? $t(websiteConfig.role.subTitle) : websiteConfig.role.subTitle }}</p>\n    </div>\n    <Swiper\n      class=\"outside-container\"\n      :class=\"websiteConfig.role.swiperType || 'normal'\"\n      :pagination=\"outsideSwiperConfig\"\n      :noSwiping=\"true\"\n      ref=\"roleRef\"\n    >\n      <div class=\"type-pagination\" v-if=\"websiteConfig.role.list.length > 1\" @click=\"clickBtnUpload\"></div>\n      <SwiperSlide\n        v-for=\"(item, moduleIndex) in websiteConfig.role.list\"\n        :key=\"moduleIndex\"\n        class=\"swiper-no-swiping\"\n      >\n        <Swiper\n          class=\"inside-container\"\n          :noSwiping=\"false\"\n          :pagination=\"generateRolePagination(item.roleInfo)\"\n          :loop=\"true\"\n          :threshold=\"10\"\n        >\n          <div class=\"avatar-pagination\" @click=\"clickBtnUpload\"></div>\n          <swiper-slide v-for=\"(role, roleIndex) in item.roleInfo\" :key=\"roleIndex\">\n            <div\n              class=\"char rotate\"\n              :style=\"{ 'background-image': `url(${role.pic})` }\"\n              :class=\"[{ active: !isSupported || targetIsVisible }, websiteConfig.role.swiperType || 'normal']\"\n            ></div>\n            <div class=\"char-text\">\n              <p class=\"name\">{{ langDiff ? $t(role.name) : role.name }}</p>\n              <div class=\"split\"></div>\n              <p class=\"desc\">{{ langDiff ? $t(role.desc) :  role.desc }}</p>\n              <div class=\"skill-wrap\">\n                <div class=\"skill-item\" v-for=\"(skill, skillIndex) in role.skill\" :key=\"skillIndex\">\n                  <div class=\"skill-pic\" :style=\"{ 'background-image': `url(${skill.pic})` }\"></div>\n                  <p class=\"skill-text\">{{langDiff ? $t(skill.name) : skill.name }}</p>\n                </div>\n              </div>\n            </div>\n            <MediaPlay :detail=\"role\"></MediaPlay>\n          </swiper-slide>\n        </Swiper>\n      </SwiperSlide>\n    </Swiper>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport roleHook from '@/hooks/roleHook';\nimport { Swiper, SwiperSlide } from 'swiper/vue';\nimport MediaPlay from '@/components/role/MediaPlay.vue';\nimport { clickBtnUpload } from '@/utils/pointUtils';\nimport SwiperCore, { Pagination } from 'swiper';\nconst {\n  outsideSwiperConfig,\n  roleRef,\n  roleSectionRef,\n  targetIsVisible,\n  isSupported,\n  websiteConfig,\n  langDiff,\n  generateRolePagination\n} = roleHook();\nSwiperCore.use([Pagination]);\n</script>\n"],"names":["list","websiteConfig","langDiff","roleMenuName","item","roleSectionRef","ref","roleViewActive","useIntersectionObserver","isIntersecting","point","roleRef","targetIsVisible","isSupported","observerElement","roleHook","audioState","index","className","detail","nowMediaType","showYoutubeVideo","audio","avatarArr","handleMedia","outsideSwiperConfig","generateRolePagination","SwiperCore","Pagination"],"mappings":"4OAKA,MAAMA,EAAOC,EAAc,KAAK,KAC1BC,EAAWD,EAAc,KAAK,UAC9BE,EAAeH,EAAK,IAAII,GAAQA,EAAK,IAAI,EACzCC,EAAiBC,EAAI,IAAI,EAC/B,IAAIC,EAAiB,GACrBC,EAAwBH,EAAgB,CAAC,CAAC,CAAE,eAAAI,CAAgB,CAAA,IAAM,CAC5D,CAACF,GAAkBE,IACJF,EAAA,GACXG,EAAA,CACJ,UAAW,YACX,UAAW,0BAAA,CACZ,EAEL,CAAC,EACD,MAAMC,EAAUL,EAAI,IAAI,EAClBM,EAAkBN,EAAI,EAAK,EAC3B,CAAE,YAAAO,CAAY,EAAIL,EAAwBG,EAAS,CAAC,CAAC,CAAE,eAAAF,CAAA,CAAgB,EAAGK,IAAoB,CAClGF,EAAgB,MAAQH,CAC1B,CAAC,EAC0B,SAAAM,GAAA,CACnB,MAAAC,EAAaV,EAAI,EAAK,EAqDrB,MAAA,CACL,oBA1B0B,CAC1B,GAAI,mBACJ,UAAW,GACX,YAAa,gBACb,kBAAmB,SACnB,aAAc,SAAUW,EAAOC,EAAW,CACjC,MAAA;AAAA,sDACyCA,yCAAiDf,EAAac;AAAA,2CACzEd,EAAac;AAAA,qBAEpD,CAAA,EAiBA,QAAAN,EACA,eAAAN,EACA,gBAAAO,EACA,YAAAC,EACA,YA1DmBM,GAAW,CAC9B,IAAIC,EAAeD,EAAO,UAM1B,GALMT,EAAA,CACJ,UAAW,eACX,UAAW,2BACX,YAAa,4BAAUS,EAAO,IAAA,CAC/B,EACGC,IAAiB,QAAS,CAC5BC,EAAiBF,EAAO,GAAG,EAC3B,MACF,CACA,GAAIC,IAAiB,QAAS,CAC5B,MAAME,EAAQ,IAAI,MAAMH,EAAO,GAAG,EAClC,GAAIH,EAAW,MAAO,CACpBM,EAAM,MAAM,EACZA,EAAM,YAAc,EACpBN,EAAW,MAAQ,GACnB,MACF,CACAM,EAAM,KAAK,EACXN,EAAW,MAAQ,GACbM,EAAA,iBAAiB,QAAS,UAAW,CAEzCN,EAAW,MAAQ,EAAA,CACpB,CACH,CAAA,EAkCA,WAAAA,EACA,cAAAf,EACA,uBAtB8BkB,GAAW,CACzC,MAAMI,EAAYJ,EAAO,IAAIf,GAAQA,EAAK,MAAM,EACzC,MAAA,CACL,GAAI,qBACJ,UAAW,GACX,YAAa,SACb,kBAAmB,SACnB,aAAc,SAAUa,EAAOC,EAAW,CACjC,MAAA;AAAA,sDACuCA,mCAA2CK,EAAUN,iDAAqDA,SAC1J,CAAA,CACF,EAYA,SAAAf,CAAA,CAEJ,mHCvEA,KAAM,CAAE,YAAAsB,EAAa,WAAAR,CAAW,EAAID,EAAS,qgBCuCvC,KAAA,CACJ,oBAAAU,EACA,QAAAd,EACA,eAAAN,EACA,gBAAAO,EACA,YAAAC,EACA,cAAAZ,EACA,SAAAC,EACA,uBAAAwB,GACEX,EAAS,EACFY,OAAAA,EAAA,IAAI,CAACC,CAAU,CAAC"}