live-mobile/src/views/live/roomDetail.vue

<template>
  <div id="roomsDetail">
    <el-row>
      <el-col :span="24" class="video" :style="{ height: oheight }"> </el-col>
    </el-row>
    <van-overlay :show="show" :style="{ height: oheight, width: '100%' }">
      <div id="transformid" class="wrapper" :style="{ transform: transform, height: vheight, width: vwidth, padding: vpadding, position: 'absolute' }">
        <van-col id="look-video-left" :span="stremlist.length == 2 ? 16 : 0" :style="{ height: oheight }"> </van-col>
        <van-col id="look-video-right" :style="{ height: oheight }" :span="stremlist.length == 1 ? 24 : 8"> </van-col>
      </div>
      <div id="othediv" v-show="othedivshow" :style="{ transform: transform, height: otheheight, width: vwidth, padding: othepadding, position: 'absolute' }">
        <div id="otheplaydiv" :style="{ height: otheheight, width: vwidth, background: background_ }">
          <div id="othe-video-1" :style="{ height: otheheight, width: othewidth }" class="video-box col-div othe-video-left"></div>
          <div id="othe-video-2" :style="{ height: otheheight, width: othewidth }" class="video-box col-div othe-video-left"></div>
          <div id="othe-video-3" :style="{ height: otheheight, width: othewidth }" class="video-box col-div othe-video-left"></div>
          <div id="othe-video-4" :style="{ height: otheheight, width: othewidth }" class="video-box col-div othe-video-left"></div>
          <div id="othe-video-5" :style="{ height: otheheight, width: othewidth }" class="video-box col-div othe-video-left"></div>
        </div>
      </div>
      <div class="videoBtn" id="videobtnid" :style="{ top: btop, right: bright }">
        <el-button type="warning" round @click="full()" size="mini"><i class="el-icon-rank"></i></el-button>
      </div>
    </van-overlay>
    <el-row class="chatrow">
      <el-col :span="24" class="info">
        <el-col :span="12" class="num">
          <span>观看：{{ total }}</span>
        </el-col>
        <el-col :span="12" class="meetBtn">
          <el-button v-show="switchbtn" type="warning" round size="small" @click="roomMeetBtn()">小程序<i class="el-icon-camera el-icon--right"></i></el-button>
        </el-col>
      </el-col>
    </el-row>
    <van-tabs type="card" @click="tabsClick">
      <van-tab title="会议简介">
        <van-col :span="24">
          <van-col class="content">{{ roomInfos.content }}</van-col>
        </van-col>
        <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>
      </van-tab>
      <van-tab title="互动留言">
        <el-row>
          <el-col :span="24" class="info">
            <el-col :span="24" class="chat">
              <el-col :span="24" class="chatInfo" id="chatSell">
                <el-col :span="24" class="list" v-for="(item, index) in dataList" :key="index">
                  <p>
                    <span :class="item.sendname == user.name ? 'selfColor' : ''">{{ item.sendname }}:</span>
                    <span>{{ item.content }}</span>
                  </p>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="submit">
              <el-col :span="19" class="input">
                <el-input type="textarea" maxlength="5000" show-word-limit v-model="content"></el-input>
              </el-col>
              <el-col :span="5" class="btn">
                <el-button type="primary" size="mini" @click="chatCreate">发送</el-button>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
      </van-tab>
      <van-tab title="参与成员">
        <van-col :span="24" class="userList">
          <van-grid :column-num="3">
            <van-grid-item v-for="(item, index) in userList" :key="index" icon="manager" :text="item.username" />
          </van-grid>
        </van-col>
      </van-tab>
      <van-tab title="申请评分">
        <van-col :span="24">
          <van-field v-model="form.hosname" left-icon="wap-home-o" name="hosname" label="单位" placeholder="请填写单位名称" />
        </van-col>
        <van-col :span="24">
          <van-field v-model="form.deptname" left-icon="apps-o" name="deptname" label="科室" placeholder="请填写科室名称" />
        </van-col>
        <van-col :span="24">
          <van-field v-model="form.level" left-icon="gem-o" name="level" label="职称" placeholder="请填写职称" />
        </van-col>
        <van-col :span="24">
          <van-field v-model="form.major" left-icon="user-o" name="major" label="专业" placeholder="请填写专业" />
        </van-col>
        <van-col :span="24">
          <van-field v-model="form.isxf" name="isxf" left-icon="star-o" label="学分" type="number" placeholder="请填写需要授予学分" />
        </van-col>
        <van-col :span="24" style="text-align:center">
          <van-button icon="star-o" type="primary" @click="sqClick">
            申请
          </van-button>
        </van-col>
      </van-tab>
    </van-tabs>
    <van-popup v-model="showQuest" position="bottom">
      <van-col :span="24" class="questtitle">
        <span>{{ questInfo.name }}</span>
      </van-col>
      <van-col class="questpopup" :span="24" v-for="(item, index) in questInfo.question" :key="index">
        <p style="margin:5px 0;">
          {{ index + 1 }}({{ item.type == '0' ? '单选' : item.type == '1' ? '多选' : item.type == '2' ? '问答' : '未识别' }})、{{ item.topic }}
        </p>
        <span v-if="item.type == '0'">
          <van-radio-group v-model="item.answer">
            <van-radio v-for="(i, ri) in item.option" :key="`${index}-${ri}`" :name="i.opname">{{ i.opname }}</van-radio>
          </van-radio-group>
        </span>
        <span v-if="item.type == '1'">
          <van-checkbox-group v-model="item.answer">
            <van-checkbox shape="square" v-for="(i, ci) in item.option" :key="`${index}-${ci}`" :name="i.opname">{{ i.opname }}</van-checkbox>
          </van-checkbox-group>
        </span>
        <span v-if="item.type == '2'">
          <van-field v-model="item.answer" type="textarea" rows="2" autosize placeholder="请输入" maxlength="200" show-word-limit />
        </span>
      </van-col>
      <van-col :span="24" class="questbtn">
        <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" @click="submitQuest">提交</van-button>
      </van-col>
    </van-popup>
  </div>
