<template>
  <!-- :style="{'height':height+'px'}" -->
  <!-- style="height:600px" -->
  <!--   -->
  <div class="container" refs="message" id="targetbox">
    <div class="sharetop flextwo" @click="back">
      <div class="leftrow">
        <img src="../../../assets/leftrow.png" alt />
      </div>
      <div class="sharemiddle">{{ coursetitle }}</div>
      <div class="sharebtn" @click.stop="collect">
        {{ is_favorite }}
        <img src="../../../assets/starkong.png" v-if="is_favorite == 0" alt />
        <img src="../../../assets/star.png" v-else alt />
      </div>
    </div>

    <div class="nodata" v-if="recordlist.length == 0">暂无聊天记录</div>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      class="messagelist"
      style="height: 100%"
      id="messagebox"
      v-else
    >
      <!-- <div v-clipboard:copy="serverId" v-clipboard:success="onCopy">复制</div> -->
      <!-- <p>刷新次数: {{ count }}</p> -->

      <!-- <div class="wifi-symbol">
        <div class="wifi-circle first"></div>
        <div class="wifi-circle second"></div>
        <div class="wifi-circle third"></div>
      </div>-->
      <!-- <div class="voice">
        <div class="bg voicePlay"></div>
      </div>-->

      <div>
        <div v-for="(item, index) in recordlist" :key="index">
          <div class="messageitem flex" v-if="item.user_id != user_id">
            <div class="messageitemleft">
              <img :src="item.avatar" alt />
            </div>
            <div class="messageitemright" v-if="item.type == 1">
              <div class="messagecontent">{{ item.data }}</div>
            </div>

            <div
              class="messageitemright imgright"
              v-if="item.type == 2"
              @click="previewimg(item.data)"
            >
              <div class="messagecontent">
                <div class="contentimg">
                  <img :src="item.data" alt />
                </div>
              </div>
            </div>

            <div class="messageitemright" v-if="item.type == 3">
              <div
                class="messagecontent"
                :style="{ width: 1.7 + 'rem' }"
                v-if="item.times > 0 && item.times < 5"
                @click="audioplay(item, index)"
              >
                <div class="voice">
                  <div
                    class="bg"
                    :class="item.sel == true ? 'voicePlay' : ''"
                  ></div>
                  <div class="miaoshuk">{{ item.times }}'</div>
                </div>
              </div>
              <div
                class="messagecontent"
                :style="{ width: 2 + 'rem' }"
                v-if="item.times >= 5 && item.times < 15"
                @click="audioplay(item, index)"
              >
                <div class="voice">
                  <div
                    class="bg"
                    :class="item.sel == true ? 'voicePlay' : ''"
                  ></div>
                  <div class="miaoshuk">{{ item.times }}'</div>
                </div>
              </div>
              <div
                class="messagecontent"
                :style="{ width: 4.5 + 'rem' }"
                v-if="item.times >= 15"
                @click="audioplay(item, index)"
              >
                <div class="voice">
                  <div
                    class="bg"
                    :class="item.sel == true ? 'voicePlay' : ''"
                  ></div>
                  <div class="miaoshuk">{{ item.times }}'</div>
                </div>
              </div>
            </div>
          </div>

          <div
            class="messageitem messageitemk flex"
            v-if="item.user_id == user_id"
            :id="item.idkk"
          >
            <div class="messageitemrightk" v-if="item.type == 1">
              <div class="messagecontentk">{{ item.data }}</div>
            </div>

            <div
              class="messageitemrightk"
              v-if="item.type == 2"
              @click="previewimg(item.data)"
            >
              <div class="messagecontentk">
                <div class="contentimg">
                  <img :src="item.data" alt />
                </div>
              </div>
            </div>
            <!--  v-clipboard:copy="that.serverId"
            v-clipboard:success="onCopy"-->
            <div class="messageitemrightk" v-if="item.type == 3">
              <div
                class="messagecontentk yuyink"
                :style="{ width: 1 + 'rem' }"
                v-if="item.times > 0 && item.times < 5"
                @click="audioplay(item, index)"
              >
                <div class="voice voiceright">
                  <div
                    class="bg"
                    :class="item.sel == true ? 'voicePlay' : ''"
                  ></div>
                  <div class="miaoshu">{{ item.times }}'</div>
                </div>
              </div>
              <div
                class="messagecontentk yuyink"
                :style="{ width: 2 + 'rem' }"
                v-if="item.times >= 5 && item.times < 15"
                @click="audioplay(item, index)"
              >
                <div class="voice voiceright">
                  <div
                    class="bg"
                    :class="item.sel == true ? 'voicePlay' : ''"
                  ></div>
                  <div class="miaoshu">{{ item.times }}'</div>
                </div>
              </div>
              <div
                class="messagecontentk yuyink"
                :style="{ width: 4.5 + 'rem' }"
                v-if="item.times >= 15"
                @click="audioplay(item, index)"
              >
                <div class="voice voiceright">
                  <div
                    class="bg"
                    :class="item.sel == true ? 'voicePlay' : ''"
                  ></div>
                  <div class="miaoshu">{{ item.times }}'</div>
                </div>
              </div>
            </div>

            <div class="messageitemleftk">
              <img :src="item.avatar" alt />
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>

    <!-- 底部导航 -->

    <!-- <div class="messagebot messagebotkk flexone" v-if="is_self == 0 && isbot == true">
      <div class="messagebotleft">
        <img src="../../../assets/yuyin.png" alt />
      </div>
      <div class="writermessage">
        <input type="text" placeholder="写留言" @input="entertext" :value="text" />
      </div>
      <div class="sendk" @click="send">发送</div>
    </div>
    <div v-if="is_self == 1">
      <div class="messagebot messagebotkk flexone" v-if="sendword">
        <div class="messagebotleft" @click="changeword">
          <img src="../../../assets/yuyin.png" alt />
        </div>
        <div class="writermessage">
          <input type="text" placeholder="写留言" @input="entertext" :value="text" />
        </div>
        <div class="sendk" @click="send">发送</div>
      </div>
      <div class="messagebot messagebotk flextwo" v-else>
        <img src="../../../assets/yuyin.png" alt class="zhibobtn" @click="changeword" />
        <img src="../../../assets/pic.png" alt class="zhibobtn" @click="choseimg" />
        <img src="../../../assets/luyin.png" alt class="yuyinbtn" @click="yuyin" />
        <img src="../../../assets/shangchuan.png" alt class="zhibobtn" />
        <img src="../../../assets/kaiguan.png" alt class="zhibobtn" @click="stopbtn" />
      </div>
    </div>
    <div class="manypeople">
      <img src="../../../assets/manypeople.png" alt class="manypeopleimg" />
      {{ group_count }}
    </div>-->

    <!-- 直播结束了 -->
    <!-- <div class="register" v-if="iszhibo">
      <div class="zhiboover">
        <div class="zhibovoertop">本次直播内容同步保存到录播</div>
        <div class="zhiboque" @click="overvideo">同步到录音并结束</div>
      </div>
    </div>
    <div class="register" v-if="showtips">
      <div class="zhiboover">
        <div class="zhibovoertop">来早了，还没到开课时间</div>
        <div class="zhiboque" @click="suretips">确定</div>
      </div>
    </div>-->

    <!-- 上传成功 -->
    <div class="register" v-if="issuccess">
      <div class="zhiboover">
        <div class="zhibovoertop">
          <img src="../../../assets/upsuccess.png" alt class="successimg" />
          <div class="successname">上传成功</div>
        </div>
        <div class="zhiboque" @click="sureup">确认</div>
      </div>
    </div>
    <!-- 开始录制 -->
    <div class="register" style="z-index: 999" v-if="beginlushow" @click="hide">
      <div class="luwrap" @click.stop="beginluyin">
        <div class="beginlu">开始录制</div>
        <div>
          <img src="../../../assets/beginlu.png" alt class="beginluimg" />
        </div>
      </div>
    </div>

    <!-- 正在录制 -->
    <div class="register" style="z-index: 999" v-if="zhengzailu" @click="hide">
      <div class="luwrap" @click.stop="finishluyin">
        <div class="beginlu">正在录音：{{ time }}'</div>
        <div>
          <img src="../../../assets/zhengzailu.png" alt class="beginluimg" />
        </div>
      </div>
    </div>

    <!-- 录制完成 -->
    <div class="register" style="z-index: 999" v-if="luprocess" @click="hide">
      <div class="luwrap">
        <div class="beginlu">录音时长：{{ time }}'</div>
        <div class="flextwo chonglu">
          <div class="relu" @click="resetlu">重录</div>
          <div class="send" @click.stop="sendyuyin">发送</div>
          <div class="relu" @click.stop="shiting">试听</div>
        </div>
      </div>
    </div>

    <!-- 温馨提示 -->
    <div class="register" style="z-index: 999" v-if="chonglushow">
      <div class="wentipswrap">
        <div class="tipsname">温馨提示</div>
        <div class="waittips">您确认舍弃该录音重新录制吗</div>
        <div class="waitbot flexone">
          <div class="waitbotleft">取消</div>
          <div class="waitbotlright">重录</div>
        </div>
      </div>
    </div>
    <!-- 本次录音是否上传 -->

    <div class="register" style="z-index: 999" v-if="shanghcuanshow">
      <div class="wentipswrap">
        <div class="waittips benci">本次录音是否上传</div>
        <div class="waitbot flexone">
          <div class="waitbotleft" @click="hideshangchuan">直接结束</div>
          <div class="waitbotlright" @click="shangyuyin">上传录音</div>
        </div>
      </div>
    </div>

    <!-- 是否结束录播 -->
    <div class="register" style="z-index: 999" v-if="overzhibo">
      <div class="wentipswrap">
        <div class="waittips benci">是否结束直播</div>
        <div class="waitbot flexone">
          <div class="waitbotleft" @click="canclesure">取消</div>
          <div class="waitbotlright" @click="surezhibo">结束</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wx from "jweixin-1.6.0";
