<template>
  <div>
    <div class="top-f">
      <top-title title="直播回放"></top-title>
    </div>
    <ul class="back-list">
      <template v-for="(item, index) in listData">
        <li :key="index">
          <div class="t">
            <div class="name">录制时间</div>
            <div class="time">{{ item.file.created_at }}</div>
          </div>
          <div class="b">
            <div class="name">点击按钮观看回放</div>
            <div class="play" @click="videoPlay(item.replay_url, item)"></div>
          </div>
        </li>
      </template>
    </ul>
  </div>
</template>
<script>
import action from '@action'
import topTitle from '../../components/topTitle.vue'
export default {
  components: {
    topTitle
  },
  data() {
    return {
      listData: [],
      userName: ''
    }
  },
  mounted() {
    this.getList()
    this.getUser()
  },
  methods: {
    getUser() {
      action.Login.getUserInfo().then((res) => {
        if (res.code === 0) {
          console.log(res)
          this.userName = res.data.username
        }
      })
    },
    getList() {
      action.List.getPlaybackList({ room_id: this.$route.params.room_id }).then((res) => {
        if (res.code === 0) {
          this.listData = res.data.list
        }
      })
    },
    videoPlay(url, data) {
      console.log(data, url)
      if (data.liveRoom.type === 1) {
        const urls = `${url}&autoLogin=true&viewername=${this.userName}&viewertoken=${this.randomString(6)}`
        window.location.href = urls
      } else {
        window.location.href = url
      }
    },
    randomString(length) {
      const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
      let result = ''
      for (let i = length; i > 0; --i) {
        result += str[Math.floor(Math.random() * str.length)]
      }
      return result
    }
  }
}
</script>
<style lang="scss" scoped>
.top-f{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.back-list{
  padding: 1.1rem .4rem 0;
  li{
    border-bottom: 0.01rem solid #ccc;
    padding: .4rem 0;
    .t{
      display: flex;
      .name{
        color: #222;
        font-size: .24rem;
        font-weight: 500;
        line-height: 100%;
      }
      .time{
        font-size: .24rem;
        color: #666;
        margin-left: auto;
        line-height: 100%;
      }
    }
    .b{
      display: flex;
      margin-top: .4rem;
      align-items: center;
      .name{
        font-size: .24rem;
        color: #222;
        line-height: 100%;
      }
      .play{
        margin-left: auto;
        width: .46rem;
        height: .4rem;
        background: url(../../assets/images/list/play.png);
        background-size: 100% 100%;
      }
    }
  }
}
</style>
