<view class="container">
    <view class="trigger" bindtap="openPopupMp">
        <view class="trigger-text {{renderValue ? '' : 'trigger-placeholder'}}">
            {{renderValue || placeholder || pickerRender.placeholder || ''}}
        </view>
        <block wx:if="{{!required && renderValue}}">
            <view class="clear-icon" catchtap="clearSelectionMp">
                <l-icon name="close" color="#bdbdbd" size="24" />
            </view>
        </block>
        <l-icon name="right" color="#bdbdbd" size="24" />
    </view>

    <l-popup show="{{show}}" content-align="bottom">
        <view class="popup-container">
            <view class="popup-actions">
                <view class="cancel-btn" bindtap="closePopupMp">
                    {{t('common::action.cancel')}}
                </view>
                <view class="confirm-btn" bindtap="confirmSelectMp">
                    {{t('common::action.confirm')}}
                </view>
            </view>

            <block wx:if="{{showSearchBar}}">
                <l-search-bar
                    value="{{searchValue}}"
                    placeholder="{{pickerRender.placeholder || placeholder || ''}}"
                    l-class="search-bar"
                    l-placeholder-class="search-placeholder"
                    l-input-class="search-input"
                    bind:linchange="handleSearchChangeMp"
                    bind:linconfirm="handleSearchConfirmMp"
                    bind:linclear="handleSearchClearMp"
                    show-cancel="{{false}}"
                />
            </block>

            <view wx:if="{{loading}}" class="loading-view">
                <l-loading show="{{true}}" size="large"></l-loading>
            </view>

            <scroll-view wx:else scroll-y="true" class="option-scroll">
                <block wx:if="{{displayOptions.length}}">
                    <block wx:if="{{multiple}}">
                        <l-checkbox-group bind:linchange="onCheckboxChangeMp">
                            <l-checkbox
                                l-class="option-item"
                                wx:for="{{displayOptions}}"
                                wx:key="id"
                                key="{{item.id}}"
                                checked="{{item.checked}}"
                                placement="right"
                            >
                                {{item.title}}
                            </l-checkbox>
                        </l-checkbox-group>
                    </block>
                    <block wx:else>
                        <l-radio-group current="{{draftSelectedIds[0] || ''}}" bind:linchange="onRadioChangeMp">
                            <l-radio
                                l-class="option-item"
                                wx:for="{{displayOptions}}"
                                wx:key="id"
                                key="{{item.id}}"
                            >
                                {{item.title}}
                            </l-radio>
                        </l-radio-group>
                    </block>
                </block>

                <view wx:else class="empty-view">
                    {{t('common::empty')}}
                </view>
            </scroll-view>
        </view>
    </l-popup>
</view>
