<template>
  <div class="live-watch" v-loading="!liveInfo" @click.once="cancelMuted">
    <div class="live-header">
      <div class="live-title">{{ liveInfo?.title }}</div>
      <div class="live-quit">
        <el-button type="danger" size="mini" round @click="$emit('quitLive')">{{
          quitText
        }}</el-button>
      </div>
      <div class="live-info">
        <div class="live-usrcount">
          <i class="i-h-jsgl-duoren"></i> {{ userNumber }}人
        </div>
        <div class="live-lecture-name">
          <div class="user-avatar" v-if="liveInfo?.lecturerInfo?.photo">
            <img
              :src="liveInfo?.lecturerInfo.photo.diskname.fileLinkTransfer()"
              alt=""
            />
          </div>
          <div class="user-avatar" v-else>
            {{ liveInfo?.lecturerInfo?.name.slice(0, 1) }}
          </div>
          <div>{{ liveInfo?.lecturerInfo?.name }}</div>
        </div>
      </div>
    </div>
    <div
      class="live-body"
      :style="{
        backgroundImage: `url(${liveInfo?.warmUpPicture?.fileLinkTransfer()}) `,
        'background-size': 'cover',
        backgroundRepeat:'no-repeat',
        backgroundPosition:'center'
      }"
    >
      <slot name="liveBodyLeftMenu">
        <!-- <div class="live-body-left"> <div class="left-menu-item"> <i class="i-j-jxzb-kejian"></i> 课件 </div> <div class="left-menu-item"> <i class="i-x-zxks-canjiakaoshi"></i> 答题 </div> </div> -->
      </slot>
      <div class="live-body-center">
        <slot name="playingBox">
          <div class="live-not-start">直播未开始，稍等一下吧！</div>
          <div class="live-playing"></div>
        </slot>
      </div>
      <div class="live-body-right">
        <div class="live-lecturer-video" v-if="false">主播头像视频</div>
        <ChatList
          @userListChange="
            (num) => {
              userNumber = num;
            }
          "
          :room="liveInfo"
          class="live-chat-room"
          :liveId="liveId"
        ></ChatList>
      </div>
    </div>
    <audio
      muted
      autoplay
      ref="audio"
      :src="liveInfo?.warmUpMusice?.fileLinkTransfer()"
      v-show="false"
    ></audio>
  </div>
</template>

<script>
import ChatList from '../components/chat-list.vue'
export default {
  components: {
    ChatList
  },
  props: {
    liveInfo: {
      type: Object
    },
    quitText: {
      type: String,
      default: '退出直播'
    },
    warmAudio: null
  },
  data () {
    return {
      userNumber: 0
    }
  },
  mounted () {},
  methods: {
    cancelMuted () {
      this.$refs.audio.muted = false
      this.$refs.audio.play()

      this.warmAudio = this.$refs.audio
    }
  },
  watch: {}
}
</script>
<style lang="scss" scoped>
.live-watch {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  .live-header {
    padding: 0 10px;
    color: white;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    background-color: $--color-primary;
  }
  .live-title {
    flex: 1;
    min-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .live-info {
    min-width: 200px;
    display: flex;
    justify-content: flex-end;
    font-size: 13px;
    align-items: center;
    > :last-child {
      margin-left: 20px;
    }
    .live-lecture-name {
      display: flex;
      align-items: center;
    }
    .user-avatar {
      width: 30px;
      height: 30px;
      background-color: rgb(29, 199, 230);
      margin-right: 5px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .live-body {
    height: 100%;
    display: flex;
    flex: 1;
    background-color: #333333;
    overflow: hidden;
    .live-body-left {
      width: 55px;
      height: 100%;
      background-color: #6d6e70;
      .left-menu-item {
        color: white;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        // margin:;
        padding: 10px 0;
        // margin-bottom: 20px;
        cursor: pointer;
        i {
          margin-bottom: 3px;
          font-size: 17px;
        }
      }
      .left-menu-item-open {
        color: aqua;
      }
      .left-menu-item:hover {
        background-color: #5b5c5e;
      }
    }

    .live-body-center {
      height: 100%;
      position: relative;
      flex: 1;

      .live-not-start {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1;
        background-color: #333333;
        padding: 10px;
      }
      .start-button {
        margin-top: 10px;
      }
      .live-playing {
        height: 100%;
      }
      .video-play {
        width: 100%;
        height: 100%;
        background-color: #333333;
        &::-webkit-media-controls-timeline {
          display: none;
        }
      }
    }

    .live-body-right {
      width: 250px;
      display: flex;
      flex-direction: column;
      .live-lecturer-video {
        height: 150px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .live-chat-room {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: white;
        padding: 5px;
      }
      .room-list {
        flex: 1;
        padding: 5px;
        overflow: auto;
      }
    }
  }
}
</style>
