<view class="modal-overlay {{keyboardHeight > 0 ? 'modal-overlay--keyboard-open' : ''}}" wx:if="{{visible}}" catchtap="onCancel" catchtouchmove="noop">
  <view class="modal-container" catchtap="noop">
    <!-- 头部 -->
    <view class="modal-header">
      <view class="header-left">
        <text class="modal-title">添加备注</text>
        <view class="expand-btn" wx:if="{{showExpandBtn && showRating}}" bindtap="onToggleExpand" hover-class="expand-btn--hover">
          <text class="expand-text">{{ratingExpanded ? '收起评价 ▴' : '展开评价 ▾'}}</text>
        </view>
      </view>
      <view class="modal-close" bindtap="onCancel" hover-class="modal-close--hover">
        <t-icon name="close" size="40rpx" color="#8b8b8b" />
      </view>
    </view>

    <!-- 评分区域 -->
    <view class="rating-section" wx:if="{{showRating && ratingExpanded}}">
      <!-- 再次服务此客户 - 爱心 -->
      <view class="rating-group">
        <text class="rating-label">再次服务此客户</text>
        <view class="rating-right rating-right-heart" bindtouchstart="onHeartTouchStart" bindtouchmove="onHeartTouchMove">
          <view class="rating-row">
            <view class="rating-item" wx:for="{{[1,2,3,4,5]}}" wx:key="*this" bindtap="onHeartTap" data-score="{{item}}" hover-class="rating-item--hover">
              <image class="rating-icon" src="{{serviceScore >= item ? '/assets/icons/heart-filled.svg' : '/assets/icons/heart-empty.svg'}}" />
            </view>
          </view>
          <view class="rating-hints">
            <text class="hint" style="text-align: left;">不想</text>
            <text class="hint"></text>
            <text class="hint">一般</text>
            <text class="hint"></text>
            <text class="hint">非常想</text>
          </view>
        </view>
      </view>

      <!-- 再来店可能性 - 台球 -->
      <view class="rating-group">
        <text class="rating-label">再来店可能性</text>
        <view class="rating-right rating-right-ball" bindtouchstart="onBallTouchStart" bindtouchmove="onBallTouchMove">
          <view class="rating-row">
            <view class="rating-item" wx:for="{{[1,2,3,4,5]}}" wx:key="*this" bindtap="onBallTap" data-score="{{item}}" hover-class="rating-item--hover">
              <image class="rating-icon" src="{{returnScore >= item ? '/assets/icons/ball-black.svg' : '/assets/icons/ball-gray.svg'}}" />
            </view>
          </view>
          <view class="rating-hints">
            <text class="hint" style="text-align: left;">不可能</text>
            <text class="hint"></text>
            <text class="hint">不好说</text>
            <text class="hint"></text>
            <text class="hint">肯定能</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 文本输入 -->
    <view class="textarea-section">
      <textarea
        class="note-textarea"
        placeholder="请输入备注内容..."
        value="{{content}}"
        bindinput="onContentInput"
        bindfocus="onTextareaFocus"
        bindblur="onTextareaBlur"
        maxlength="500"
        auto-height
        adjust-position="{{false}}"
        placeholder-class="textarea-placeholder"
      />
    </view>

    <!-- 键盘弹出时的占位，防止内容被遮挡 -->
    <view wx:if="{{keyboardHeight > 0}}" style="height: {{keyboardHeight}}px;"></view>

    <!-- 保存按钮 -->
    <view class="modal-footer {{keyboardHeight > 0 ? 'modal-footer--float' : ''}}" style="{{keyboardHeight > 0 ? 'bottom: ' + keyboardHeight + 'px;' : ''}}">
      <view class="save-btn {{!canSave ? 'disabled' : ''}}" bindtap="onConfirm" hover-class="{{canSave ? 'save-btn--hover' : ''}}">
        <text class="save-text">保存</text>
      </view>
    </view>
  </view>
</view>
