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

onMounted(() => {
  video.value.ontimeupdate = () => {
    currentTime.value = Math.floor(video.value?.currentTime) || 0
  }
  video.value.onplay = () => {
    playing.value = true
  }
  video.value.onpause = () => {
    playing.value = false
  }
  video.value.onended = () => {
    playing.value = false
  }
})

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

<template>
  <div class="live">
    <div class="live-hd">
      <p>主播：{{ userName }}</p>
    </div>
    <div class="live-bd">
      <video :src="record.live_video_addres" ref="video"></video>
      <LiveCover :messages="messages" :stats="stats" :viewers="viewers">
        <div class="play-button" @click="togglePlay">
          <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>
      </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;
  }

  .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;
  }
}
</style>