import Vue from "vue";
import { PullRefresh, Toast } from "vant";
Vue.use(PullRefresh);
Vue.use(Toast);
var timer = null;
export default {
  data() {
    return {
      iszhibo: false,
      issuccess: false,
      beginlushow: false,
      luprocess: false,
      chonglushow: false,
      shanghcuanshow: false,
      zhengzailu: false,
      overzhibo: false,
      id: "",
      is_self: "",
      user_id: "",
      showtips: false,
      sendword: false,
      text: "",
      isbot: false,
      time: 1,
      localId: "",
      serverId: "",
      number: 0,
      group_count: "",
      // 直播列表
      page: 1,
      this_page: '',
      total_page: '',
      isLoading: false,
      recordlist: [],
      baseurl: "",
      height: '',
      hei: '600px',
      target: '',
      yuyintype: '',
      stopurl: '',
      stopindex: 0,
      coursetitle: "",
      playlocalid: '',
      is_favorite: 0
    };
  },
  created() {

    // 获取个人中心
    this.getuserinfo()
    // alert(location.host)
    this.baseurl = 'http://' + location.host
    let div = this.$refs["message-list"];

    // alert(1111)
    // alert(this.baseurl+
    //       "/redirect.html?shareRedirect=" +
    //       encodeURIComponent(window.location.href))
    document.title = "唐元集公众号";
    this.id = this.$route.query.id;
    // 获取appid
    this.getappid();
    this.getlubodetail();
    this.initWebSocket();
    // 获取直播列表
    this.getzhibolist()

  },
  mounted() {

    let that = this


    console.log(that.target, '99997878666')
  },


  watch: {

  },
  beforeRouteEnter(to, from, next) {
    var u = navigator.userAgent;
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    // XXX: 修复iOS版微信HTML5 History兼容性问题
    if (isiOS && to.path !== location.pathname) {
      // 此处不可使用location.replace
      location.assign(to.fullPath);
    } else {
      next();
    }
  },
  methods: {

    //获取个人中心
    getuserinfo() {
      let that = this;

      var url = "/api/user/index";
      let param = {

      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.user_id = res.data.id


        })
        .catch(function (err) {


        });
    },

    // 列表自动滚到到底部
    toBottom() {
      // let listContainer = document.getElementById('messagebox')
      let div = this.$refs["message-list"];
      console.log(div.scrollHeight, 8887766543)
      console.log(div.style.height, 9999)

      this.height = div.clientHeight

      div.scrollTop = div.scrollHeight
      // let height = div.offsetHeight
      // console.log(height, 9999888888)
      // const listContainer = this.$refs["message-list"];
      // console.log(listContainer, '9999887766543434334345454')
      // listContainer.scrollTop = height;
      // this.$forceUpdate()
    },
    // 视频上拉加载
    onLoad() {
      let that = this;
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        console.log(3434);

        let newpage = that.page;
        newpage++;
        that.page = newpage;
        console.log(that.page);
        that.getzhibolist();

        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (that.this_page == that.total_page) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      let that = this;
      setTimeout(() => {
        this.isLoading = false;
        // Toast('刷新成功');
        if (that.this_page != that.total_page) {
          let newpage = that.page;
          newpage++;
          that.page = newpage;
          console.log(that.page);
          that.getzhibolist();
        }

      }, 1000);
    },

    // 获取appid
    getappid() {
      let that = this;
      console.log(34734894890);
      let urlk = window.location.href;
      var url = "/api/user/wechat_jssdk";
      let param = {
        url: urlk
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          wx.config({
            debug: false,
            appId: res.data.jssdk.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
            timestamp: res.data.jssdk.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.jssdk.nonceStr, // 必填，生成签名的随机串
            signature: res.data.jssdk.signature, // 必填，签名，见附录1
            //需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间
            jsApiList: [
              "startRecord",
              "stopRecord",
              "playVoice",
              "uploadVoice",
              "playVoice",
              "downloadVoice",
              "stopVoice",
              "chooseImage",
              "uploadImage",
              "updateAppMessageShareData",
              "updateTimelineShareData",
              "previewImage"
            ]
          });

          that.sharetofriend()
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    // 分享给朋友
    sharetofriend() {

      var that = this;
      // 处理验证失败的信息
      wx.error(function (res) {
        logUtil.printLog("验证失败返回的信息:", res);
      });
      // 处理验证成功的信息
      wx.ready(function () {


        //       alert(window.location.href.split('#')[0]);
        // var share_title = that.sharemsg.title;
        // if (share_title.indexOf("${title}") >= 0) {
        //   share_title = share_title.replace(
        //     "${title}",
        //     that.details.details.title
        //   );
        // }
        // var share_desc = that.sharemsg.content;
        // if (share_desc.indexOf("${title}") >= 0) {
        //   share_desc = share_desc.replace(
        //     "${title}",
        //     that.details.details.title
        //   );
        // }
        // if (share_desc.indexOf("${text}") >= 0) {
        //   share_desc = share_desc.replace("${text}", that.details.details.text);
        // }
        // 分享到朋友圈
        wx.updateTimelineShareData({
          title: '分享', // 分享标题
          link: that.baseurl +
            "/redirect.html?shareRedirect=" +
            encodeURIComponent(window.location.href), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: 'http://tangyuanji.t.brotop.cn/uploads/20200804/fcabfaf5aa3c856ced04703b0a78a467.png',

          // imgUrl: that.details.details.img
          //   ? that.details.details.img
          //   : that.sharemsg.img,

          // 分享图标
          //  desc: that.sharemsg.content,
          success: function (res) {
            // 用户确认分享后执行的回调函数
            console.log("suss");
            logUtil.printLog("分享到朋友圈成功返回的信息为:", res);
            that.showMsg("分享成功!");
          },
          cancel: function (res) {
            // 用户取消分享后执行的回调函数
            console.log("err");
            logUtil.printLog("取消分享到朋友圈返回的信息为:", res);
          }
        }),
          // 分享给朋友
          wx.updateAppMessageShareData({
            title: '分享', // 分享标题
            desc: '分享', // 分享描述
            link:
              that.baseurl +
              "/redirect.html?shareRedirect=" +
              encodeURIComponent(window.location.href), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://tangyuanji.t.brotop.cn/uploads/20200804/fcabfaf5aa3c856ced04703b0a78a467.png',

            // imgUrl: that.details.details.img
            //   ? that.details.details.img
            //   : that.sharemsg.img, 
            // 分享图标
            type: "", // 分享类型,music、video或link，不填默认为link
            dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
            success: function (res) {
              // 用户确认分享后执行的回调函数
              logUtil.printLog("分享给朋友成功返回的信息为:", res);
            },
            cancel: function (res) {
              // 用户取消分享后执行的回调函数
              logUtil.printLog("取消分享给朋友返回的信息为:", res);
            }
          });
      });
    },

    // 上传图片
    choseimg() {
      let that = this
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

          wx.uploadImage({
            localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
              var serverId = res.serverId; // 返回图片的服务器端ID
              that.serverId = res.serverId;
              that.upload()
            }
          });
        }
      });
    },

    upload() {
      let that = this;
      console.log(34734894890)

      var url = "/api/user/upload_media";
      let param = {
        type: 1,
        media_id: that.serverId
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.videourl = res.data.media;
          let objdata = {
            lesson_id: that.id,
            type: 2,
            user_id: that.user_id,
            times: 0,
            data: that.videourl
          };
          objdata = JSON.stringify(objdata);
          // alert(objdata);
          that.websocketsend(objdata);
          // alert(that.videourl)

        })
        .catch(function (err) {

          console.log(err);
        });
    },
    // 预览图片
    previewimg(url) {

      let arr = [];
      arr.push(url)
      wx.previewImage({
        current: url, // 当前显示图片的http链接
        urls: arr// 需要预览的图片http链接列表
      });
    },
    // 隐藏遮罩层
    hide() {
      this.beginlushow = false;
      this.zhengzailu = false;
      this.luprocess = false;
      wx.pauseVoice({
        localId: that.localId // 需要暂停的音频的本地ID，由stopRecord接口获得
      });
    },
    // 返回上一页
    back() {
      this.$router.go(-1);
    },
    overvideo() {
      this.iszhibo = false;
    },
    sureup() {
      this.issuccess = false;
    },
    // 隐藏来早了还没开课
    suretips() {
      // this.$router.go(-1)
      this.showtips = false;
    },
    // 切换语音发送还是文字发送
    changeword() {
      this.sendword = !this.sendword;
      console.log(this.sendword);
    },

    // 输入文字
    entertext(e) {
      this.text = e.target.value;
    },
    // 开始录制
    yuyin() {
      this.beginlushow = true;
      this.yuyintype = 1
    },

    // 开始录音
    beginluyin() {
      console.log(83434898989);
      let that = this;
      that.beginlushow = false;
      that.zhengzailu = true;
      let time = 0;
      timer = setInterval(() => {
        time++;
        that.time = time;
        console.log(that.time);
      }, 1000);
      wx.startRecord({
        success: function (res) {
          // alert(JSON.stringify(res))
          consoel.log(res, 99977775655);
          // alert('成功调起录音')
          // that.timer = setInterval(() => {
          //   time++;
          //   that.time = time
          // }, 1000)
          // that.vicoeEnd()
        },
        cancel: function () {
          // alert("用户拒绝授权录音");
        }
      });
    },

    // 完成录音
    finishluyin() {
      let that = this;
      this.zhengzailu = false;
      this.luprocess = true;

      clearInterval(timer);

      wx.stopRecord({
        success: function (res) {
          var localId = res.localId;
          that.localId = res.localId;
          that.upyuyin();
        }
      });
    },
    // 试听录音
    shiting() {
      wx.playVoice({
        localId: this.localId // 需要播放的音频的本地ID，由stopRecord接口获得
      });
    },
    // 结束本次上传
    hideshangchuan() {
      this.shanghcuanshow = false
    },
    // 发送语音
    sendyuyin() {
      this.shanghcuanshow = true
    },
    shangyuyin() {
      let that = this;


      this.shanghcuanshow = false
      that.luprocess = false;
      this.issuccess = true
      let objdata = {
        lesson_id: this.id,
        type: 3,
        user_id: this.user_id,
        times: that.time,
        data: that.serverId
      };
      objdata = JSON.stringify(objdata);
      // alert(objdata);
      that.websocketsend(objdata);
    },
    // 上传语音到后台
    upyuyin() {
      let that = this;
      wx.uploadVoice({
        localId: that.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: function (res) {
          var serverId = res.serverId; // 返回音频的服务器端ID
          that.serverId = res.serverId;
          // alert(that.serverId);
          // that.upload()
        }
      });
    },

    // 重录
    resetlu() {
      this.time = 0;
      this.luprocess = false;
      this.beginlushow = true;
      clearInterval(this.timer);
    },
    // 停止直播
    stopbtn() {
      this.overzhibo = true

    },
    canclesure() {
      this.overzhibo = false
    },
    surezhibo() {
      let that = this;
      that.overzhibo = false
      let objdata = {
        lesson_id: this.id,
        type: 3,
        user_id: this.user_id,
        times: that.time,
        data: '', is_end: 1
      };
      objdata = JSON.stringify(objdata);
      // alert(objdata);
      this.websocketsend(objdata);

    },

    // 获取录播详情
    getlubodetail() {
      let that = this;
      console.log(34734894890);
      var url = "/api/user/lesson_detail";
      let param = {
        lesson_id: that.id
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.is_self = res.data.lesson.is_self;
          that.coursetitle = res.data.lesson.title;
          that.is_favorite = res.data.lesson.is_favorite;
          // that.user_id = res.data.lesson.user_id;
          let duration = res.data.lesson.duration;
          if (that.is_self == 0) {
            if (duration != 0) {
              that.showtips = true;
              that.isbot = false;
            }
          }

          timer = setInterval(() => {
            duration = duration - 1;

            if (duration <= 0) {
              that.showtips = false;
              that.isbot = true;
              clearInterval(timer);
            }
          }, 1000);
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    collect() {
      let that = this;
      var url = "/api/user/favorite";
      let param = {
        type: 4,
        favorite_id: that.id
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          if (that.is_favorite == false) {
            that.is_favorite = true;
            Toast("收藏成功");
          } else {
            that.is_favorite = false;
            Toast("取消收藏成功");
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    // 链接websocket
    initWebSocket() {
      //初始化weosocket
      // const wsuri = "ws://tangyuanji.t.brotop.cn:11001";
      this.websock = new WebSocket("ws://tangyuanji.t.brotop.cn:11001");
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      console.log("连接成功");
    },
    websocketonerror() {
      //连接建立失败重连
      this.initWebSocket();
    },
    websocketonmessage(e) {

      //数据接收
      let that = this;

      if (this.number == 0) {
        let obj = { lesson_id: this.id, user_id: this.user_id, is_group: 1, first: 1 };
        obj = JSON.stringify(obj);
        console.log(obj);
        this.websocketsend(obj);

        // let data=e.
      }
      this.number = this.number + 1;
      this.number = this.number;
      let datak = e.data
      console.log(e, 88890999);
      console.log(e.data)
      // alert(e.data)
      // alert(e.data.first)
      let data = JSON.parse(e.data);
      // alert(data)
      console.log(data)
      that.group_count = data.group_count;
      // 接收数据重新渲染列表
      if (data.lesson_id != undefined) {
        const redata = JSON.parse(e.data);

        that.group_count = redata.group_count;
        if (redata.code == 0) {
          Toast(redata.msg)
        } else if (redata.code == 1) {
          that.recordlist.push(redata);
          that.recordlist = that.recordlist;
          that.$forceUpdate();
          console.log(that.recordlist)

        }




      }
    },
    websocketsend(Data) {
      //数据发送
      console.log(99999);
      this.websock.send(Data);
    },
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
    },
    // 获取直播列表
    getzhibolist() {
      let that = this;
      console.log(34734894890)
      var url = "/api/user/lesson_chat_record";
      let param = {
        lesson_id: that.id,
        page: that.page
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res, '直播列表');
          if (that.page == 1) {
            //  页面滚动到某一个位置
            let len = res.data.record.length;
            len = len - 1
            res.data.record.forEach(function (value, index, array) {
              if (index == len) {
                value.idkk = 'targetboxk'
                that.$nextTick(() => {
                  setTimeout(() => {
                    let targetbox = document.getElementById('targetboxk');
                    that.target = targetbox.offsetTop;
                    document.body.scrollTop = that.target;
                    document.getElementById('targetbox').scrollTop = that.target

                  })
                })
              }

            })
          }

          // 拼接数组倒叙
          var arr = [...res.data.record, ...that.recordlist];
          that.recordlist = arr
          that.recordlist.forEach(function (value, index, array) {
            value.sel = false
          })
          that.recordlist = that.recordlist
          that.this_page = res.data.this_page
          that.total_page = res.data.total_page;

        })
        .catch(function (err) {
          console.log(err);
        });

    },
    audioplay(item, index) {
      let that = this;
      console.log(item)
      // 播放某一个语音

      // that.recordlist[index].sel = !that.recordlist[index].sel;

      that.recordlist.forEach(function (value, indexk, array) {
        if (index == indexk) {

          that.recordlist[indexk].sel = !that.recordlist[indexk].sel;
        } else {
          that.recordlist[indexk].sel = false
        }
      })

      that.recordlist = that.recordlist;

      that.$forceUpdate();
      console.log(that.recordlist)

      if (this.recordlist[index].sel == true) {
        // 开始播放
        let localId = ''
        wx.downloadVoice({
          serverId: item.data, // 需要下载的音频的服务器端ID，由uploadVoice接口获得
          isShowProgressTips: 1, // 默认为1，显示进度提示
          success: function (res) {

            localId = res.localId; // 返回音频的本地ID
            that.playlocalid = localId;
            that.recordlist[index].localId = localId;
            that.recordlist = that.recordlist;
            that.$forceUpdate()

            wx.playVoice({
              localId: localId // 需要播放的音频的本地ID，由stopRecord接口获得
            })
          }

        });

      } else if (this.recordlist[index].sel == false) {
        // 停止播放
        wx.stopVoice({
          localId: that.playlocalid // 需要暂停的音频的本地ID，由stopRecord接口获得
        });
      }
      // 监听播放停止播放下一个
      wx.onVoicePlayEnd({
        success: function (res) {
          var localId = res.localId; // 返回音频的本地ID

          that.recordlist.forEach(function (value, index, array) {
            if (localId == value.localId) {
              value.sel = false
            }

          })
          that.recordlist = that.recordlist

          that.$forceUpdate();

          index = index + 1;

          if (that.recordlist[index].data != undefined) {
            if (that.recordlist[index].type == 3) {
              that.recordlist[index].sel = true
              wx.downloadVoice({
                serverId: that.recordlist[index].data, // 需要下载的音频的服务器端ID，由uploadVoice接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res) {
                  let localId = res.localId; // 返回音频的本地ID
                  that.recordlist[index].localId = localId;
                  that.recordlist[index].sel = true;
                  that.recordlist = that.recordlist;
                  that.$forceUpdate()
                  wx.playVoice({
                    localId: localId // 需要暂停的音频的本地ID，由stopRecord接口获得
                  });


                }
              });
            }
          }
          that.recordlist = that.recordlist;
          that.$forceUpdate()

        }
      });

    },
    // 发送文字
    send() {
      // var ws = new WebSocket("ws://tangyuanji.t.brotop.cn:11001");
      let objdata = {
        lesson_id: this.id,
        type: 1,
        user_id: this.user_id,
        times: 0,
        data: this.text
      };
      console.log(objdata)
      objdata = JSON.stringify(objdata);
      // alert(objdata)
      this.websocketsend(objdata);
      this.text = ''
      // ws.send(objdata);
    }
  }
};
</script>

