<script setup lang="ts">
import playIcon from '@/assets/images/play.png'
import pauseIcon from '@/assets/images/pause.png'
import { showToast } from 'vant'
import { TreasureApi } from '@/api/api/treasure'
import { baseIMGUrl } from '@/api/request.ts'

import { showImagePreview } from 'vant'

// import { DynamicApi } from "@/api/api/dynamic/index";
// import { showToast } from "vant";

const route = useRoute()

export type TreasureDetailType = {
  age: string
  createTime: string
  creatorId: number
  creatorName: string
  description: string
  dirCode: string
  fileIds: string
  fileTypes: string
  id: number
  name: string
  publishDate: string
  size: string
  texture: string
  thumb: string
  type: string
  updateTime: string
  files: {
    images: string[]
    moduleUrl: string
    audio: string
    // 可能是单个可能是多个
    videos: string[]
  }
}

const dynamicDetail = ref({} as TreasureDetailType)

const audioPlaying = ref(null as any)
const audioBgUrl = ref(null as any)

// 当前显示什么状态的多媒体  module videos images
const curState = ref(null as any)

// 当前显示的多媒体的列表内容
const curMediaList = ref(null as any)

// 当前列表的索引
const curMediaIndex = ref(0)

const initModule = () => {
  curState.value = 'module'
  curMediaList.value = [dynamicDetail.value.files.moduleUrl]
  curMediaIndex.value = 0
}

const initImages = () => {
  curState.value = 'images'
  curMediaList.value = dynamicDetail.value.files.images
  curMediaIndex.value = 0
}

const initVideos = () => {
  curState.value = 'videos'
  curMediaList.value = dynamicDetail.value.files.videos
  curMediaIndex.value = 0
}

const audioChange = () => {
  audioPlaying.value = !audioPlaying.value
  const audioDom: any = document.getElementById('audioBg')
  if (audioPlaying.value) {
    audioDom.play()
  } else {
    audioDom.pause()
  }
}

const initShowState = () => {
  if (dynamicDetail.value.files.moduleUrl) {
    initModule()
  } else if (dynamicDetail.value.files.images.length > 0) {
    initImages()
  } else if (dynamicDetail.value.files.videos.length > 0) {
    initVideos()
  }
  audioBgUrl.value = dynamicDetail.value.files.audio
}

const getDetailById = async () => {
  const res: any = await TreasureApi.getDetailById(Number(route.params.id))
  if (res.code == 0) {
    dynamicDetail.value = res.data.entity

    dynamicDetail.value.files = {
      images: [],
      moduleUrl: '',
      audio: '',
      // 可能是单个可能是多个
      videos: []
    }

    // 视频集合
    dynamicDetail.value.files.videos = res.data.file.filter((item: any) => {
      return item.filePath.includes('.mp4')
    })
    // 图片集合
    dynamicDetail.value.files.images = res.data.file.filter((item: any) => {
      return (
        item.filePath.includes('.png') ||
        item.filePath.includes('.jpg') ||
        item.filePath.includes('.jpeg') ||
        item.filePath.includes('.gif')
      )
    })

    //  音频链接
    dynamicDetail.value.files.audio = res.data.file.filter((item: any) => {
      return item.filePath.includes('.mp3') || item.type === 'audio'
    })[0]

    //  模型链接
    dynamicDetail.value.files.moduleUrl = res.data.entity.modelLink

    console.log('模型链接是', res.data.entity.modelLink, dynamicDetail.value.files.moduleUrl)

    initShowState()

    console.log(dynamicDetail.value.files)
  } else {
    showToast(res.msg)
  }
}

getDetailById()
</script>

