<template>
    <van-overlay :show="show" z-index="9999">
        <div class="wrapper">
            <div class="box">
                <div class="title">温馨提示</div>
                <div class="content">{{ message }}</div>
                <div class="foot">
                    <div class="cancle" @click="cancelDialog" v-show="showCancel" >否</div>
                <div class="ok" @click="closeDialog">{{confirmText}}</div>
                </div>
            </div>
        </div>
    </van-overlay>
</template>
<script setup>
import { ref} from 'vue'
const show = ref(false);

const props=defineProps({
    message: {
        type: String,
        default:''
    },
    showCancel: {
        type: Boolean,
        default: true,
    },
    confirmText: {
        type: String,
        default:'是'
    }
});

const emit = defineEmits(['handledConfirm']);
const closeDialog = () => {
    show.value = false;
    emit('handledConfirm');
};
const cancelDialog = () => {
    show.value = false;
    emit('handledCancel');
};
const openDialog = () => {
    show.value = true;
};
defineExpose({
    openDialog
});
</script>

<style lang='scss' scoped>
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .box {
        width: 80%;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 24px;
        border-radius: 12px;
        background: #fff;
        .title {
            font-weight: 550;
            text-align: center;
            font-size: 18px;
            color: rgba(0, 0, 0, 0.85);
        }
        .content {
            margin-top: 13px;
            text-align: center;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
            line-height: 22px;
        }
        .foot {
            margin-top: 24px;
            display: flex;
            justify-content: center;
            margin-top: 20px;
            .cancle {
                width: 128px;
                height: 44px;
                margin-right: 12px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #FFFFFF;
                border-radius: 25px;
                font-size: 16px;
                color: rgba(0, 0, 0, 0.85);
                border: 1px solid rgba(0, 0, 0, 0.15);
            }

            .ok {
                width: 128px;
                height: 44px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 16px;
                color: #fff;
                background: #43C9C3;
                border-radius: 25px;
                border: 1px solid 43C9C3;
            }
        }
    }
}
</style>
