<view class="page">
  <view class="page-header page-header-pink" style="padding-top: {{statusBarHeight + 24}}px;">
    <view class="nav-back" bindtap="onBack">‹ 返回</view>
    <view class="page-header-title">确认佩戴</view>
    <view class="page-header-subtitle">请确保设备正确佩戴</view>
  </view>

  <view class="page-content">
    <view class="device-row">
      <view class="device-row-icon">💆</view>
      <view class="device-row-info">
        <view class="device-row-name">
          智能面膜
          <text class="status-badge status-badge-green" wx:if="{{connected}}">已连接</text>
          <text class="status-badge" style="background:#ccc;" wx:else>未连接</text>
        </view>
        <view class="device-row-battery">电量 {{battery}}%</view>
      </view>
    </view>

    <view class="guide-card">
      <view class="guide-title">佩戴指引</view>
      <view class="guide-img">设备佩戴示意图</view>
      <view class="guide-steps">
        <view class="guide-step">1. 取出设备，展开弹性绑带</view>
        <view class="guide-step">2. 将设备正确佩戴</view>
        <view class="guide-step">3. 调节绑带至舒适位置</view>
      </view>
    </view>

    <button class="btn-primary" bindtap="checkWearing" disabled="{{checking}}" loading="{{checking}}">
      确认已佩戴
    </button>
    <button class="btn-secondary" bindtap="onRetry">重新连接</button>

    <view class="check-result" wx:if="{{result === 'ok'}}">
      <text class="check-ok">✓ 佩戴确认成功</text>
    </view>
    <view class="check-result" wx:if="{{result === 'fail'}}">
      <text class="check-fail">{{error}}</text>
    </view>

    <button wx:if="{{result === 'ok'}}" class="btn-primary mt-30" bindtap="onNext">设置参数</button>
  </view>
</view>
