<script setup>
import XModal from "./XModal.vue";

const emits = defineEmits(['success']);
const {title, info, cancel, confirmText} = defineProps({
    title: {
        type: String,
        default: '确认删除吗'
    },
    info: {
        type: String,
        default: '删除后不可恢复'
    },
    confirmText: {
        type: String,
        default: '确定'
    },
    cancel: {
        type: Boolean,
        default: true,
    }
});
const show = defineModel('show');

const success = () => {
    emits('success');
    show.value = false;
}
</script>

<template>
    <view @click="show=true">
        <slot></slot>
    </view>

    <x-modal v-model:show="show" v-bind="$attrs">
        <view class="py-[40rpx] px-[32rpx] !flex justify-center flex-col items-center gap-[20rpx]">
            <template v-if="!$slots.context">
                <view class="title">{{ title }}</view>
                <view class="info" v-if="!$slots.info">{{ info }}</view>
                <slot name="info" v-else></slot>
            </template>
            <slot name="context" v-else></slot>
        </view>

        <view class="!flex">
            <view v-if="cancel" class="btn cancel" @click="show=false">取消</view>
            <view class="btn confirm" @click="success">{{ confirmText }}</view>
        </view>
    </x-modal>
</template>

<style scoped lang="scss">
.btn {
    padding: 22rpx 0;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 300ms;

    &:active {
        background-color: rgba(0, 0, 0, .2);
    }
}

.confirm {
    color: #165DFF;
    border-top: 1px solid #E5E6EA;
}

.cancel {
    border-top: 1px solid #E5E6EA;
    border-right: 1px solid #E5E6EA;
}

.title {
    color: rgb(29, 33, 41);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
}

.info {
    color: rgb(78, 89, 105);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: center;
}
</style>
