<!--顶部栏-->
<view class="top-bar " >
  <view class="user-info "  style="flex: 4;	display: flex;justify-content: flex-start;">  
    
    <view class="avatar-box "  style="margin-left:10rpx;">
  <button open-type="chooseAvatar" bindchooseavatar="onAvatar" style="margin: 0; padding: 0;height: 32px;width:90%; ">
  <image src="{{avatarUrl}}" style="height: 30px;width: 30px;" />
</button>

</view>
    <text style="color: dimgrey; margin-left:5rpx;">{{weChatName}}</text>
  </view>
  <view  style="flex: 4;	display: flex;justify-content: flex-end;">
    
    <scroll-view scroll-x class=" nav text-center">
    <view class="cu-item {{TabCur==1?'text-blue curline':''}}"  bindtap="tabSelect" data-id="{{1}}">
    全部信息
  </view >
  <view class="cu-item {{TabCur==2?'text-blue curline':''}}" bindtap="tabSelect" data-id="{{2}}">
   公开信息
  </view >
  <view class="cu-item {{TabCur==3?'text-blue curline':''}}" bindtap="tabSelect" data-id="{{3}}">
    个人信息
  </view >
    </scroll-view>
  

  </view>

</view>

<!--消息区-->
<scroll-view class="msg-area"
              id="myScroll"
              scroll-y
              refresher-enabled           
              refresher-threshold="80"    
              refresher-default-style="none" 
              refresher-triggered="{{triggered}}"
              bindrefresherpulling="onPulling"   
              bindrefresherrefresh="onRefresh"  
              bindrefresherrestore="onRestore"   
              scroll-into-view="{{toView}}" style="height: {{scrollHeight}}px;">
    <view class="refresh" style="height: 70rpx; width: 100%;text-align: center;" wx:if="{{pulling}}">
    <!-- <image class="refresh-icon" src="/assets/refresh.png" animation="{{rotateAni}}" /> -->
    <text>{{ pullText }}</text>
  </view>
  <block wx:for="{{msgList}}" wx:key="id">
 
    <!-- 日期分隔条 -->
    <!-- 修改消息展示，添加状态图标 -->
    <view class="msg-item {{item.isSelf === 1 ? 'self' : ''}} {{item.isSelf === 2 ? 'self1' : ''}}" id="msg-{{index}}">
      <view class="bubble" id="{{item.id}}" bindlongpress="handleLongPressmsg">
        <view  style=" text-align:{{item.isSelf === 1 ? 'right' :item.isSelf === 2 ? 'right' : 'left'}} ;"> 
        <image  wx:if="{{item.lock=='Unlock'}}" src="/images/unlock_blue.png" style=" width:16rpx;height:16rpx;margin-left: 10rpx;" ></image>
        <image wx:else src="/images/lock_r.png" style=" width:16rpx;height:16rpx;margin-left: 10rpx;" ></image>
       
        <image  wx:if="{{item.sendMethod=='voice'}}" src="/images/Voice.png" style=" width:25rpx;height:25rpx;margin-left: 10rpx;" ></image>
        <image wx:else src="/images/Keyboard.png" style=" width:25rpx;height:25rpx;margin-left: 10rpx;" ></image>

        <text class="time">({{!item.voicetime? 0:item.voicetime}} s)</text>
        <text class="time">{{item.time}}</text>
      </view>

        <text id="{{item.id}}" bindlongpress="handleLongPressmsg">{{item.content}}</text>
        <text wx:if="{{item.status === 'sending'}}" class="msg-status">发送中...</text>
        <text wx:elif="{{item.status === 'failed'}}" class="msg-status error" bindtap="retryMessage" data-id="{{item.id}}">发送失败，点击重发</text>
     
      </view>
   
      
    </view>
  </block>
</scroll-view>



<!-- 实时语音转文字显示区域 -->
<view class="recording-toast" wx:if="{{(recording || recording1) }}">
  <view class="recording-text">
    <text wx:if="{{resultText}}">{{resultText}}</text>
    <text wx:else  style="color: beige;">正在转换中...</text>
  </view>
