<template>
  <div class="livedetail">
    <div class="info">
        <div class="liveplay">
            <liveplay :info="liveinfo"></liveplay>
        </div>

        <LiveCount :info="liveinfo.studentlist" :livestatus="liveinfo.livestatus" :zid="liveinfo.liveid"></LiveCount>
    </div>
    <VideoReview class="review" v-if="liveinfo.livestatus == 2" :videoinfo="liveinfo.score"></VideoReview>
  </div>
</template>
<style lang="scss" scoped>
.livedetail {
  width: 1320px;
  height: 563px;
    .info {
        width: 1321px;
        display: flex;
        justify-content: center;
        .liveplay {
            background: white;
            border-radius: 18px;
            margin-right: 29px;
        }
    }
    .review {
        margin-top: 28px;
    }
}
</style>
<script lang="ts">
import { defineComponent, ref } from "vue";
import liveplay from "@/components/LivePlay.vue";
import LiveCount from "@/components/LiveCount.vue";
import VideoReview from "@/components/VideoReview.vue";
import { useRoute } from "vue-router";
import { getliveinfo } from "@/api";
import router from '@/router';
export default defineComponent({
  components: {
    LiveCount,
    liveplay,
    VideoReview,
  },
  setup() {
    console.log(useRoute().query.id);
    const id = useRoute().query.id;
    const liveinfo = ref<any>({})
    if (typeof id == "string") {
        getliveinfo(parseInt(id)).then((res) => {
            liveinfo.value = res;
            console.log(res)
        });
    }
    return {
        liveinfo
    }
  },
});
</script>