<template>
  <div class="container">
    <div class="sharetop flextwo">
      <div class="leftrow">
        <img src="../../../assets/leftrow.png" alt />
      </div>
      <div class="sharemiddle">直播</div>
      <div class="sharebtn">
        <img src="../../../assets/sharebtn.png" alt />
      </div>
    </div>
    <div class="messagelist">
      <div class="messageitem flexone">
        <div class="messageitemleft">
          <img src="../../../assets/touxiang.png" alt />
        </div>
        <div class="messageitemright">
          <div class="messagecontent">同学们大家准备好开始上课了 吗？让我们现在开始吧！</div>
        </div>
      </div>

      <div class="messageitem messageitemk flexone">
        <div class="messageitemrightk">
          <div class="messagecontentk">亲，在的</div>
        </div>
        <div class="messageitemleftk">
          <img src="../../../assets/touxiang.png" alt />
        </div>
      </div>
      <div class="messageitem flexone">
        <div class="messageitemleft">
          <img src="../../../assets/touxiang.png" alt />
        </div>
        <div class="messageitemright">
          <div class="messagecontent">同学们大家准备好开始上课了 吗？让我们现在开始吧！</div>
        </div>
      </div>

      <div class="messageitem messageitemk flexone">
        <div class="messageitemrightk">
          <div class="messagecontentk">亲，在的</div>
        </div>
        <div class="messageitemleftk">
          <img src="../../../assets/touxiang.png" alt />
        </div>
      </div>
      <div class="messageitem flexone">
        <div class="messageitemleft">
          <img src="../../../assets/touxiang.png" alt />
        </div>
        <div class="messageitemright">
          <div class="messagecontent">同学们大家准备好开始上课了 吗？让我们现在开始吧！</div>
        </div>
      </div>

      <div class="messageitem messageitemk flexone">
        <div class="messageitemrightk">
          <div class="messagecontentk">亲，在的</div>
        </div>
        <div class="messageitemleftk">
          <img src="../../../assets/touxiang.png" alt />
        </div>
      </div>
      <div class="messageitem flexone">
        <div class="messageitemleft">
          <img src="../../../assets/touxiang.png" alt />
        </div>
        <div class="messageitemright">
          <div class="messagecontent">同学们大家准备好开始上课了 吗？让我们现在开始吧！</div>
        </div>
      </div>

      <div class="messageitem messageitemk flexone">
        <div class="messageitemrightk">
          <div class="messagecontentk">亲，在的</div>
        </div>
        <div class="messageitemleftk">
          <img src="../../../assets/touxiang.png" alt />
        </div>
      </div>
    </div>
    <div class="messagebot flextwo">
      <img src="../../../assets/yuyin.png" alt class="zhibobtn" />
      <img src="../../../assets/pic.png" alt class="zhibobtn" />
      <img src="../../../assets/luyin.png" alt class="yuyinbtn" />
      <img src="../../../assets/shangchuan.png" alt class="zhibobtn" />
      <img src="../../../assets/kaiguan.png" alt class="zhibobtn" />
    </div>

    <div class="manypeople">
      <img src="../../../assets/manypeople.png" alt class="manypeopleimg" />
      8888
    </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="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">
      <div class="luwrap">
        <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">
      <div class="luwrap">
        <div class="beginlu">正在录音：59'</div>
        <div>
          <img src="../../../assets/zhengzailu.png" alt class="beginluimg" />
        </div>
      </div>
    </div>

    <!-- 录制过程 -->
    <div class="register" style="z-index:999" v-if="luprocess">
      <div class="luwrap">
        <div class="beginlu">正在录音：59'</div>
        <div class="flextwo chonglu">
          <div class="relu">重录</div>
          <div class="send">发送</div>
          <div class="relu">试听</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">直接结束</div>
          <div class="waitbotlright">上传录音</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iszhibo: false,
      issuccess: false,
      beginlushow: false,
      luprocess: false,
      chonglushow: false,
      shanghcuanshow: false
    }
  },
  methods: {
    overvideo() {
      this.iszhibo = false
    },
    sureup() {
      this.issuccess = false
    }
  }

}
</script>

<style scoped>
.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 {
  padding: 0 0.72rem;
  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;
}
</style>