</view>

<!--底部输入栏-->
<view class="input-bar" id="BottomFrame">
  <!-- 语音/键盘切换 -->
  <button class="switch-btn" style="width: 65rpx; height: 80%;display: flex;  flex-direction:column;  justify-content: center;  " bindtap="switchInputMode">
    <!-- <text style="line-height: 100%; "  wx:if="{{!voiceMode}}"> 🎤 </text>
    <text style="top: 25%;"  wx:else>⌨</text> -->
    <image  wx:if="{{!voiceMode}}" src="/images/Keyboard.png" style=" width: 60rpx;height:60rpx;" ></image>
    <image wx:else src="/images/Voice.png" style=" width: 60rpx;height:60rpx;" ></image>

  </button>

  <!-- 文字模式 -->
  <view wx:if="{{!voiceMode}}" class="text-row">
    <view class="input-box" style="border: 1rpx solid #ddd;">
 
    <textarea class="textarea" maxlength="-1" confirm-type="search" bindinput="qonInput"  value="{{qinputTxt}}"  placeholder="输入消息" />
    </view>
   
    <view style="width: 20%;">
      <button class="send-btn"  style="width:100%;background-color:#ADD8E6;color: black;" bindtap="gsendText">
    <text>个人发送</text>
    </button>
      <button class="send-btn"  style="width: 100%; background-color: #95ec69;color: black;" bindtap="qsendText">
    <text>公开发送</text>
    </button>

    </view>
  
  
  </view>

  <!-- 语音模式 -->
  <view wx:else class="voice-row">
    <view class="voice-btn-group" style="height: 100%; " >
      <button
      class="voice-record-btn {{recording1?'recording':''}} {{cancelSend1?'cancel':''}}"
      catchtouchstart="handleTouchStart1"
      catchtouchmove="handleTouchMove1"
      catchtouchend="handleTouchEnd1"
      catchtouchcancel="handleTouchCancel1"
      style="width: 45%;height: 100%;display: flex;  flex-direction:column;  justify-content: center;background-color:#ADD8E6;color: black;"
    >
    <text style="font-size: 15px;font-weight: bold;"> {{recording1?(cancelSend1?'松开手指，取消发送':'松开 结束'):'按住说话\n个人消息'}}</text>
    </button>
    <button
      class="voice-record-btn {{recording?'recording':''}} {{cancelSend?'cancel':''}}"
      catchtouchstart="handleTouchStart"
      catchtouchmove="handleTouchMove"
      catchtouchend="handleTouchEnd"
      catchtouchcancel="handleTouchCancel"     
      style="width: 45%;height: 100%;display: flex;  flex-direction:column;  justify-content: center;background-color: #95ec69;color: black; "
    >
     <text style="font-size: 15px;font-weight: bold;"> {{recording?(cancelSend?'松开手指，取消发送':'松开 结束'):'按住说话\n公开消息'}}</text>
    </button>
  
  
    </view>
  </view>
</view>

<view class="cu-modal {{modalName=='DialogModal1'?'show':''}}" >
  <view class="cu-dialog" style="top: {{isFocused ? '2vh':'30vh'}};">
    <view class="cu-bar bg-white justify-end">
      <view class="content">修改信息</view>
 
    </view>
    <!-- <input  class="solids cu-btn1" focus="true" bindinput="inputSearchForHotels"	confirm-type="search" style="width: 100%;"/> -->
    <textarea class="Btextarea" maxlength="-1" confirm-type="search" auto-height bindinput="inputSearchForHotels"  style="width: 100%;" bindfocus="onTextareaFocus" 
    bindblur="onTextareaBlur"  value="{{inputValue}}" />
  
  
    <view class="cu-bar bg-white justify-end">
      <view class="action">
        <button id="Withdrawal" class="cu-btn line-green text-red" bindtap="hideModal">撤回</button>
        <button id="no" class="cu-btn line-green text-green" bindtap="hideModal">取消</button>
       
        <button id="ok" class="cu-btn bg-green margin-left" bindtap="hideModal">确定</button>

      </view>
    </view>
  </view>
</view>