<script setup>
import LiveCover from './LiveCover.vue'
import { useLiveChat } from '../composables/useLiveChat'

const detail = inject('detail')
const record = inject('record')
const { messages, viewers, stats, currentTime } = useLiveChat({
  defaultMessages: record.value.live_info.messages,
})

const userName = computed(() => {
  const user = detail.value?.current_user || {}
  return user.real_name || user.nickname || user.username
})

const video = ref(null)
const playing = ref(false)
const duration = ref(0)
const loading = ref(true) // 新增的 loading 状态
const hover = ref(false)

onMounted(() => {
  video.value.ondurationchange = (e) => {
    if (e.target.duration === Infinity) {
      video.value.currentTime = 1e101
    } else {
      video.value.currentTime = 0
    }
    duration.value = e.target.duration === Infinity ? parseFloat(record.value.live_duration) : e.target.duration
  }
  video.value.ontimeupdate = () => {
    currentTime.value = video.value.currentTime
  }
  video.value.onplay = () => {
    playing.value = true
  }
  video.value.onpause = () => {
    playing.value = false
  }
  video.value.onended = () => {
    playing.value = false
  }
  video.value.onwaiting = () => {
    loading.value = true
  }
  video.value.oncanplay = () => {
    loading.value = false
  }
})

const togglePlay = () => {
  playing.value ? video.value?.pause() : video.value?.play()
}

const handleInput = (value) => {
  video.value.currentTime = value
}
</script>

<template>
  <div class="live">
    <div class="live-hd">
      <p>主播：{{ userName }}</p>
    </div>
    <div class="live-bd">
      <!-- 显示加载状态 -->
      <div class="loading-overlay" v-if="loading">
        <div class="spinner"></div>
      </div>
      <video :src="record.live_video_addres" preload="metadata" ref="video"></video>
      <LiveCover
        :messages="messages"
        :stats="stats"
        :viewers="viewers"
        @mouseover="hover = true"
        @mouseleave="hover = false">
        <div class="live-play-button" @click="togglePlay" v-show="hover || !playing">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="32"
            height="32"
            fill="none"
            viewBox="0 0 32 32"
            v-if="!playing">
            <g clip-path="url(#play-fill_svg__a)">
              <path
                fill="#fff"
                fill-rule="evenodd"
                d="M7.388 2.88 26.054 14.88a1.333 1.333 0 0 1 0 2.243L7.388 29.12a1.333 1.333 0 0 1-2.055-1.122V4.002a1.333 1.333 0 0 1 2.055-1.121"
                clip-rule="evenodd"></path>
            </g>
            <defs>
              <clipPath id="play-fill_svg__a"><path fill="#fff" d="M0 0h32v32H0z"></path></clipPath>
            </defs>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32" v-else>
            <g clip-path="url(#pause-circle-fill_svg__a)">
              <path
                fill="#fff"
                fill-rule="evenodd"
                d="M11 3c1.104 0 2 .582 2 1.3v23.4c0 .718-.896 1.3-2 1.3H7c-1.105 0-2-.582-2-1.3V4.3C5 3.582 5.895 3 7 3zm14 0c1.104 0 2 .582 2 1.3v23.4c0 .718-.896 1.3-2 1.3h-4c-1.105 0-2-.582-2-1.3V4.3c0-.718.895-1.3 2-1.3z"
                clip-rule="evenodd"></path>
            </g>
            <defs>
              <clipPath id="pause-circle-fill_svg__a"><path fill="#fff" d="M0 0h32v32H0z"></path></clipPath>
            </defs>
          </svg>
        </div>
        <div class="live-slider" v-show="hover">
          <el-slider
            v-model="currentTime"
            :step="0.1"
            :max="duration"
            size="small"
            :show-tooltip="false"
            @input="handleInput" />
        </div>
      </LiveCover>
    </div>
  </div>
</template>

<style lang="scss">
.live {
  width: 375px;

  &-hd {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .live-icon {
      height: 20px;
    }
  }

  &-bd {
    position: relative;
    height: 667px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #000;
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &-ft {
    margin-top: 10px;
    text-align: center;
  }
}
.live-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #00000033;
  border-radius: 1000px;
  cursor: pointer;
  height: 64px;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}
.live-slider {
  position: absolute;
  bottom: 5px;
  left: 10px;
  right: 10px;
  z-index: 100000;
}
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10;

  .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid transparent;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
</style>