<template>
  <div class="detail-box">
    <div class="media-box" v-if="curState != null">
      <img
        @click="
          () => {
            curMediaIndex--
          }
        "
        v-show="curMediaIndex != 0 && curMediaList.length > 1"
        class="left-icon"
        src="@/assets/images/left.png"
        alt=""
      />
      <img
        @click="
          () => {
            curMediaIndex++
          }
        "
        v-show="curMediaIndex != curMediaList.length - 1"
        class="left-icon right-icon"
        src="@/assets/images/right.png"
        alt=""
      />
      <img
        @click="
          showImagePreview({
            images: [baseIMGUrl + curMediaList[curMediaIndex].filePath],
            showIndex: false
          })
        "
        v-if="curState === 'images'"
        :src="baseIMGUrl + curMediaList[curMediaIndex].filePath"
        alt=""
      />
      <video
        v-if="curState === 'videos'"
        :src="baseIMGUrl + curMediaList[curMediaIndex].filePath"
        controls
      ></video>
      <iframe
        v-if="curState === 'module'"
        :src="dynamicDetail.files.moduleUrl"
        frameborder="0"
      ></iframe>

      <div class="option-box">
        <div
          v-if="dynamicDetail.files.moduleUrl"
          @click="initModule()"
          :class="{ active: curState === 'module' }"
        >
          模型
        </div>
        <div
          v-if="dynamicDetail.files.images.length != 0"
          @click="initImages()"
          :class="{ active: curState === 'images' }"
        >
          图片<span v-show="curState === 'images'">{{
            curMediaIndex + 1 + '/' + curMediaList.length
          }}</span>
        </div>
        <div
          v-if="dynamicDetail.files.videos.length != 0"
          @click="initVideos()"
          :class="{ active: curState === 'videos' }"
        >
          视频<span v-show="curState === 'videos'">{{
            curMediaIndex + 1 + '/' + curMediaList.length
          }}</span>
        </div>
      </div>
    </div>
    <div class="info-box" :style="{ marginTop: curState != null ? '' : '0px' }">
      <div class="title">{{ dynamicDetail.name }}</div>
      <!-- <div class="age">{{ dynamicDetail.age + '·' + dynamicDetail.texture }}</div> -->
      <div class="age">
        <div style="margin-right: 20px" v-if="dynamicDetail.age">朝代：{{ dynamicDetail.age }}</div>
        <div v-if="dynamicDetail.texture">质地：{{ dynamicDetail.texture }}</div>
      </div>

      <div class="size" v-if="dynamicDetail.size">尺寸： {{ dynamicDetail.size }}</div>
      <div class="info" v-if="dynamicDetail.description">{{ dynamicDetail.description }}</div>
    </div>

    <audio
      v-if="audioBgUrl"
      id="audioBg"
      :src="baseIMGUrl + audioBgUrl.filePath"
      style="display: none"
    ></audio>
    <img
      v-if="audioBgUrl"
      class="playing-icon"
      :src="audioPlaying ? pauseIcon : playIcon"
      alt=""
      @click="audioChange()"
    />
    <!-- <img class="back-icon" @click="() => { router.back() }" src="@/assets/images/back.png" alt=""> -->
  </div>
</template>

<style lang="less" scoped>
.detail-box {
  width: 100%;
  min-height: 100%;
  background: #f7f3e8;
  overflow: auto;

  .media-box {
    width: 100%;
    height: 35vh;
    position: relative;

    .left-icon {
      width: 25px;
      height: auto;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      object-fit: fill;
    }

    .right-icon {
      right: 0px;
      left: auto;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    iframe {
      width: 100%;
      height: 100%;
    }

    .option-box {
      width: 70%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 35px;
      display: flex;
      justify-content: center;
      align-items: center;

      div {
        height: 25px;
        padding: 0 15px;
        box-sizing: border-box;
        line-height: 25px;
        border-radius: 15px;
        background: #9f8e8e;
        color: #5b4848;
        font-size: 0.8em;
        margin: auto 2vw;

        span {
          margin-left: 5px;
          font-size: 0.8em;
          font-weight: 400;
        }
      }

      .active {
        background: #5b4848;
        color: #f7f3e8;
      }
    }
  }

  .info-box {
    background: #f7f3e8;
    width: 100%;
    height: calc(65vh + 20px);
    margin-top: -20px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    border-radius: 20px 20px 0 0;
    overflow: auto;

    .title {
      color: #333333;
      font-size: 1.2em;
      font-weight: bold;
      line-height: 1.5em;
      font-family: 'SourceHanSansCN-Medium';
      margin-bottom: 10px;
    }

    .age {
      line-height: 1.5em;
      color: #9d4f0b;
      font-size: 1em;
      font-family: 'SourceHanSansCN-Regular';
      display: flex;
      margin-bottom: 5px;
    }

    .size {
      line-height: 1.5em;
      color: #9d4f0b;
      font-size: 1em;
      font-family: 'SourceHanSansCN-Regular';
      margin-bottom: 10px;
    }

    .info {
      color: #88866f;
    }
  }

  .playing-icon {
    width: 40px;
    position: fixed;
    right: 15px;
    bottom: 3vh;
    z-index: 3;
  }

  // .back-icon {
  //   width: 40px;
  //   position: fixed;
  //   right: 10px;
  //   bottom: 10vh;
  // }
}
</style>
