<!-- 横屏大字版下 chat tab 容器高度可能不足，输入态面板必须挂到 root-portal，避免被 tab 内容区裁剪。 -->
<root-portal wx:if="{{entering}}">
  <view class="chat-edit-drawer-mask" bindtap="handleOutsideTap"></view>
  <view class="comment-wrapper comment-wrapper-portal {{isLandscape ? 'comment-wrapper-landscape' : 'comment-wrapper-portrait'}}">
    <view class="chat-edit-drawer chat-edit-drawer-open" catchtap="catchNone">
      <view class="chat-edit-row">
        <view class="chat-edit-shell chat-edit-shell-open chat-edit-shell-active">
          <view class="chat-edit-main">
            <view wx:if="{{IsSendCommentEnable}}" class="chat-edit-input-wrap">
              <textarea
                value="{{chatValue}}"
                class="chat-edit-input"
                id="chat-edit-input"
                placeholder-class="chat-edit-input-placeholder-active"
                placeholder="{{IsSendCommentEnable === 2 ? '主持人暂未开启互动聊天' : CommentConfig.InputBoxPrompt}}"
                maxlength="200"
                bindinput="chatInputChange"
                bindtap="handleInputTap"
                bindfocus="handleInputFocus"
                bindblur="bindblur"
                bindconfirm="bindconfirm"
                bindkeyboardheightchange="handleKeyboardHeightChange"
                adjust-position="{{false}}"
                confirm-type="send"
                focus="{{focusInput}}"
                auto-height="{{false}}"
                fixed="{{false}}"
                cursor-spacing="0"
                show-confirm-bar="{{false}}"
                disable-default-padding="{{true}}"
                disabled="{{IsSendCommentEnable === 2 || InvalidToken}}"
              ></textarea>
            </view>
          </view>
          <view class="chat-edit-footer">
            <view class="chat-edit-counter">{{chatLength}}/200</view>
            <view class="chat-edit-footer-actions">
              <block wx:if="{{showEmojiEntry}}">
                <view wx:if="{{showEmojiPanel}}" class="chat-edit-action-btn" catchtap="handleKeyboardTrigger">
                  <image class="chat-edit-action-icon" src="{{keyboardTriggerIconDark}}" mode="aspectFit"></image>
                </view>
                <view wx:else class="chat-edit-action-btn" catchtap="handleEmojiTrigger">
                  <image class="chat-edit-action-icon" src="{{emojiTriggerIconDark}}" mode="aspectFit"></image>
                </view>
              </block>
              <view wx:if="{{showImageEntry}}" class="chat-edit-action-btn" catchtap="handleChooseImage">
                <image class="chat-edit-action-icon" src="{{imageTriggerIconDark}}" mode="aspectFit"></image>
              </view>
              <view wx:if="{{showCloseEntry}}" class="chat-edit-close-btn" catchtap="handleCloseTap">关闭</view>
              <view class="chat-edit-send-btn {{chatLength > 0 ? 'chat-edit-send-btn-active' : 'chat-edit-send-btn-disabled'}}" catchtap="handleSendTap">发送</view>
            </view>
          </view>
        </view>
      </view>

      <scroll-view wx:if="{{showEmojiPanel}}" class="emoji-panel emoji-panel-active" scroll-y show-scrollbar="{{false}}" style="height: {{ panelHeight + 'px'}};">
        <view
          wx:for="{{emojiPanelSections}}"
          wx:key="key"
          wx:for-item="section"
          class="emoji-section"
        >
          <view class="emoji-section-title">{{section.title}}</view>
          <view class="emoji-grid">
            <view
              wx:for="{{section.emojis}}"
              wx:key="_emojiIndex_"
              wx:for-item="emoji"
              class="emoji-item {{section.isDynamic ? 'emoji-item-dynamic' : ''}} {{emoji.EmojiType === 2 ? 'emoji-item-big' : ''}}"
              data-set-index="{{emoji._setIndex_}}"
              data-emoji-index="{{emoji._emojiIndex_}}"
              bindtap="selectEmoji"
            >
              <image
                wx:if="{{emoji.EmojiImage && emoji.EmojiStatus !== 2}}"
                src="{{emoji.EmojiImage}}"
                mode="aspectFit"
                class="emoji-image {{section.isDynamic ? 'emoji-image-dynamic' : ''}} {{emoji.EmojiType === 2 ? 'emoji-image-big' : ''}}"
              ></image>
            </view>
          </view>
        </view>
      </scroll-view>
      <view wx:else class="keyboard-spacer" style="height: {{ panelHeight + 'px'}};"></view>
    </view>
  </view>
</root-portal>

<view wx:else class="comment-wrapper {{isLandscape ? 'comment-wrapper-landscape' : 'comment-wrapper-portrait'}}">
  <view class="chat-edit-drawer" catchtap="catchNone">
    <view class="chat-edit-row">
      <view class="chat-edit-shell">
        <view class="chat-edit-main">
          <view wx:if="{{IsSendCommentEnable}}" class="chat-edit-input-wrap">
            <view
              class="chat-edit-input-preview {{chatValue ? '' : 'chat-edit-input-preview-placeholder'}}"
              catchtap="handleInputActivatorTap"
            >
              {{chatValue || (IsSendCommentEnable === 2 ? '主持人暂未开启互动聊天' : CommentConfig.InputBoxPrompt)}}
            </view>
          </view>
          <view class="chat-edit-actions">
            <block wx:if="{{showEmojiEntry}}">
              <view class="chat-edit-icon" catchtap="handleEmojiTrigger">
                <image class="chat-edit-icon-image" src="{{emojiTriggerIcon}}" mode="aspectFit"></image>
              </view>
            </block>
          </view>
        </view>
      </view>
      <view class="chat-edit-toolbar">
        <slot></slot>
      </view>
    </view>
  </view>
</view>
