<template>
  <div class="video-container" :style="containerStyle">
    <video
      ref="video"
      class="video-player"
      :style="{ objectFit: fit }"
      autoplay
      :controls="showControls"
      playsinline
      muted
    ></video>
    <div class="overlay">
      <div class="overlay-inner">
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'VideoBox',
  props: {
    fit: {
      type: String,
      default: 'contain',
      validator: v => ['contain', 'cover', 'fill', 'none', 'scale-down'].includes(v)
    },
    showControls: {
      type: Boolean,
      default: false
    },
    width: {
      type: [String, Number],
      default: '100%'
    },
    height: {
      type: [String, Number],
      default: '100%'
    }
  },
  data () {
    return {
      url: 'http://82.156.122.87:80/rtc/v1/whep/?app=live&stream=083AF27BB2D0',
      sdk: null
    }
  },
  computed: {
    containerStyle () {
      const toCssSize = v => (typeof v === 'number' ? `${v}px` : v)
      return {
        width: toCssSize(this.width),
        height: toCssSize(this.height)
      }
    }
  },
  mounted () {
    this.startPlay()
  },
  methods: {
    async startPlay () {
      if (this.sdk) {
        this.sdk.close()
        this.sdk = null
      }

      this.sdk = new window.SrsRtcWhipWhepAsync()
      this.$refs.video.srcObject = this.sdk.stream

      try {
        const session = await this.sdk.play(this.url)
        console.log('播放成功，session:', session)
      } catch (e) {
        console.error('播放失败', e)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";

.video-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;

  .video-player {
    width: 100%;
    height: 100%;
    background-color: #000;
  }

  /* 覆盖层：承载插槽内容，叠在视频之上 */
  .overlay {
    position: absolute;
    inset: 0;
    z-index: 90; /* 与各叠加控件的 z-index 习惯保持一致 */
    pointer-events: none; /* 默认透传，避免遮挡视频区域的交互 */
  }

  /* 让插槽内容的绝对定位以 .overlay 为参照，不做默认偏移 */
  .overlay-inner {
    position: static; /* 不改变定位上下文，让内部绝对定位元素参照 .overlay */
    width: 100%;
    height: 100%;
    pointer-events: auto; /* 允许控件交互 */
  }
}
</style>
