<template>
    <view>
        <up-popup :show="show" mode="center">
            <view class="popup-content">
                <view class="top u-flex u-row-between">
                    <text class="font-bold u-font-32 color-333">{{title}}</text>
                    <up-icon size="18" name="close" @click="show=false"></up-icon>
                </view>
                <up-line></up-line>
                <scroll-view style="max-height:50vh;">
                <slot></slot>
                </scroll-view>
                <up-line></up-line>

                <view class="bottom">
                    <view class="btn success" @click="confirm">{{confirmText}}</view>
                    <view class="btn cancel" @click="close">{{cancelText}}</view>
                </view>
            </view>
        </up-popup>
    </view>
</template>

<script setup> 
import { ref } from "vue";
const props = defineProps({
    title: {
        type: String,
        default: "标题",
    },
    confirmText: {
        type: String,
        default: "保存",
    },
    cancelText: {
        type: String,
        default: "取消",
    },
});
const show = defineModel({
    type: Boolean,
    default: false,
})
const emits=defineEmits(['close','confirm'])
function close(){
    show.value=false
    emits('close')
}
function confirm(){
    emits('confirm')
}
</script>
<style lang="scss">
.popup-content{
    background: #fff;
    width: 640rpx;
    border-radius: 18rpx;
}
.top{
    padding: 40rpx 48rpx;
}
.bottom{
    padding: 48rpx 52rpx;
    display: flex;
    justify-content: space-between;
    gap: 50rpx;
    .btn{
        flex:1;
        text-align: center;
        padding: 34rpx 20rpx;
        border-radius: 4rpx;
        font-size: 32rpx;
        border: 2rpx solid transparent;
        &.success{
            background-color: $my-main-color;
            color:#fff;
        }
        &.cancel{
            border-color:#D9D9D9;
            box-shadow: 0 4rpx 0 0 #00000005;
        }
    }
}
</style>