<template>
  <div class="video">
    <video :controls="true" :src="info.livestatus == 0 ? info.fileurl :  info.vodurl"></video>
    <div class="liveinfo">
          <div class="left">
              <div>
                  <img src="@/static/images/livelesson.png" alt="" class="icon">
                  <span>西班牙语</span>
              </div>
              <div>
                  <img src="@/static/images/livewatch.png" alt="" class="icon">
                  <span>{{info.dateline}}</span>
              </div>
              <div>
                  <img src="@/static/images/livetimetake.png" alt="" class="icon">
                  <span>{{info.livetime}}min</span>
              </div>
                    <div>
                  <img src="@/static/images/shoucang.png" alt="" class="icon">
                  <span class="score">5.0分</span>
              </div>
          </div>
          <div class="right" @click="bianji">
              编辑信息
          </div>
      </div>
  </div>
</template>
<style lang="scss" scoped>
.video {
  width: 976px;
  height: 563px;
  border-radius: 18px;
  overflow: hidden;
  > video {
    width: 100%;
    height: 505px;
  }
  .liveinfo{
        display: flex;
        justify-content: space-between;
        height: 58px;
        align-items: center;
        background-color: #fff;
        .left{
            display: flex;
            color: #121212;
            font-size: 13px;
            margin-left: 29px;
            .score{
              color: #D22C2E;
              font-size: 13px;
            }
            >div{
                margin-right: 57px;
            }
            .icon{
                width: 25px;
                height:24px;
                margin-right: 6px;

            }
        }
        .right{
            width: 74px;
            height: 29px;
            border:1px solid #08AE98;
            border-radius: 3px;
            margin-right: 29px;
            color: #08AE98;
            font-size: 13px;
            line-height: 29px;
            font-weight: bold;
            text-align: center;
        }
      }
}
</style>
<script lang="ts">
import router from '@/router';
import { defineComponent, ref } from "vue";

export default defineComponent({
  props:{
    info: Object
  },
  setup(props) {
    console.log(props.info);
    function bianji(){
      if(props.info != undefined){
        router.push("/mine/webcast?id=" + props.info.liveid)
      }
    }
    // const liveinfo = ref(props.liveinfo)
    return {
      bianji
    }
  },
});
</script>