<template>
  <div id="videoDetail">
    <el-row>
      <el-col :span="24" class="info">
        <el-col :span="24" class="video">
          <video :id="tcPlayerId" preload="auto" controls="controls" style="width:100%; height:200px;" playsinline webkit-playsinline></video>
        </el-col>
        <el-col :span="24" class="chat">
          <van-col :span="24">
            <van-swipe :autoplay="3000">
              <van-swipe-item v-for="(advert, index) in roomInfos.adverts" :key="index">
                <img width="100%" height="100px" v-lazy="advert.imgdir" @click="imgclick(advert.imgurl)" />
              </van-swipe-item>
            </van-swipe>
          </van-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: room } = createNamespacedHelpers('room');

export default {
  name: 'videoDetail',
  props: {
    options: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {},
  data: function() {
    return {
      player: null,
      roomInfos: {},
      tcPlayerId: 'tcPlayer' + Date.now(),
    };
  },
  created() {
    this.seachInfo();
  },
  watch: {
    options: {
      handler(newV, oldV) {
        this.$nextTick(() => {
          this.loadJS();
        });
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    ...room(['fetch']),
    async seachInfo() {
      // 根据房间id查询房间详细信息
      let result = await this.fetch(this.id);
      if (this.$checkRes(result)) {
        console.log(result.data);
        this.$set(this, `roomInfos`, result.data);
      }
    },
    onoptions(cur, old) {
      this.$nextTick(() => {
        this.loadJS();
      });
    },
    onPlay() {
      // 根据房间id查询房间详细信息
      const playerParm = {
        fileID: this.fileid,
        appID: '1259120186',
        autoplay: false,
      };
      console.log(playerParm);
      setTimeout(() => {
        if (!this.player) {
          this.player = TCPlayer(this.tcPlayerId, playerParm);
        } else {
          this.player.loadVideoByID(playerParm);
        }
      });
    },
    loadTcScript(callback) {
      this.loadScript(callback, {
        id: 'tcPlayerScriptId',
        url: '//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.min.js',
      });
    },
    loadScript(callback, params) {
      if (document.getElementById(params.id)) {
        callback();
      } else {
        const script = document.createElement('script');
        script.async = true;
        script.src = params.url;
        script.id = params.id;
        script.onload = () => {
          callback();
        };
        document.body.appendChild(script);
      }
    },
    loadJS() {
      if (window.TCPlayer) {
        this.onPlay();
      } else {
        this.loadTcScript(() => {
          this.onPlay();
        });
      }
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    fileid() {
      return this.$route.query.fileid;
    },
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>
<style lang="less" scoped>
@import url('//imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css');
.info {
  padding: 10px;
  .video {
    background: #fff;
    padding: 10px;
    margin: 0 0 10px 0;
    height: 225px;
  }
  .chat {
    background: #fff;
    padding: 10px;
    .chatList {
      border: 1px solid #ccc;
      min-height: 300px;
      margin: 0 0 10px 0;
      border-radius: 10px;
      padding: 5px 10px;
    }
    .chatInput {
      .el-button {
        width: 100%;
        padding: 13px 0;
      }
    }
  }
}
/deep/.video-js {
  height: 190px !important;
  border-radius: 10px;
}
</style>
