<template>
  <div class="panel" :class="{show}">
    <span class="icon" @click="playing ? pause() : play()" v-if="existsGuide">
      <Icon type="play" />
    </span>
    <span class="icon" @click="showScenes = !showScenes">
      <Icon type="scene" />
    </span>
    <span class="ctrl" :class="{ show }" @click="show = !show">
      <Icon type="arrows@2x" />
    </span>
  </div>
  <SceneList 
    v-if="showScenes" 
    @close="showScenes = false" 
    @changeScene="changeScene"
  />
</template>

<script setup>
import SceneList from './scene-list.vue'
//import { useMusicPlayer } from "@/utils/sound";
import { changeScene } from '@/store/room'
import Icon from '@/components/icon/index.vue'
import { ref, onUnmounted } from 'vue'
import { getApp } from '@/app'

const show = ref(false)
const app = getApp()
const playing = ref(false)
const existsGuide = ref(false)
const showScenes = ref(false)

app.use('TourPlayer').then(player => {
  console.log('===>', player)
  player.on('play', ({ partId, frameId }) => (playing.value = true))
  player.on('pause', ({ partId, frameId }) => (playing.value = false))
  player.on('end', () => {
    playing.value = false
  })
})

// 需要双向绑定时，重新设置数据
app.TourManager.on('loaded', tours => {
  existsGuide.value = !!tours.length
})

const play = async () => {
  const player = await app.TourManager.player
  player.play()
}

const pause = async () => {
  const player = await app.TourManager.player
  player.pause()
}

// const timeout = setTimeout(() => {
//   const a = useMusicPlayer()

// }, 2000)

// onUnmounted(() => clearTimeout(timeout))


</script>

<style lang="scss" scoped>
.panel {
  position: fixed;
  top: calc(100% - 90px);
  left: 0;
  z-index: 22;
  height: 44px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0px 24px 24px 0px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding-right: 30px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  // width: 110px;
  transform: translateX(calc(-100% + 30px));


  &.show {
    transform: translateX(0);
  }

  > .icon {
    margin: 0 10px;
  }
}

.icon {
  font-size: 24px;
  height: 1em;
  color: #fff;

  &.active {
    color: #ED5D18;
  }
}

.ctrl {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotateZ(180deg);
  font-size: 12px;

  &.show {
    transform: translateY(-50%);
  }
}
</style>
