<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 { 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

  console.log(dynamicDetail.value)
}

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')
    })

    //  音频链接
    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.file.filter((item: any) => {
      return  item.type === 'model'
    })[0]

    initShowState()
  } else {
    showToast(res.msg)
  }
}

onBeforeMount(async () => {
  getDetailById()

  // dynamicDetail.value = {
  //   age: '唐朝',
  //   createTime: '2024-04-19 09:03:01',
  //   creatorId: 1,
  //   creatorName: '',
  //   description: '故明威将军大河卫指挥佥事许公墓志拓片故明威将军大河卫指挥佥事许公墓志拓片',
  //   dirCode: '',
  //   fileIds: '',
  //   fileTypes: '',
  //   id: 2,
  //   name: '故明威将军大河卫指挥佥事许公墓志拓片',
  //   publishDate: '2024-04-18',
  //   size: '志盖边长 40.5 厘米、厚 8.5 厘米、志石边长 41 厘米、厚 9.5 厘米',
  //   texture: '草',
  //   thumb:
  //     'https://k.sinaimg.cn/n/spider20230919/11/w499h312/20230919/77f0-2a03ee3faecf423cf77b2a2a119a714e.png/w700d1q75cms.jpg?by=cms_fixed_width',
  //   type: '其他',
  //   updateTime: '2024-04-19 09:03:01',
  //   files: {
  //     images: ['https://super.4dage.com/data/TEST/edit/20230407_114029890.jpg', 'https://super.4dage.com/data/TEST/edit/20230524_155459428.png'],
  //     moduleUrl: 'https://4dscene.4dage.com/culturalrelics/demo2/Model.html?m=HG01',
  //     audio: 'https://houseoss.4dkankan.com/project/bjfljtl/audio/bgMusic.mp3',
  //     // 可能是单个可能是多个
  //     videos: ['https://super.4dage.com/data/TEST/edit/20230228_161113155.mp4'],
  //   }
  // }

  // 初始化显示状态
  // initShowState()

})
</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 v-if="curState === 'images'" :src="curMediaList[curMediaIndex]" alt="">
      <video v-if="curState === 'videos'" :src="curMediaList[curMediaIndex]" controls></video>
      <iframe v-if="curState === 'module'" :src="curMediaList[curMediaIndex]" 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">
      <div class="title">{{ dynamicDetail.name }}</div>
      <!-- <div class="age">{{ dynamicDetail.age + '·' + dynamicDetail.texture }}</div> -->
      <div class="age">
        <div style="margin-right: 20px;">朝代：{{ dynamicDetail.age }}</div>
        <div>质地：{{ dynamicDetail.texture }}</div>

      </div>

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

    <audio id="audioBg" :src="audioBgUrl" 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;

  .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%;
    }

    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>