<template>
  <div class="video-box">
    <!-- 录播中 -->
    <Playback v-if="detail.playType === 2" :detail="detail">
      <VideoHeader :detail="detail" />
    </Playback>
    <!-- 直播中或者直播暂停中 -->
    <BePlaying
      v-else-if="
        detail.liveStatus === $liveStatusObj.InLive ||
        detail.liveStatus === $liveStatusObj.PausePlay
      "
      :detail="detail"
      :liveStatus="liveStatus"
      :isSpeak="isSpeak"
      :activityObj="activityObj"
      :informMsgList="informMsgList"
      :showPlayBtn="showPlayBtn"
      :online="online"
      :closeActivity="closeActivity"
      :sendMsg="sendMsg"
    >
    </BePlaying>
    <!-- 直播未开始 -->
    <SubscribeLive
      v-else-if="detail.liveStatus === $liveStatusObj.NotStart"
      :detail="detail"
      :liveStatus="liveStatus"
      :isSpeak="isSpeak"
      :activityObj="activityObj"
      :informMsgList="informMsgList"
      :showPlayBtn="showPlayBtn"
      :online="online"
      :closeActivity="closeActivity"
      :sendMsg="sendMsg"
    >
    </SubscribeLive>
    <!-- 直播已结束，并且生成了回放视频 -->
    <Playback
      v-else-if="
        detail.liveStatus === $liveStatusObj.FinishPlay &&
        detail.libraryList &&
        detail.libraryList.length
      "
      :detail="detail"
      :liveStatus="liveStatus"
      :isSpeak="isSpeak"
      :activityObj="activityObj"
      :informMsgList="informMsgList"
      :showPlayBtn="showPlayBtn"
      :online="online"
      :closeActivity="closeActivity"
      :sendMsg="sendMsg"
    >
    </Playback>
    <!-- 直播已结束 -->
    <OverPlaying
      v-else-if="detail.liveStatus === $liveStatusObj.FinishPlay"
      :detail="detail"
      :liveStatus="liveStatus"
      :isSpeak="isSpeak"
      :activityObj="activityObj"
      :informMsgList="informMsgList"
      :showPlayBtn="showPlayBtn"
      :online="online"
      :closeActivity="closeActivity"
      :sendMsg="sendMsg"
    >
    </OverPlaying>
  </div>
  <DiscountCoupon
    ref="discountCouponRef"
    :item="couponDetail"
    :liveId="detail.id"
  />
  <QuestionnaireTip
    ref="questionnaireTipRef"
    :questionTitle="questionTitle"
    :questionId="questionId"
  />
</template>

<script setup>
import { defineProps } from "vue";
import BePlaying from "./sComponents/BePlaying.vue";
import SubscribeLive from "./sComponents/SubscribeLive.vue";
import OverPlaying from "./sComponents/OverPlaying.vue";
import Playback from "./sComponents/Playback.vue";
import DiscountCoupon from "./components/DiscountCoupon.vue";
import QuestionnaireTip from "./components/QuestionnaireTip.vue";
import useWebSocketMsg from "@/hooks/useWebsocketMsg";
import useGetLiveStatusObj from "@/hooks/useGetLiveStatusObj";

const $liveStatusObj = useGetLiveStatusObj();
const props = defineProps({
  detail: {
    type: Object,
    default: () => ({}),
  },
});

const {
  liveStatus,
  isSpeak,
  activityObj,
  discountCouponRef,
  questionnaireTipRef,
  informMsgList,
  questionId,
  questionTitle,
  couponDetail,
  showPlayBtn,
  online,
  closeActivity,
  sendMsg,
} = useWebSocketMsg({
  detail: props.detail,
  videoClass: ".videoRef",
});
</script>
<style scoped lang="scss">
.video-box {
  overflow: hidden; /* 禁用容器滚动 */
  -webkit-overflow-scrolling: touch; /* 对于iOS设备，禁用平滑滚动 */
}
.video-box {
  height: 100%;
}
</style>
