<view class="page chat-page">
  <view wx:if="{{!hasOrder}}" class="empty panel chat-empty">
    <text class="empty-title">订单不存在</text>
    <text class="empty-text">请返回上一页重新进入这条订单。</text>
    <button class="secondary-button chat-back-button" bindtap="backToPrevious">返回上一页</button>
  </view>

  <view wx:elif="{{order}}" class="order-strip panel">
    <view class="order-strip-main">
      <text class="order-strip-title">{{order.station}}</text>
      <text class="order-strip-code">取件码 {{order.pickupCode}}</text>
    </view>
    <text class="status-pill">{{order.statusText}}</text>
  </view>

  <view wx:if="{{hasOrder}}">
    <scroll-view
      class="messages"
      scroll-y="true"
      scroll-into-view="{{scrollIntoView}}"
      scroll-with-animation="true"
    >
      <view wx:if="{{!hasMessages}}" class="empty panel chat-empty">
        <text class="empty-title">还没有消息</text>
        <text class="empty-text">可以先从商家这边回复客户。</text>
      </view>

      <view wx:else class="message-list">
        <view
          wx:for="{{messages}}"
          wx:key="id"
          id="msg-{{item.id}}"
          class="message-row {{item.rowClass}}"
        >
          <view class="message-meta">
            <text>{{item.senderText}}</text>
            <text>{{item.createdAt}}</text>
          </view>
          <view class="message-bubble {{item.bubbleClass}}">
            <text>{{item.content}}</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="input-bar">
      <view class="input-wrap">
        <text class="sender-label">{{senderLabel}}</text>
        <input
          class="chat-input"
          value="{{draft}}"
          bindinput="handleInput"
          bindconfirm="sendMessage"
          confirm-type="send"
          placeholder="回复客户"
          placeholder-class="input-placeholder"
        />
      </view>
      <button class="send-button" bindtap="sendMessage">发送</button>
    </view>
  </view>
</view>