<style scoped>
/* 34348989 */

/* 45548548 */
.container {
  overflow: auto;
}
.sendk {
  width: 1.14rem;
  height: 0.6rem;
  background: #599158;
  border-radius: 0.04rem;
  color: #fff;
  font-size: 0.32rem;
  text-align: center;
  line-height: 0.6rem;
  margin-left: 0.16rem;
}
.waitbot {
  border-top: 1px solid #f5f5f5;
  margin-top: 0.48rem;
}
.waitbotlright {
  width: 3.1rem;
  height: 0.96rem;

  text-align: center;
  color: #579057;
  font-size: 0.32rem;
  line-height: 0.96rem;
}
.waitbotleft {
  width: 3.1rem;
  height: 0.96rem;
  border-right: 1px solid #f5f5f5;
  text-align: center;
  color: #323233;
  font-size: 0.32rem;
  line-height: 0.96rem;
}
/* 温馨提示 */
.waittips {
  color: #7d7e80;
  font-size: 0.28rem;
  text-align: center;
  margin-top: 0.16rem;
}
.tipsname {
  color: #323233;
  font-size: 0.32rem;
  font-weight: bold;
  text-align: center;
  margin-top: 0.48rem;
  text-align: center;
}
.benci {
  margin-top: 0.68rem;
}
.wentipswrap {
  width: 6.22rem;

  background: #ffffff;
  border-radius: 0.08rem 0.08rem 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.chonglu {
  padding: 0 0.84rem;
  box-sizing: border-box;
  margin-top: 0.2rem;
}
.relu {
  width: 1.04rem;
  height: 1.04rem;
  border: 1px solid #72a970;
  /* box-shadow: 0 0.04rem 0.36rem 0 rgba(125, 178, 121, 0.56); */
  color: #5c945c;
  font-size: 0.32rem;
  text-align: center;
  line-height: 1.04rem;
  border-radius: 50%;
}
.send {
  width: 1.6rem;
  height: 1.6rem;
  background: linear-gradient(135deg, #87bd87 1%, #4a834a);
  box-shadow: 0 0.04rem 0.36rem 0 rgba(125, 178, 121, 0.56);
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.4rem;
  text-align: center;
  line-height: 1.6rem;
}
.beginlu {
  color: #323233;
  font-size: 0.28rem;
  text-align: center;
}
.beginluimg {
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0;
  margin-top: 0.16rem;
}
.luwrap {
  padding: 0.4rem 0;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  z-index: 99999;
}
.successname {
  color: #7d7e80;
  font-size: 0.28rem;
  margin-top: 0.16rem;
  text-align: center;
}
.successimg {
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0;
}
.zhiboover {
  width: 6.22rem;

  background: #ffffff;
  border-radius: 0.08rem 0.08rem 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.zhibovoertop {
  padding: 0.48rem 0;
  box-sizing: border-box;
  border-bottom: 1px solid #f5f5f5;
  color: #323233;
  font-size: 0.28rem;
  text-align: center;
}
.zhiboque {
  color: #599158;
  font-size: 0.32rem;
  text-align: center;
  padding: 0.24rem 0;
  box-sizing: border-box;
}
.messagebot {
  background: #fff;
  padding: 0 0.72rem;
  box-sizing: border-box;
}
.messagebotk {
  padding: 0.16rem 0.72rem;
  box-sizing: border-box;
}
.messagebotkk {
  padding: 0 0.32rem;
  box-sizing: border-box;
}
.zhibobtn {
  width: 0.56rem;
  height: 0.56rem;
  font-size: 0;
}
.yuyinbtn {
  width: 0.84rem;
  height: 0.84rem;
  font-size: 0;
}
.manypeople {
  padding: 0.14rem 0.4rem;
  color: #868686;
  font-size: 0.28rem;
  box-sizing: border-box;
  opacity: 0.74;
  background: #f7f7f7;
  border-radius: 0.4rem;
  box-shadow: 0 0.16rem 0.3rem 0 rgba(142, 190, 142, 0.33);
  position: fixed;
  bottom: 1.2rem;
  right: 0.32rem;
  z-index: 9;
}
.manypeopleimg {
  width: 0.32rem;
  height: 0.28rem;
  font-size: 0;
}
.messagelist {
  /* height: 15rem; */
  /* padding-bottom: 1.5rem; */
}
.contentimg {
  width: 4.15rem;
  height: 2.95rem;
  font-size: 0;
}
.contentimg {
  widows: 100%;
  height: 100%;
}
.yuyink {
  display: flex;
  justify-content: flex-end;
}
.sharetop {
  z-index: 999;
}
.messagecontent {
  /* background: #999; */
}

/* 语音聊天 */
.voice {
  /* padding-top: 12px;
  padding-left: 10px; */
  /* margin: 100px auto; */
  /* height: 35px;
  width: 150px; */
  /* background: #87bd87; */
  background: #fff;
  border-radius: 0 7px 7px;
  color: #333;
  position: relative;
}
.voiceright {
  transform: rotate(-180deg);
}
.miaoshu {
  position: absolute;
  left: 0.6rem;
  bottom: 0.15rem;
  font-size: 0.22rem;

  transform: rotate(180deg);
}
.miaoshuk {
  position: absolute;
  left: 0.55rem;
  bottom: 0.12rem;
  font-size: 0.12rem;
}
.bg {
  /* background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzlFRDZDRDNENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzlFRDZDRDJENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTAxQkEzQ0RENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTAxQkEzQ0VENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4K4iKVAAACUUlEQVR42uSazytEURTHvTHjR4kaU8xsSDZSdmbjx4oSK8XGQrJlpSwYTSmxEWWhUIpsZK3kD7DRNBuSBZFCNjZ+JPKcV6ecXu/d3sy7595bc+vbfXPue5/749z77o83lm3bZYYFC8RZqAbQAigP2tXNj5aZF7gdkAZNk9+7WvnOCCgxRUCb9n/o1sk3pUH6QDHF/GNsoM+QeYfiy6qkFeLZDBb0GlTB4AAR/xXT9nXxZVa0WCekQd9Y0HOJjg3CHySviiZmfjO3AyIhnu0gBc0wjAIR/wLtW8z87aAOWAI9gqaYRoAff4ZUoi7EKCiUP462j4CdSCrfK4N1Ahpi6I0i/hPa50M4oFB+Dbm/SzXfL5MD4rUogxP8+Itozynm59E+q5ovyuQdHxphWh568XvR5kxq1SEn40L4e0XMA1L4EcEe7RTjLqYdqRf/gezQUwr5LxjXq+aLHPCFcTmTA7z4tutIQhXfLiJPKXyRA/oxzgW8v9DgxU+S62eF/ATGr6r5fg26Corj9RHD4Z0fvwfjS9CbQn4bxrfK+R6TyzxZNk260solTL4i/g3al10TsMXIryA72T7VfK8MnJO8X9CKy14lafXjxx8jFUsSeyUzfxhtPwHPoqTy/TJJMJzJiPgNpJdsuNJizPwztB/q4JtwHN2KW3sn3HuMOouR30l6bbsOvgkOyGIBnaPbRldalJl/h2knuvgmOKAWNAFKMUz4Iv4O6Z1xXXxTPxtazHy6khnVyS/Fb8IDpHGyuvmWgX9L4Q4toDnQFWhNN/9PgAEAR4w1ULjdCbEAAAAASUVORK5CYII=)
    right 0 no-repeat; */
  background: url(http://tangyuanji.t.brotop.cn/assets/images/media_icon.png)
    no-repeat center;
  width: 24px;
  height: 24px;
  background-size: 100%;
}

.voicePlay {
  animation-name: voicePlay;
  animation-duration: 1.2s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: steps(3);
  /* animation: fadeInOut 1s infinite 0.4s; */
}

@keyframes voicePlay {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

/* @keyframes voicePlay {
  0% {
    background-position: 0;
  }
  100% {
    background-position: -200%;
  }
} */

.box {
  width: 1.2rem;
  height: 1.2rem;
  box-sizing: border-box;
  position: relative;
  margin: 0.5rem auto;
}

.wifi-symbol {
  width: 0.5rem;
  height: 0.5rem;
  box-sizing: border-box;
  overflow: hidden;
  transform: rotate(135deg);
}

.wifi-circle {
  border: 0.03rem solid #999999;
  border-radius: 50%;
  position: absolute;
}

.first {
  width: 0.05rem;
  height: 0.05rem;
  background: #cccccc;
  top: 0.45rem;
  left: 0.45rem;
}

.second {
  width: 0.25rem;
  height: 0.25rem;
  top: 0.35rem;
  left: 0.35rem;
  animation: fadeInOut 1s infinite 0.2s;
}

.third {
  width: 0.4rem;
  height: 0.4rem;
  top: 0.25rem;
  left: 0.25rem;
  animation: fadeInOut 1s infinite 0.4s;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    /*初始状态 透明度为0*/
  }

  100% {
    opacity: 1;
    /*结尾状态 透明度为1*/
  }
}
/* 
.box {
  width: 1.2rem;
  height: 1.2rem;
  box-sizing: border-box;
  position: relative;
  margin: 0.05rem auto;
}

.wifi-symbol {
  width: 0.05rem;
  height: 0.05rem;
  box-sizing: border-box;
  overflow: hidden;
  transform: rotate(135deg);
}
.wifi-symbolk {
  transform: rotate(315deg);
}

.wifi-circle {
  border: 0.05rem solid #999999;
  border-radius: 50%;
  position: absolute;
}

.first {
  width: 0.05rem;
  height: 0.05rem;
  background: #cccccc;
  top: 0.45rem;
  left: 0.45rem;
}

.second {
  width: 0.25rem;
  height: 0.25rem;
  top: 0.35rem;
  left: 0.35rem;
}

.third {
  width: 0.4rem;
  height: 0.4rem;
  top: 0.25rem;
  left: 0.25rem;
}
.secondan {
  animation: fadeInOut 1s infinbite 0.2s;
}
.thirdan {
  animation: fadeInOut 1s infinite 0.4s;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
} */
/* .box {
  width: 120px;
  height: 120px;
  box-sizing: border-box;
  position: relative;
  margin: 50px auto;
}
.wifi-symbol {
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  overflow: hidden;
  transform: rotate(135deg);
}
.wifi-symbolk {
  transform: rotate(315deg);
}
.wifi-circle {
  border: 5px solid #999999;
  border-radius: 50%;
  position: absolute;
}
.first {
  width: 0.05rem;
  height: 0.05rem;
  background: #cccccc;
  top: 45px;
  left: 45px;
}
.second {
  width: 0.25rem;
  height: 0.25rem;
  top: 35px;
  left: 35px;
  animation: fadeInOut 1s infinite 0.2s;
}
.third {
  width: 0.4rem;
  height: 0.4rem;
  top: 25px;
  left: 25px;
  animation: fadeInOut 1s infinite 0.4s;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
} */
</style>