<template>
    <view class="pop-content">
        <view v-if="title" class="pop-content-title">{{title}}</view>
        <slot />
        <view class="pop-content-bottom">
            <button @click="handleSure">确认</button>
            <button @click="handleCancel">取消</button>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        okText: {
            type: String,
            default: '确认'
        },
        cancelText: {
            type: String,
            default: '取消'
        }
    },
    methods: {
        handleSure() {
            this.$emit('ok')
        },
        handleCancel() {
            this.$emit('cancel')
        }
    }
}
</script>

<style lang="less" scoped>
.pop-content {
    background: #fff;
    width: 600rpx;
    color: #000;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
}
.pop-content-title {
    text-align: center;
    margin-bottom: 20rpx;
    font-weight: bold;
}
.pop-content-bottom {
    display: flex;
    justify-content: space-between;
    padding: 0 40rpx;
    margin-top: 40rpx;
}
</style>
