<!--pages/support/support.wxml-->
<view class="page-container">
  <!-- 状态栏 -->
  <view class="status-bar-area">
    <view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
  </view>

  <!-- 顶部导航栏 -->
  <view class="nav-header" style="top: {{statusBarHeight}}px;">
    <view class="nav-content">
      <!-- 返回按钮 -->
      <view class="nav-back" bindtap="onBack">
        <image src="/images/icon-back-arrow.png" class="back-icon" mode="aspectFit"></image>
        <text class="back-text">返回</text>
      </view>
      
      <!-- 中间角色信息 -->
      <view class="nav-center">
        <view class="nav-avatar-wrap">
          <image class="nav-avatar" src="/images/icon-headphones.png" mode="aspectFit"></image>
        </view>
        <text class="nav-name">在线客服</text>
        <view class="online-dot"></view>
      </view>
      
      <!-- 右侧占位 -->
      <view class="nav-right-placeholder"></view>
    </view>
  </view>

  <!-- 聊天内容区域 -->
  <view class="chat-area-wrapper" style="top: {{navHeight + statusBarHeight}}px;" bindtap="onTapChatArea">
    <scroll-view 
      scroll-y 
      class="chat-scroll"
      scroll-into-view="{{scrollIntoView}}"
      scroll-with-animation="{{true}}"
      enhanced="{{true}}"
      show-scrollbar="{{false}}"
      scroll-top="{{scrollTop}}"
    >
      <!-- 咨询说明提示 -->
      <view class="encrypt-hint">
        <text>您正在与人工客服对话，我们将尽快回复</text>
      </view>

      <!-- 聊天消息列表 -->
      <view class="chat-list">
        <view 
          class="chat-item {{item.isMe ? 'me' : 'other'}}" 
          wx:for="{{messages}}" 
          wx:key="id"
          id="msg-{{index}}"
        >
          <!-- 客服消息（左侧） -->
          <block wx:if="{{!item.isMe}}">
            <view class="avatar-wrap">
              <image class="chat-avatar" src="/images/icon-headphones.png" mode="aspectFit"></image>
            </view>
            <view class="message-content">
              <view class="chat-bubble other">
                <text class="chat-text" decode="{{true}}">{{item.text}}</text>
              </view>
              <view class="message-actions">
                <text class="message-time">{{item.time}}</text>
              </view>
            </view>
          </block>
          
          <!-- 用户消息（右侧） -->
          <block wx:else>
            <view class="message-content me">
              <view class="chat-bubble me">
                <text class="chat-text" decode="{{true}}">{{item.text}}</text>
              </view>
              <text class="message-time">{{item.time}}</text>
            </view>
            <view class="avatar-wrap user-avatar">
              <image class="chat-avatar" src="{{myAvatar}}" mode="aspectFill" binderror="onAvatarError"></image>
            </view>
          </block>
        </view>
        
        <!-- 正在输入提示 -->
        <view class="chat-item other" wx:if="{{isTyping}}">
          <view class="avatar-wrap">
            <image class="chat-avatar" src="/images/icon-headphones.png" mode="aspectFit"></image>
          </view>
          <view class="message-content">
            <view class="chat-bubble other typing">
              <view class="typing-dot"></view>
              <view class="typing-dot"></view>
              <view class="typing-dot"></view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="chat-bottom-space"></view>
      <view id="chat-bottom-anchor"></view>
    </scroll-view>
  </view>

  <!-- 底部输入区域 -->
  <view class="bottom-input-area">
    <view class="input-container figma-input-container">
      <view class="figma-input-wrap">
        <input 
          class="figma-text-input" 
          placeholder="请输入您要咨询的问题..."
          value="{{inputText}}"
          bindinput="onInput"
          confirm-type="send"
          bindconfirm="onSend"
          focus="{{inputFocus}}"
          hold-keyboard="{{true}}"
        />
      </view>
      
      <view class="figma-send-btn {{inputText.length > 0 ? 'active' : ''}}" bindtap="onSend">
        <image src="/images/icon-send.png" class="figma-btn-icon" mode="aspectFit"></image>
        <text class="send-text">发送</text>
      </view>
    </view>
  </view>
</view>
