<script setup lang='ts'>
import playIcon from '@/assets/images/play.png';
import pauseIcon from '@/assets/images/pause.png';


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

const router = useRouter()
// const route = useRoute()


export type TreasureDetailType = {
  id: number,
  title: string,
  type: string,
  era: string,
  character: string,
  info: string,
  size: string,
  themb: string,
  files: {
    images: string[],
    moduleUrl: string,
    audio: string,
    // 可能是单个可能是多个
    videos: string[],
  }
  releaseTime: 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()
  }
}

onBeforeMount(async () => {
  // 获取活动详情
  // const res: any = await DynamicApi.getDetailById(Number(route.params.id))
  // if (res.code == 0) {
  //   dynamicDetail.value = res.data

  // } else {
  //   showToast('活动信息获取失败')
  // }

  dynamicDetail.value = {
    id: 0,
    title: '《瓜洲马头新建石堤记》碑拓片',
    type: '全部',
    era: '朝代',
    character: '质地',
    info: '<p>八骏马图周器垒</p><p>      创造者、设计者：戴嘉林   高：38.8cm 口：12.1cm 足：14cm</p><p>      2017年11月8日，国家主席习近平和夫人彭丽媛陪同来华进行国事访问的美国总统特朗普和夫人梅拉尼娅一同参观故宫。宾主来到畅音阁，沿途欣赏了景泰蓝工艺精品和制作技艺展示，并尝试为景泰蓝《八骏马周器垒》，《国色天香》瓶点蓝，领略中华文化。</p><p></p>',
    size: '志盖边长 40.5 厘米、厚 8.5 厘米、志石边长 41 厘米、厚 9.5 厘米',
    themb: 'https://n.sinaimg.cn/sinakd20112/0/w2048h1152/20220428/03e8-399a8decd0e38baf901f375ef9a4c050.jpg',
    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'],
    },
    releaseTime: '2023-12-27'
  }

  // 初始化显示状态
  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
})
</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.title }}</div>
      <!-- <div class="era">{{ dynamicDetail.era + '·' + dynamicDetail.character }}</div> -->
      <div class="era">
        <div style="margin-right: 20px;">朝代：{{ dynamicDetail.era }}</div>
        <div>质地：{{ dynamicDetail.character }}</div>

      </div>

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

    <audio id="audioBg" :src="audioBgUrl" style="display: none;"></audio>
    <img v-if="audioBgUrl != null" 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%;

  .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: space-between;
      align-items: center;

      div {
        height: 25px;
        padding: 0 20px;
        box-sizing: border-box;
        line-height: 25px;
        border-radius: 15px;
        background: #9F8E8E;
        color: #5B4848;
        font-size: 0.8em;

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

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