<template>
  <div class="video-box">
    <div class="video-wrap">
      <Nav :title="detail.title" v-if="!$shieldConfig.nav">
        <div class="right-icon" @click="shareFn">
          <img src="@/assets/images/share-icon1.png" />
        </div>
      </Nav>
      <div class="videoRef-wrap" :style="videoStyle">
        <div class="videoRef"></div>
        <div v-if="!showLiveTip">
          <div
            class="pause-text live-status-tip"
            v-if="
              [$liveStatusObj.NotStart, $liveStatusObj.PausePlay].includes(
                liveStatus
              )
            "
          >
            <img class="over-icon" src="@/assets/images/no-play.png" alt="" />
            <p v-if="liveStatus === $liveStatusObj.NotStart">
              即将开播，敬请期待
            </p>
            <p v-if="liveStatus === $liveStatusObj.PausePlay">
              主播离开一会儿，请耐心等待～
            </p>
          </div>
          <div
            class="finish-play-tip"
            v-else-if="
              liveStatus === $liveStatusObj.FinishPlay &&
              (!detail.libraryList || !detail.libraryList.length)
            "
          >
            <img class="over-icon" src="@/assets/images/shutdown.png" alt="" />
            直播已结束，稍后将提供回放视频
          </div>
        </div>
        <div
          class="down-time-wrap"
          v-if="detail.liveStatus === $liveStatusObj.NotStart"
        >
          <div class="time">
            <img src="../../assets/images/time.png" alt="" />
            <span>{{ `距离${detail.playType == 1 ? "直" : "录"}播开始` }}</span>
            <strong v-for="(item, index) in formTimeArr" :key="index"
              >{{ item.text }}{{ item.unit }}</strong
            >
          </div>
          <button
            :class="[props.detail.isSubscribe !== 1 ? 'active' : '']"
            v-preReClick="setSubLiveVideo"
          >
            {{ props.detail.isSubscribe === 1 ? "已预约" : "立即预约" }}
          </button>
        </div>
        <div class="plat-btn" v-if="showPlayBtn" @click="startPlay">
          <img src="../../assets/images/normal_player.png" />
        </div>
      </div>

      <van-tabs v-model:active="active" line-width="0.4rem">
        <van-tab title="互动" :name="0">
          <TgInteract
            ref="tgInteractRef"
            :detail="detail"
            :activityObj="activityObj"
            :carPushObj="carPushObj"
            :isSpeak="isSpeak"
            @sendMsg="sendMsg"
            @closeActivity="closeActivity"
            @closeCarPush="closeCarPush"
          />
        </van-tab>
        <van-tab title="甄选服务" :name="1">
          <ShopCar :tgId="detail.advisorBasic?.id" :detail="detail" />
        </van-tab>
        <van-tab title="详情" :name="2">
          <Information :detail="detail" />
        </van-tab>
      </van-tabs>
    </div>
  </div>

  <DiscountCoupon
    ref="discountCouponRef"
    :item="couponDetail"
    :liveId="detail.id"
  />
  <QuestionnaireTip
    ref="questionnaireTipRef"
    :questionTitle="questionTitle"
    :questionId="questionId"
  />
  <Share ref="shareRef" :detail="detail" />

  <img
    @click="getWeiXinCode"
    v-if="detail.openQw === 1 && route.query.saleUserId"
    class="getQRCode"
    src="@/assets/images/getQRCode.png"
    alt=""
  />
  <van-overlay :show="openQwShow">
    <div class="qw-wrap">
      <div class="qw-content">
        <h2>长按识别二维码 <span>领取资料</span></h2>
        <img :src="qwImg" alt="" srcset="" />
      </div>
      <van-icon name="cross" @click="openQwShow = false" />
    </div>
  </van-overlay>
</template>

<script setup>
import { ref, defineProps, watch } from "vue";
import { useRoute } from "vue-router";
import Nav from "@/components/NavBar.vue";
import DiscountCoupon from "./components/DiscountCoupon.vue";
import QuestionnaireTip from "./components/QuestionnaireTip.vue";
import Share from "@/components/Share";
import TgInteract from "./hComponents/TgInteract.vue";
import ShopCar from "./hComponents/ShopCar.vue";
import Information from "./hComponents/Information.vue";
import emitter from "@/utils/emitter";
import useGetLiveStatusObj from "@/hooks/useGetLiveStatusObj";
import useShieldConfig from "@/hooks/useShieldConfig";
import useWebSocketMsg from "@/hooks/useWebsocketMsg";
import { queryWeiXinCode } from "@/api/video";
import { nextTick } from "vue";
import useCountDown from "@/hooks/useCountDown";
import { subLiveVideo } from "@/api/video";

const $shieldConfig = useShieldConfig();
const $liveStatusObj = useGetLiveStatusObj();
const route = useRoute();
const props = defineProps({
  detail: {
    type: Object,
    default: () => ({}),
  },
});
const active = ref(0);
const showLiveTip = ref(
  window.config.userIdList.includes(props.detail.advisorBasic?.userId)
);
const tgInteractRef = ref();
watch(
  () => active.value,
  (value) => {
    if (value === 1) {
      emitter.emit("updateCar");
    } else if (value === 0) {
      nextTick(() => {
        tgInteractRef.value && tgInteractRef.value.bsRefresh();
      });
    }
  }
);

