<template>
  <div class="hotspot-page">
    <div v-if="!isTextType" class="hotspot-page-container">
      <!-- 音频播放器 -->
      <audio
        id="myAudio"
        v-if="audio"
        ref="volumeRef"
        v-show="isOneAduio"
        :src="audio"
        controls
      ></audio>

      <!-- 模型页面 -->
      <Swiper
        :modules="modules"
        class="hotspot-page-swiper"
        :slides-per-view="myType === 'model' || isMobile ? 1 : 3"
        :centered-slides="true"
        :navigation="Boolean(curList.length) && !isMobile"
        :pagination="
          isMobile
            ? false
            : {
                clickable: true,
              }
        "
        @swiper="initSwiper"
        @slideChange="handleChange"
      >
        <SwiperSlide v-for="(item, index) in curList" :key="item.url">
          <template v-if="myType === 'model'">
            <iframe v-if="index === myInd" :src="item" frameborder="0" />
          </template>
          <template v-else-if="myType === 'video'">
            <video controls :src="item.url" />
          </template>
          <template v-else-if="myType === 'img'">
            <el-image :src="item" fit="contain" @click="handlePreview(index)" />
          </template>
        </SwiperSlide>
      </Swiper>
    </div>

    <!-- 底部的tab -->
    <ul v-if="flooTab.length > 1" class="hotspot-page-nav">
      <!-- 音频图标 -->
      <li
        v-if="audio && !isOneAduio"
        :class="[
          'hotspot-page-nav__item',
          {
            active: audioSta,
          },
        ]"
        @click="audioSta = !audioSta"
      >
        <img :src="VolumeOn" :alt="audioSta ? '关闭音频' : '打开音频'" />
        <span>音频</span>
      </li>
      <li
        v-for="item in flooTab"
        :key="item.id"
        :class="[
          'hotspot-page-nav__item',
          {
            active: myType === item.type,
          },
        ]"
        @click="handleTab(item)"
      >
        <img :class="`${item.type}-icon`" :src="item.icon" />
        <span>{{ item.name }}</span>
      </li>
    </ul>

    <div
      v-if="isMobile ? isTextType : true"
      class="hotspot-page-scrollbar"
      :class="{ isTop: !flooTab.length && !isMobile }"
    >
      <h3>{{ myTitle }}</h3>
      <p>{{ myTxt }}</p>
    </div>
  </div>
</template>

<script>
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import { Navigation, Pagination } from 'swiper/modules';
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';

  import { parseUrlParams, judgeIsMobile } from '@/utils';

  import ModelIcon from '@hotspot/assets/images/model-icon.png';
  import ImageIcon from '@hotspot/assets/images/img-icon.png';
  import VideoIcon from '@hotspot/assets/images/video-icon.png';
  import VolumeOn from '@hotspot/assets/images/audio-icon.png';
  import infoIcon from '@hotspot/assets/images/info-icon.png';

  const urlParams = parseUrlParams(window.location.href);
  const isMobile = judgeIsMobile();

  export default {
    name: 'hotspot',
    components: {
      Swiper,
      SwiperSlide,
    },
    data() {
      return {
        isMobile,
        VolumeOn,
        m: urlParams.m,
        id: urlParams.id,
        // 音频地址
        audio: '',
        // 如果只有单独的音频
        isOneAduio: false,
        // 音频状态
        audioSta: false,

        data: {
          // 模型数组
          model: [],
          // 视频数组
          video: [],
          // 图片数组
          img: [],
        },
        // 当前 type
        myType: '',

        // 当前索引
        myInd: 0,

        // 底部的tab
        flooTab: [],

        // 标题
        myTitle: '',
        // 内容
        myTxt: '',
        // 视频内容
        videoTxt: [],
        imgTxt: [],

        // 只有标题和文字（没有视频，没有模型，没有图片）
        oneTxt: false,

        modules: [Navigation, Pagination],
      };
    },
    computed: {
      curList() {
        return this.data[this.myType] || [];
      },
      isTextType() {
        return this.myType === 'text';
      },
    },
    watch: {
      audioSta(val) {
        if (val) {
          this.$refs.volumeRef.play();
          this.$refs.volumeRef.onended = () => {
            // console.log("----音频播放完毕");
            this.audioSta = false;
          };
        } else this.$refs.volumeRef.pause();
      },
    },
    mounted() {
      this.getData();
    },
    methods: {
      async getData() {
        // https://www.4dmodel.com/
        let url = `https://super.4dage.com/data/${this.id}/hot/js/data.js?time=${Math.random()}`;
        let result = await fetch(url).then((response) => response.json());
        const resData = result[this.m];
        console.log('----', resData);
        if (resData) {
          this.audio = resData.backgroundMusic;
          // 只有单独的音频上传
          if (resData.backgroundMusic && !resData.model && !resData.video && !resData.images) {
            this.isOneAduio = true;
          }
          // 底部的tab
          const arr = [];
          const obj = {};
          if (resData.images) {
            obj.img = resData.images;
            arr.push({ id: 3, type: 'img', name: '图片', icon: ImageIcon });
          }
          if (resData.video) {
            obj.video = resData.video;
            arr.push({ id: 2, type: 'video', name: '视频', icon: VideoIcon });
          } else {
            this.$nextTick(() => {
              if (
                !window.navigator.userAgent.match(
                  /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
                )
              ) {
                this.audioSta = true;
                this.$refs.volumeRef.play();
              }
            });
          }
          if (resData.model) {
            obj.model = resData.model;
            arr.push({ id: 1, type: 'model', name: '模型', icon: ModelIcon });
          }
          if (isMobile) {
            arr.push({ id: 4, type: 'text', name: '介绍', icon: infoIcon });
          }

          this.flooTab = arr;
          this.data = obj;

          // 当前type的值 应该为
          if (resData.images) this.myType = 'img';
          else if (resData.model) this.myType = 'model';
          else if (resData.video) this.myType = 'video';
          else this.myType = 'text';

          this.myTitle = resData.title || '';
          this.myTxt = resData.content || '';
          this.videoTxt = resData.videosDesc || [];
          this.imgTxt = resData.imagesDesc || [];

          // 只有 标题和 文字介绍（没有视频，没有模型，没有图片）
          if (!obj.model && !obj.video && !obj.img && !resData.backgroundMusic) {
            this.oneTxt = true;
          }
        }
      },

      handleTab(item) {
        this.myInd = 0;
        this.myType = item.type;
      },

      initSwiper(swiper) {
        this.swiper = swiper;
      },
      handleChange({ activeIndex }) {
        this.myInd = activeIndex;
      },

      handlePreview(idx) {
        this.$viewerApi({
          images: [this.curList[idx]],
        });
      },
    },
  };
</script>

<style lang="scss">
  @use './index.scss';

  .viewer-button.viewer-close {
    display: none;
  }
</style>
