<!--components/banner/banner.wxml-->
<view class="banner-wrap">
    <view>
        <view class="banner__card banner-box">
            <image class="banner__avatar" src="{{avatarUrl}}" mode="aspectFill" />
            <view>
                <view class="banner__title text-overflow">{{nickName}}</view>
                <view class="banner-box banner__count">
                   <image class="banner__icon" src="https://img.alicdn.com/imgextra/i1/O1CN01GC0HVZ1kWz8bvu0KX_!!6000000004692-2-tps-36-36.png" mode="widthFix" />
                   <text>{{watchNum}}</text>
                </view>
            </view>
        </view>
        <view class="banner__card">{{state}}</view>
    </view>

    <view>
        <view class="banner__card banner-box" bind:tap="handOpen">
            <image class="banner__icon" src="/assets/img/p.svg"  mode="widthFix"/>
            <text>投诉</text>
        </view>
        <view class="banner-id">用户ID:{{userId}}</view>
    </view>
</view>

<popup visible="{{showPopup}}" bind:close="closePopup">
    <view slot="header" class="popup-header">
        <text>举报本场直播</text>
    </view>


<view class="popup-content">
    <radio-group class="report-options" bindchange="onOptionChange">
        <view class="options-row">
            <view class="option-item" wx:for="{{reportOptions}}" wx:for-item="item" wx:key="id">
                <radio value="{{item.id}}" checked="{{item.checked}}"/>
                <text class="popup-text">{{item.text}}</text>
            </view>
        </view>
    </radio-group>

    <view class="other-input" wx:if="{{showOtherInput}}">
        <input
            class="other-input-field popup-text"
            type="text"
            placeholder="请输入其他举报原因"
            value="{{otherReason}}"
            bindinput="onOtherInput"
        />
    </view>

    <view class="upload-section">
        <view class="upload-title popup-text">上传图片证据（最多3张）</view>
        <view class="image-list">
            <block wx:for="{{uploadedImages}}" wx:key="*this">
                <view class="image-wrapper">
                    <image class="uploaded-image" src="{{item}}" mode="aspectFill" bindtap="previewImage" data-src="{{item}}"/>
                    <view class="delete-image" catchtap="deleteImage" data-index="{{index}}">×</view>
                </view>
            </block>
            <view class="upload-btn" wx:if="{{uploadedImages.length < 3}}" bindtap="chooseImage">
                <view class="upload-icon">+</view>
                <text class="upload-text">上传图片</text>
            </view>
        </view>
    </view>

    <view class="description-section">
        <textarea
            class="description-input popup-text"
            placeholder="请补充说明（选填）"
            value="{{description}}"
            bindinput="onDescriptionInput"
            maxlength="200"
        />
        <text class="char-count popup-text">{{description.length}}/200</text>
    </view>

    <view class="submit-section">
        <button class="submit-btn" disabled="{{!isSubmitEnabled}}" bindtap="submitReport">提交举报</button>
    </view>
</view>
</popup>