<!--
 * @Author: micky
 * @Date: 2024-08-13 11:41:56
 * @LastEditors: micky
 * @LastEditTime: 2024-10-13 16:00:37
 * @FilePath: \chargingpile-uniapp\src\components\widgets\confirm-popup\confirm-popup.vue
-->
<template>
    <root-portal>
        <u-popup
            :show="popupShow"
            round="10"
            :closeOnClickOverlay="false"
            :closeable="false"
            :safeAreaInsetBottom="false"
            mode="center"
        >
            <view class="confirm-popup">
                <slot name="content" v-if="slotContent" />
                <view class="text" v-else>{{ contentText }}</view>
                <view class="btn">
                    <view @click="cancel">取消</view>
                    <view @click="confirm">确定</view>
                </view>
            </view>
        </u-popup>
    </root-portal>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ref, watch, useSlots } from 'vue'
const props = defineProps({
    contentText: String,
    modelValue: {
        type: Boolean,
        defalut: false
    }
})
const emits = defineEmits(['update:modelValue', 'confirm'])
const slots = useSlots()
const slotContent = computed(() => slots.content)

const popupShow = ref(false)
const cancel = () => {
    popupShow.value = false
    emits('update:modelValue', false)
}
const confirm = () => {
    popupShow.value = false
    emits('confirm')
    emits('update:modelValue', false)
}
watch(
    () => props.modelValue,
    (val: boolean) => {
        if (val) popupShow.value = val
    }
)
</script>
<style scoped lang="scss">
.confirm-popup {
    @apply w-[600rpx];
    .text {
        @apply w-full text-center px-[20rpx] py-[40rpx];
    }
    .btn {
        @apply h-[36px] my-2 border-t border-[#FAFAFA] flex justify-center items-center;
        view {
            @apply flex-1 text-center;
        }
        view:nth-of-type(1) {
            @apply border-r border-[#D7D7D7];
        }
        view:nth-of-type(2) {
            @apply text-primary;
        }
    }
}
</style>
