<template>
    <div class="videoinfo">
        <div class="info">
            <VideoPlay :title="result.title" :vid="result.videoid" :url="result.fileid"></VideoPlay>
            <VideoCont :videoid="result.videoid" :yuanyin="result.statusdesc" :date="result.createdAt" :watch="result.watch" :share="result.share" :status="result.status"></VideoCont>
        </div>
        <VideoReview :videoinfo="result.score" class="review" v-if="result.status == 1"></VideoReview>
    </div>
</template>
<style lang="scss" scoped>
.videoinfo{
    width: 1320px;
    height: 563px;
    .info{
        display: flex;
        justify-content: space-between;
    }
    .review{
        margin-top: 28px;
    }
}
</style>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import VideoPlay from "@/components/VideoPlay.vue"
import VideoCont from "@/components/VideoCont.vue"
import VideoReview from "@/components/VideoReview.vue";
import { getcommentlist, videodetail } from '@/api';
import { useRoute } from 'vue-router';
export default defineComponent({
    components:{
        VideoPlay,
        VideoCont,
        VideoReview
    },
    setup(){
        // console.log(1)
        console.log(useRoute().query)
        const result=ref({})
        const commentlist=ref({})
        const videoid=ref(useRoute().query.id)
          onMounted(async () => {
            result.value= await videodetail(useRoute().query.id)
            // commentlist.value=await getcommentlist({type:2,id:videoid.value})
        })
    
       return {
           result,
           commentlist,
           videoid
       }
        
    }
})
</script>