<!-- volc-mini-sdk/components/connect/connect.wxml -->
<wxs src="./connect.wxs" module="CONNECT" />
<view>
  <!-- 宫格布局 -->
  <GridLayout id='connect-layout' wx:if="{{connectStatus == CONNECT.ConnectStatus.Connecting}}" renderList="{{renderList}}" hasAudio="{{hasAudio}}" hasVideo="{{hasVideo}}" bind:showPanel="showPanel" isPortrait="{{isPortrait}}" connectLivePlayerAttrs="{{connectLivePlayerAttrs}}" />
  <!-- 连麦申请按钮 -->
  <view wx:if="{{connectStatus != CONNECT.ConnectStatus.Connecting}}" class="applyBt" bindtap="showPanel">
    <image src="https://p1-live.byteimg.com/tos-cn-i-gjr78lqtd0/f5313aaf92d0496b8e53d7596fb95d69~tplv-gjr78lqtd0-resize:88:0.webp"></image>
    <view class='tag' wx:if="{{connectStatus == CONNECT.ConnectStatus.Init}}">
      <view>申请连麦</view>
    </view>
    <view class='tag' wx:if="{{connectStatus == CONNECT.ConnectStatus.Applying}}">
      <view>申请中...</view>
    </view>
  </view>
  <!-- 底部弹出框 -->
  <Drawer id='volc-connect-drawer' needCancel="{{connectStatus != CONNECT.ConnectStatus.Applying}}">
    <!-- 申请面板 -->
    <view class="applyPanel" wx:if="{{connectStatus == CONNECT.ConnectStatus.Init}}">
      <view class="item" data-type="video" bindtap="applyConnect" hover-class="buttonHover">
        <image src="./assets/video.svg"></image>
        视频连麦
      </view>
      <view class="item" data-type="audio" bindtap="applyConnect" hover-class="buttonHover">
        <image src="./assets/unmute.svg"></image>
        语音连麦
      </view>
    </view>
    <!-- 申请中，取消申请面板 -->
    <view class="cancelPanel" wx:if="{{connectStatus == CONNECT.ConnectStatus.Applying}}">
      <image src="./assets/apply2.svg"></image>
      <view class="tips">连麦申请已发送，请稍等...</view>
      <view class="cancelBt" bindtap="cancelApply" hover-class="buttonHover">取消申请</view>
    </view>
    <!-- 连麦设置面板 -->
    <view class="settingPanel" wx:if="{{connectStatus == CONNECT.ConnectStatus.Connecting}}">
      <view class="btBox" bindtap="switchCamera">
        <view class="icon">
          <image src="./assets/camera.svg"></image>
        </view>
        <view>翻转摄像头</view>
      </view>
      <view class="btBox" bindtap="changeAudioStatus">
        <view class="icon">
          <image src="{{hasAudio ? './assets/unmute.svg' : './assets/mute.svg'}}"></image>
        </view>
        <view>{{hasAudio? '静音' : '取消静音'}}</view>
      </view>
      <view class="btBox" bindtap="changeVideoStatus">
        <view class="icon">
          <image src="{{hasVideo ? './assets/video.svg' : './assets/unvideo.svg'}}"></image>
        </view>
        <view>{{hasVideo? '关闭摄像头' : '打开摄像头'}}</view>
      </view>
      <view class="btBox" bindtap="hangUpConnect">
        <view class="icon">
          <image src="./assets/hangup.svg"></image>
        </view>
        <view>断开连麦</view>
      </view>
    </view>
  </Drawer>
</view>
