<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>
    <infoad></infoad>

    <VideoReview class="review" v-if="liveinfo.livestatus == 2" :videoinfo="liveinfo.score"></VideoReview>
     <a-modal v-model:visible="visible" :closable="false">
       <template #footer>
       
        <a-button key="submit" type="primary" @click="visible = false">
          {{lan.$t('queding')}}
        </a-button>
      </template>
      <p>{{lan.$t('chaoguoshijian')}}</p>
      
    </a-modal>
  </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 infoad from "@/components/infoad.vue";

import { useRoute } from "vue-router";
import { getliveinfo, share } from "@/api";
import router from '@/router';
import { useI18n } from "@/utils/i18n";
export default defineComponent({
  components: {
    LiveCount,
    liveplay,
    VideoReview,
    infoad
  },
  setup() {
    console.log(useRoute().query.id);
    const id = useRoute().query.id;
    const liveinfo = ref<any>({})
    const visible = ref(false)
    const lan = useI18n()
    if (typeof id == "string") {
        getliveinfo(parseInt(id)).then((res) => {
            if(res.overdue == 1){
              visible.value = true;
            }
            liveinfo.value = res;
            console.log(res)
        });
    }
    return {
        liveinfo,
        visible,
        lan
    }
  },
});
</script>