const shareRef = ref();
const shareFn = () => {
  shareRef.value.showPopup = true;
  sendMsg(5);
};

const videoStyle = ref({
  background: `url(${props.detail.imgUrl}) left center no-repeat`,
  backgroundSize: "cover",
});

const {
  liveStatus,
  isSpeak,
  activityObj,
  carPushObj,
  discountCouponRef,
  questionnaireTipRef,
  questionId,
  questionTitle,
  couponDetail,
  showPlayBtn,
  closeActivity,
  sendMsg,
  closeCarPush,
} = useWebSocketMsg({
  detail: props.detail,
  videoClass: ".videoRef",
});

const openQwShow = ref(false);
const qwImg = ref();
const getWeiXinCode = async () => {
  if (!qwImg.value) {
    let ret = await queryWeiXinCode({ id: route.query.saleUserId });
    if (ret.code === 0) {
      qwImg.value = ret.data;
    }
  }
  openQwShow.value = true;
};

// 直播开始倒计时
const { formTimeArr, startDownTime } = useCountDown();

startDownTime(props.detail.startTime);

const setSubLiveVideo = async () => {
  if (props.detail.isSubscribe === 1) return;
  let ret = await subLiveVideo({
    id: props.detail.id,
    option: props.detail.isSubscribe === 1 ? 2 : 1,
    saleUserId: route.query.saleUserId,
  });
  if (ret.code === 0) {
    emitter.emit("updateVideoDetail", {
      isSubscribe: props.detail.isSubscribe === 1 ? 2 : 1,
      subscribeUserCount: ret.data.count,
    });
  }
};
</script>
<style scoped lang="scss">
.right-icon {
  img {
    width: 48px;
    height: 48px;
  }
}
.videoRef-wrap {
  position: relative;
  height: 422px;
  z-index: 4;
  background-color: #fff;
  .videoRef {
    border-radius: 24px 24px 0 0;
    height: 100%;
    video {
      width: 100%;
      height: 100%;
    }
    ::v-deep .video-js {
      width: 100%;
      height: 100%;
      font-size: 18px;
      .vjs-control-bar {
        z-index: 3;
        padding-left: 10px;
      }
    }
  }
  .down-time-wrap {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 16px 32px;
    font-size: 32px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    .time {
      display: flex;
      align-items: center;
      img {
        width: 32px;
        height: 32px;
        margin-right: 4px;
      }
      span {
        font-size: 24px;
        color: rgba(255, 255, 255, 0.8);
        margin-right: 8px;
      }
    }
    button {
      padding: 14px 20px;
      border-radius: 80px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      box-sizing: border-box;
      background: none;
      font-size: 24px;
      color: #fff;
      &.active {
        border: 1px solid rgba(240, 46, 24, 0.5);
        background: rgba(240, 46, 24, 1);
      }
    }
  }
}

.van-tabs {
  // height: calc(100% - 514px);
  height: calc(100% - 422px);
  ::v-deep .van-tabs__content {
    height: calc(100% - 90px);
    .van-tab__panel {
      height: 100%;
    }
  }
}
.pause-text {
  img {
    width: 34px;
    height: auto;
    margin-right: 16px;
  }
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 16px 32px;
  line-height: 48px;
  border-radius: 40px;
  white-space: nowrap;
}
.finish-play-tip {
  position: absolute;
  bottom: 16px;
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  img {
    width: 48px;
    height: 48px;
    margin-right: 16px;
    margin-left: 32px;
  }
}
::v-deep {
  .van-tabs__wrap {
    position: relative;
    z-index: 2;
  }
}
.plat-btn {
  position: absolute;
  left: 50%;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  transform: translate(-50%, -50%);
  img {
    width: 64px;
    height: 64px;
    display: flex;
  }
}
::v-deep .tcp-playlist {
  z-index: 2;
}
.video-box {
  overflow: hidden; /* 禁用容器滚动 */
  -webkit-overflow-scrolling: touch; /* 对于iOS设备，禁用平滑滚动 */
}
.video-box {
  height: 100%;
}
.video-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
}

.getQRCode {
  position: fixed;
  right: 20px;
  bottom: 300px;
  width: 80px;
  height: 80px;
  z-index: 2;
}
.qw-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  .qw-content {
    background: #fff;
    width: 600px;
    border-radius: 8px;
    h2 {
      background: url(../../assets/images/qw-bg.png) no-repeat center;
      background-size: cover;
      height: 128px;
      line-height: 128px;
      font-size: 32px;
      color: rgba(51, 51, 51, 1);
      span {
        color: rgba(254, 143, 54, 1);
      }
    }
    img {
      max-width: 320px;
      max-height: 320px;
      margin: 0 auto 64px;
      border: 2px solid #fe8f36;
      border-radius: 8px;
    }
  }
  .van-icon {
    font-size: 36px;
    color: #fff;
    border: 0.5px solid #fff;
    border-radius: 50%;
    margin-top: 40px;
  }
}
@media screen and (min-width: 480px) {
  .videoRef-wrap {
    height: 540px;
  }
  .van-tabs {
    height: calc(100% - 540px);
  }
}
</style>
