<template>
    <global-page :title="title">
        <view class="search-form">
            <slot></slot>
        </view>
        <template #bottom>
            <view class="footer-btn">
                <slot name="bottom">
                    <up-row gutter="10">
                        <up-col span="6">
                            <global-button type="primary" plain size="large" :radius="5" @tap="handleReset">{{ resetText }}</global-button>
                        </up-col>
                        <up-col span="6">
                            <global-button type="primary" size="large" :radius="5" @tap="handleConfirm">{{ confirmText }}</global-button>
                        </up-col>
                    </up-row>
                </slot>
            </view>
        </template>
    </global-page>
</template>

<script setup>
const es = defineEmits(['reset', 'confirm'])
const ps = defineProps({
    title: {
        type: String,
        default: '筛选'
    },
    resetText: {
        type: String,
        default: '重置'
    },
    confirmText: {
        type: String,
        default: '确定'
    }
})
const handleReset = () => {
    es('reset')
}
const handleConfirm = () => {
    es('confirm')
}
</script>
<style lang="scss" scoped>
.search-form {
    padding: 24rpx 24rpx 0 24rpx;
    background: #fff;
}
.footer-btn {
    padding: 24rpx 32rpx;
    background-color: #fff;
}
</style>