</template>

<script>
import TRTC from 'trtc-js-sdk';
import { mapState, createNamespacedHelpers } from 'vuex';
import Vue from 'vue';
import { Swipe, SwipeItem, Lazyload } from 'vant';
import { Image as VanImage } from 'vant';
import wx from 'weixin-js-sdk';
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(VanImage);
Vue.use(Lazyload);
const { mapActions: uploadquestion } = createNamespacedHelpers('uploadquestion');
const { mapActions: gensign } = createNamespacedHelpers('gensign');
const { mapActions: room } = createNamespacedHelpers('room');
const { mapActions: quest } = createNamespacedHelpers('quest');
const { mapActions: chat } = createNamespacedHelpers('chat');
export default {
  name: 'roomsDetail',
  props: {},
  components: {},
  data: function() {
    return {
      client_: null,
      localStream_: null,
      sdkAppId_: '1400380125',
      userId_: '',
      roomInfos: {},
      sendmemo: '',
      total: 0,
      transform: 'rotate(0)',
      oheight: '200px',
      vwidth: '100%',
      vheight: '200px',
      rheight: '200px',
      rwidth: '30%',
      lheight: '200px',
      lwidth: '70%',
      show: true,
      vpadding: '0',
      othepadding: '200px 0px 0px 0px',
      othetop: '200px',
      btop: '167px',
      bright: '10px',
      isscreen: false,
      content: '',
      dataList: [],
      lvideoid_: '',
      rvideoid_: '',
      userList: [],
      form: {},
      showQuest: false,
      queid: '',
      questInfo: {},
      switchbtn: false,
      switchmeetbtn: false,
      iscamera: false,
      otheheight: '10px',
      othewidth: '20%',
      bcolor: '#000',
      index_: 0,
      userindex_: 1,
      background_: '#000',
      swichusers: [],
      sbuser: '',
      othedivshow: false,
      shmaiindex: 0,
      stremlist: [],
      stremMeetlist: [],
      stremOtherlist: [],
      swichzjrid: '',
      swichzjrstatus: false,
    };
  },
  created() {
    this.initclient();
    this.lookuserSearch();
    this.lookusercountsel();
    this.chatSearch();
    this.userswichrole();
  },
  mounted() {
    this.channel();
  },
  destroyed() {
    const that = this;
    window.addEventListener('pagehide', function() {
      console.log('页面要关闭了');
      that.recordSave();
    });
  },
  methods: {
    ...gensign(['gensignFetch']),
    ...room(['lookuserFetch', 'fetch', 'lookusercount', 'lookquery', 'lookupdate', 'lookrecord', 'lookuserswichrole']),
    ...chat(['query', 'create']),
    ...quest(['questfetch']),
    ...uploadquestion({ upcreate: 'create', upquery: 'query' }),
    reviewVideo(newstrem, newid, oldstrem, oldid) {
      oldstrem.stop();
      oldstrem.play(newid);
      newstrem.stop();
      newstrem.play(oldid);
    },
    stermPlay(strem, id) {
      strem.play(id);
    },
    stermStop(strem) {
      strem.stop();
    },
    zbfullbtn() {
      const width = document.documentElement.clientWidth;
      const lvr_ = document.getElementById('look-video-right');
      let style = 'width:' + width + 'px;';
      style += 'height:200px;';
      style += 'position:absolute;top:0;left:0;';
      style += 'z-index:1;';
      lvr_.style.cssText = style;
    },
    zbfpbtn() {
      const width = document.documentElement.clientWidth;
      const lvr_ = document.getElementById('look-video-right');
      let stylel = 'width:30%;';
      stylel += 'height:200px;';
      lvr_.style.cssText = style;
      const lvl_ = document.getElementById('look-video-left');
      let stylell = 'width:70%;';
      stylell += 'height:200px;';
      lvl_.style.cssText = stylell;
    },
    swichposition(objid) {
      console.log('in swichposition---' + objid);
      if (objid) {
        console.log(this.stremMeetlist);
        const oldstrem_ = _.find(this.stremlist, { type: 'mainr' });
        console.log(oldstrem_);
        for (const elm of this.stremMeetlist) {
          console.log(elm);
          if (elm.swichuserid === objid) {
            this.reviewVideo(elm.strem, elm.id, oldstrem_.strem, 'look-video-right');
          }
        }
      } else {
        console.log('share--' + this.othedivshow);
        const oldstrem_ = _.find(this.stremlist, { type: 'mainr' });
        this.stermStop(oldstrem_.strem);
        this.stermPlay(oldstrem_.strem, 'look-video-right');
        if (this.othedivshow) {
          for (const elm of this.stremMeetlist) {
            this.stermStop(elm.strem);
          }
        }
      }
    },
    async recordSave() {
      console.log(2121);
      let data = {};
      data.type = '1';
      data.roomid = this.id;
      data.roomname = this.roomname;
      data.userid = this.user.uid;
      data.username = this.user.name;
      const res = await this.lookrecord(data);
    },
    async sqClick() {
      this.form.roomid = this.id;
      this.form.userid = this.user.uid;
      const res = await this.lookupdate(this.form);
      if (this.$checkRes(res)) {
        console.log(res.data);
        this.$message({
          message: '操作成功',
          type: 'success',
        });
      }
    },
    async tabsClick(name, title) {
      if (title === '参与成员') {
        this.lookuserQuery();
      }
    },
    async lookuserQuery({ skip = 0, limit = 1000 } = {}) {
      const info = { roomid: this.id };
      let res = await this.lookquery({ skip, limit, ...info });
      this.$set(this, `userList`, res.data);
    },
    async chatSearch({ skip = 0, limit = 1000 } = {}) {
      const info = { roomid: this.id };
      let res = await this.query({ skip, limit, ...info });
      this.$set(this, `dataList`, res.data);
    },
    async chatCreate() {
      let data = {};
      data.roomid = this.id;
      data.type = '0';
      data.content = this.content;
      data.sendid = this.user.uid;
      data.sendname = this.user.name;
      const res = await this.create(data);
      if (this.$checkRes(res)) {
        //this.$message('发送成功');
        this.content = '';
      }
    },
    channel() {
      console.log('in function:');
      console.log(`/exchange/switch_shmai_` + this.id);
      this.$stomp({
        [`/exchange/public_chat_` + this.id]: this.onMessage,
      });
      this.$stomp({
        [`/exchange/switch_role_` + this.user.uid]: this.onSwichMessage,
      });
      this.$stomp({
        [`/exchange/switch_shmai_` + this.id]: this.onSwichShmaiMessage,
      });
      this.$stomp({
        [`/exchange/quest_publish_` + this.id]: this.onQueMessage,
      });
      this.$stomp({
        [`/exchange/switch_zjr_` + this.id]: this.onZjrMessage,
      });
      this.$stomp({
        [`/exchange/switch_zb_` + this.id]: this.onZbMessage,
      });
    },
    onMessage(message) {
      // console.log('receive a message: ', message.body);
      let body = _.get(message, 'body');
      if (body) {
        body = JSON.parse(body);
        this.dataList.push(body);
        this.content = '';
      }
      this.$nextTick(() => {
        document.getElementById('chatSell').scrollTop = document.getElementById('chatSell').scrollHeight + 275;
      });
    },
    onQueMessage(message) {
      // console.log('receive a message: ', message.body);
      this.showQuest = true;
      let body = _.get(message, 'body');
      if (body) {
        body = JSON.parse(body);
        this.queid = body.queid;
        this.questSearch();
      }
    },
    onSwichMessage(message) {
      // console.log('receive a message: ', message.body);
      let body = _.get(message, 'body');
      if (body) {
        body = JSON.parse(body);
        if (body.switchrole === 'anchor' && body.userid === this.user.uid) {
          this.switchbtn = true;
          this.switchmeetbtn = true;
          this.roomMeetSwich();
        } else {
          this.switchbtn = false;
          this.switchmeetbtn = false;
        }
        if (body.switchrole !== 'anchor' && body.userid === this.user.uid) {
          const videoTrack = this.localStream_.getVideoTrack();
          if (videoTrack) {
            this.localStream_.removeTrack(videoTrack).then(() => {
              console.log('remove video call success');
              // 关闭摄像头
              videoTrack.stop();
              // this.client_.unpublish(this.localStream_).then(() => {
              //   // 取消发布本地流成功
              // });
            });
            const oldstrem_ = _.find(this.stremlist, { type: 'mainr' });
            this.stermStop(this.localStream_);
            this.stermStop(oldstrem_.strem);
            this.stermPlay(oldstrem_.strem, 'look-video-right');
          }
        }
      }
    },
    onSwichShmaiMessage(message) {
      let body = _.get(message, 'body');
      console.log(body);
      console.log(this.user.uid);
      if (body) {
        body = JSON.parse(body);
        this.swichposition(body.shmaiid);
      }
    },
    onZjrMessage(message) {
      let body = _.get(message, 'body');
      if (body) {
        body = JSON.parse(body);
        if (body.switchzjr) {
          this.swichzjrstatus = true;
          this.swichzjrid = body.switchzjr;
          this.swichzjrVideo(body.switchzjr);
        } else {
          this.swichzjrstatus = false;
        }
      }
    },
    onZbMessage(message) {
      let body = _.get(message, 'body');
      if (body) {
        body = JSON.parse(body);
        this.swichzjrstatus = false;
        this.swichzbVideo(body.switchzjr);
      }
    },
    onOtheMessage(message) {
      let body = _.get(message, 'body');
      if (body) {
        body = JSON.parse(body);
        if (body.otheid) {
          this.switchbtn = true;
          this.roomMeetBtn();
        } else {
          this.switchbtn = false;
        }
      }
    },
    async swichzjrVideo(switchzjr) {
      //
      const swichstrem = _.find(this.stremOtherlist, { switchzjrid: switchzjr, type: 'other' });
      if (swichstrem) {
        const oldstrem_ = _.find(this.stremlist, { type: 'mainr' });
        if (oldstrem_) {
          this.stermStop(oldstrem_.strem);
        }
        this.stermPlay(swichstrem.strem, 'look-video-right');
      }
    },
    async swichzbVideo(switchzjr) {
      //
      const oldstrem_ = _.find(this.stremlist, { type: 'mainr' });
      if (oldstrem_) {
        this.stermStop(oldstrem_.strem);
        this.stermPlay(oldstrem_.strem, 'look-video-right');
      }
      const swichstrem = _.find(this.stremMeetlist, { swichuserid: switchzjr });
      if (swichstrem) {
        this.stermStop(swichstrem.strem);
        const id_ = 'othe-video-' + swichstrem.index;
        this.stermPlay(oldstrem_.strem, id_);
      }
    },
    async userswichrole() {
      // 根据房间id查询房间详细信息
      let result = await this.lookuserswichrole({ roomid: this.id, userid: this.user.uid });
      if (this.$checkRes(result)) {
        if (result.data && result.data.switchrole === 'anchor') {
          this.switchbtn = true;
        }
      }
    },
    roomMeetBtn() {
      const url = '/pages/meeting/meeting?uid=' + this.user.uid + '&username=' + this.user.name + '&rid=' + this.id + '&roomname=' + this.roomname;
      console.log(url);
      wx.miniProgram.navigateTo({ url });
    },
    async roomMeetSwich() {
      this.othedivshow = true;
      this.oheight = '270px';
      this.otheheight = '70px';
      this.iscamera = true;
      const _userid = 'meetu-' + this.userId_;
      this.localStream_ = await TRTC.createStream({
        audio: true,
        video: true,
        // cameraId: this.cameraId,
        // microphoneId: this.microphoneId,
        userId: _userid,
      });
      this.localStream_.setVideoProfile('480p');
      await this.localStream_.initialize();
      console.log('initialize local stream success');
      // publish the local stream
      await this.client_.publish(this.localStream_);
      this.index_ = this.index_ + 1;

      if (this.index_ < 6) {
        // const otheplaydiv = document.getElementById('otheplaydiv');
        const id_ = 'othe-video-' + this.index_;
        const newdata_ = { strem: this.localStream_, index: this.index_, id: id_, swichuserid: this.userId_ };
        this.stremMeetlist.push(newdata_);
        // const newdiv = '<div id="' + id_ + '" style="height: 70px, width: 20%" class="video-box col-div othe-video-left"></div>';
        // otheplaydiv.appendChild(newdiv);
        const newdata = { swichuserid: this.userId_, swichindex: this.index_ };
        this.swichusers.push(newdata);
        console.log('将用户push到列表里' + this.swichusers);
        this.localStream_.play(id_);
      }
    },
    async questSearch() {
      if (this.queid) {
        const result = await this.questfetch(this.queid);
        if (this.$checkRes(result)) {
          console.log(result.data);
          this.$set(this, `questInfo`, result.data);
        }
      }
    },
    async submitQuest() {
      let form = { roomid: this.id, userid: this.user.uid, questionnaireid: this.queid };
      let answers = [];
      for (const question of this.questInfo.question) {
        answers.push({ questionid: question._id, answer: JSON.stringify(question.answer) });
      }
      form.answers = answers;
      console.log(form);
      let res = await this.upcreate(form);
      if (res.errcode == '0') {
        this.showQuest = false;
      }
    },
    async lookuserSearch() {
      if (this.user.uid) {
        let data = {};
        data.roomid = this.id;
        data.roomname = this.roomname;
        data.userid = this.user.uid;
        data.username = this.user.name;
        const res = await this.lookuserFetch(data);
      }
      // 根据房间id查询房间详细信息
      let result = await this.fetch(this.id);
      if (this.$checkRes(result)) {
        console.log(result.data);
        this.$set(this, `roomInfos`, result.data);
        if (result.data.switchzjr) {
          this.swichzjrid = result.data.switchzjr;
          this.swichzjrstatus = true;
        }
        // 根据房间信息判断是否回答问卷
        if (result.data.isque === '1') {
          const info = { roomid: this.id, userid: this.user.uid, questionnaireid: result.data.queid };
          const skip = 0;
          const limit = 10;
          const upres = await this.upquery({ skip, limit, ...info });
          if (this.$checkRes(upres)) {
            if (upres.data.length === 0) {
              this.showQuest = true;
              this.queid = result.data.queid;
              this.questSearch();
            }
          }
        }
        // 根据是否上麦进行上麦判断
      }
    },
    async lookusercountsel() {
      // 根据房间id查询房间详细信息
      let result = await this.lookusercount({ roomname: this.roomname });
      if (this.$checkRes(result)) {
        console.log(result.total);
        this.$set(this, `total`, result.total);
      }
    },
    onSubmit() {
      console.log(this.sendmemo);
    },
    async initclient() {
      this.userId_ = this.user.uid;
      const _userid = 'meetu-' + this.userId_;
      const res = await this.gensignFetch({ userid: _userid });
      if (this.$checkRes(res)) {
        this.client_ = TRTC.createClient({
          mode: 'live',
          sdkAppId: this.sdkAppId_,
          userId: _userid,
          userSig: res.data,
        });
        await this.client_.join({ roomId: this.roomname, role: 'anchor' });
        this.client_.on('stream-subscribed', event => {
          const remoteStream = event.stream;
          // 远端流订阅成功，播放远端音视频流
          console.log(remoteStream);
          this.show = true;
          console.log('111' + remoteStream.getType());
          console.log('111' + remoteStream.getUserId());
          console.log('111' + remoteStream.getId());
          const userid_ = remoteStream.getUserId();
          const res_ = userid_.indexOf('-');
          const useridsplit_ = userid_.substring(0, 5);
          const userid_zs = userid_.substring(6);
          console.log('222--->' + useridsplit_);
          console.log('555--->' + userid_zs);
          if (useridsplit_ === 'share') {
            console.log('进入分享模式' + useridsplit_);
            const newdata_ = { strem: remoteStream, type: 'share' };
            this.stremlist.push(newdata_);
            this.lvideoid_ = 'video_' + remoteStream.getId();
            //this.zbfpbtn();
            this.swichposition();
            this.othedivshow = false;
            this.oheight = '200px';
            this.otheheight = '1px';
            console.log('进入分享模式' + this.lvideoid_);
            remoteStream
              .play('look-video-left')
              .then(() => {
                // autoplay success
                // 播放成功时调用css属性
                const _lvideoid_ = document.getElementById(this.lvideoid_);
                const style = 'width: 100%; height: 200px; position: absolute; transform: rotateY(0); object-fit: fill';
                _lvideoid_.style.cssText = style;
              })
              .catch(e => {
                const errorCode = e.getCode();
                if (errorCode === 0x4043) {
                  // PLAY_NOT_ALLOWED,引导用户手势操作恢复音视频播放
                  remoteStream.resume();
                }
              });
          } else if (useridsplit_ === 'mainr') {
            console.log('333');
            this.rvideoid_ = 'video_' + remoteStream.getId();
            // this.zbfullbtn();
            const newdata_ = { strem: remoteStream, type: 'mainr' };
            this.stremlist.push(newdata_);
            if (this.swichzjrid) {
              const swichstrem = _.find(this.stremOtherlist, { switchzjrid: this.swichzjrid, type: 'other' });
              if (swichstrem) {
                this.stermStop(swichstrem.strem);
              }
            }
            remoteStream
              .play('look-video-right')
              .then(() => {
                // autoplay success
              })
              .catch(e => {
                const errorCode = e.getCode();
                if (errorCode === 0x4043) {
                  // PLAY_NOT_ALLOWED,引导用户手势操作恢复音视频播放
                  remoteStream.resume();
                }
              });
          } else if (useridsplit_ === 'other') {
            console.log('333');
            this.rvideoid_ = 'video_' + remoteStream.getId();
            const newdata_ = { strem: remoteStream, type: 'other', switchzjrid: userid_zs };
            this.stremOtherlist.push(newdata_);
            if (this.swichzjrid) {
              this.swichzjrVideo(userid_zs);
            }
          } else if (useridsplit_ === 'meetu') {
            console.log('333');
            console.log('公众号进入画面' + this.index_);
            this.othedivshow = true;
            this.oheight = '270px';
            this.otheheight = '70px';
            this.iscamera = true;
            this.index_ = this.index_ + 1;
            if (this.index_ < 6) {
              const id_ = 'othe-video-' + this.index_;
              const newdata_ = { strem: remoteStream, index: this.index_, id: id_, swichuserid: userid_zs };
              this.stremMeetlist.push(newdata_);
              console.log(id_);
              const newdata = { swichuserid: userid_zs, swichindex: this.index_ };
              this.swichusers.push(newdata);
              console.log('将用户push到列表里' + newdata);
              remoteStream.play(id_);
            }
          } else if (useridsplit_ === 'wxxcx') {
            console.log('小程序进入画面' + this.index_);
            this.index_ = this.index_ + 1;
            if (this.index_ < 6) {
              const id_ = 'othe-video-' + this.index_;
              console.log(id_);
              remoteStream.play(id_);
            }
          }
        });
        // 监听远端流增加事件
        this.client_.on('stream-added', event => {
          const remoteStream = event.stream;
          console.log('222' + remoteStream.getType());
          // 订阅远端音频和视频流
          this.client_.subscribe(remoteStream, { audio: true, video: true }).catch(e => {
            console.error('failed to subscribe remoteStream');
          });
        });
        this.client_.on('stream-removed', event => {
          const remoteStream = event.stream;
          console.log('stop----');
          if (remoteStream) {
            const userid_ = remoteStream.getUserId();
            const useridsplit_ = userid_.substring(0, 5);
            if (useridsplit_ === 'wxxcx' || useridsplit_ === 'meetu') {
              console.log('退出userid_' + useridsplit_);
              // 订阅远端音频和视频流
              if (this.index_ > 0) {
                this.index_ = this.index_ - 1;
              }
            }
          }
          remoteStream.stop();
        });
        this.client_.on('mute-video', event => {
          const remoteStream = event.stream;
          console.log('退出');
          console.log('退出remoteStream' + remoteStream);
          if (remoteStream) {
            const userid_ = remoteStream.getUserId();
            const useridsplit_ = userid_.substring(0, 5);
            console.log('退出userid_' + userid_);

            if (useridsplit_ === 'wxxcx' || useridsplit_ === 'meetu') {
              console.log('退出userid_' + useridsplit_);
              // 订阅远端音频和视频流
              if (this.index_ > 0) {
                this.index_ = this.index_ - 1;
              }
            }
          }
          console.log('333--index---->' + this.index);
        });
      }
    },
    imgclick(url) {
      location.href = url;
    },
    full() {
      this.show = true;
      const width = document.documentElement.clientWidth;
      const height = document.documentElement.clientHeight;
      if (!this.isscreen) {
        console.log('全屏');
        this.isscreen = true;
        this.oheight = height;
        const transformid_ = document.getElementById('transformid');
        let style = 'width:' + height + 'px;';
        style += 'height:' + width + 'px;';
        style += '-webkit-transform: rotate(90deg); transform: rotate(90deg);';
        // 注意旋转中点的处理
        style += '-webkit-transform-origin: ' + width / 2 + 'px ' + width / 2 + 'px;';
        style += 'transform-origin: ' + width / 2 + 'px ' + width / 2 + 'px;';
        transformid_.style.cssText = style;
        this.transform = 'rotate(90deg)';
        // this.vwidth = height;
        console.log(height);
        if (this.othedivshow) {
          this.vheight = `${width - 70}px`;
          this.vwidth = `${height}px`;
          this.lheight = `${width - 70}px`;
          this.rheight = `${width - 70}px`;
        } else {
          this.vheight = `${width}px`;
          this.vwidth = `${height}px`;
          this.lheight = `${width}px`;
          this.rheight = `${width}px`;
        }

        this.btop = `${height - 40}px`;
        this.bright = `${width - 50}px`;
        if (this.othedivshow) {
          const othediv_ = document.getElementById('othediv');
          let styleothe = 'width:' + height + 'px;';
          styleothe += 'height:' + 70 + 'px;';
          styleothe += '-webkit-transform: rotate(90deg); transform: rotate(90deg);';
          // // 注意旋转中点的处理
          styleothe += '-webkit-transform-origin: ' + width / 2 + 'px ' + width / 2 + 'px;';
          styleothe += 'transform-origin: ' + width / 2 + 'px ' + width / 2 + 'px;';
          othediv_.style.cssText = styleothe;
          this.otheheight = '70px';
          this.othewidth = '20%';
          const ppp_ = `${width - 70}px`;
          this.othepadding = `${width - 70}px 0 0 0`;
        }
      } else {
        console.log('退出全屏');
        this.isscreen = false;
        if (this.othedivshow) {
          this.oheight = '270px';
        } else {
          this.oheight = '200px';
        }
        const transformid_ = document.getElementById('transformid');
        let style = 'width:' + width + 'px;';
        style += 'height: 200px;';
        transformid_.style.cssText = style;
        this.transform = 'rotate(0deg)';
        // this.vwidth = height;
        console.log(height);
        this.vheight = `200px`;
        this.vwidth = `${width}px`;
        this.lheight = `200px`;
        this.rheight = `200px`;

        this.btop = `167px`;
        this.bright = `10px`;
        if (this.othedivshow) {
          const othediv_ = document.getElementById('othediv');
          let styleothe = 'width:' + width + 'px;';
          styleothe += 'height:' + 70 + 'px;';
          // // 注意旋转中点的处理
          othediv_.style.cssText = styleothe;
          this.otheheight = '70px';
          this.othewidth = '20%';
          const ppp_ = `${width - 70}px`;
          this.othepadding = '200px 0 0 0';
        }
      }
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    roomname() {
      return this.$route.query.roomname;
    },
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.video {
  top: 0;
  left: 0;
  width: 100%;
}
.content {
  padding: 10px;
}
.info {
  .title {
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
  }
  .num {
    padding: 10px 0;
    font-size: 16px;
  }
  .advert {
    background: #fff;
    padding: 10px;
  }
  .chat {
    min-height: 280px;
    max-height: 300px;
    overflow-y: auto;
    padding: 0 0 50px 0;
    .chatInfo {
      .list {
        margin: 10px 0 10px 0;
        span:first-child {
          float: left;
          width: 17%;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          // font-weight: bold;
        }
        span:last-child {
          float: right;
          width: 82%;
        }
      }
    }
  }
  .submit {
    width: 100%;
    position: absolute;
    bottom: 0px;
    .el-button {
      width: 100%;
      padding: 20px 0;
    }
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 120px;
  text-align: center;
  background-color: #39a9ed;
}
/deep/.video-js {
  height: 190px !important;
  border-radius: 10px;
}
.look-video-left {
  float: left;
  background: #000;
  grid-area: 1/1/3/4;
  justify-content: flex-end;
}
.look-video-right {
  float: right;
  background: #000;
  grid-area: 1/1/3/4;
  justify-content: flex-end;
}
.othe-video-left {
  float: left;
  background: #000;
  grid-area: 1/1/3/4;
  justify-content: flex-end;
}
.wrapper {
  background: #000;
  position: absolute;
  width: 100%;
}
.van-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.7);
}
.videoBtn {
  z-index: 999;
  position: absolute;
}
.userList {
  height: 300px;
  min-height: 300px;
  overflow-y: auto;
  padding: 0 10px;
  margin: 0 0 10px 0;
}
.questpopup {
  padding: 10px 10px;
}
.questpopup div {
  padding: 8px 0 0 5px;
}
.questtitle {
  padding: 8px 0 0 5px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
.questbtn {
  text-align: center;
  padding: 10px 0 15px 0;
}
/deep/.van-cell {
  padding: 25px 16px;
  font-size: 16px;
}
</style>