<template>
	<view class="popup">
		<uv-popup ref="popup" customStyle="width: 620rpx; height: auto; padding:32rpx;" round="16rpx"
			:closeOnClickOverlay="false" :safeAreaInsetBottom="false">
			<view class="modal-container">

				<!-- 标题 -->
				<view class="modal-title font32 fontb">
					{{ props.title || $t('common.title') }}
				</view>

				<!-- 内容 -->
				<view class="modal-text-wrap" v-if="props.content">
					<text class="modal-text font28">
						{{ props.content }}
					</text>
				</view>

				<slot></slot>

				<!-- 按钮 -->
				<view class="modal-button">
					<uv-button v-if="cancelShow" @click="closeModal" :customStyle="{
						height: '86rpx',
						lineHeight: '86rpx',
						color: '#000',
						fontSize: '32rpx',
					}" shape="circle">
						{{ props.cancelText || $t('common.cancel') }}
					</uv-button>
					<uv-button v-if="confirmShow" :customStyle="{
						height: '86rpx',
						background: '#FB322E',
						lineHeight: '86rpx',
						color: '#fff',
						fontSize: '32rpx',
					}" color="#FB322E" shape="circle" @click="confirm">
						{{ props.confirmText || $t('common.confirm') }}
					</uv-button>
					<!-- <view
            v-if="cancelShow"
            class="modal-button-item modal-button-1"
            @click="closeModal"
          >
            {{ props.cancelText || $t('common.cancel') }}
          </view>

          <view
            v-if="confirmShow"
            class="modal-button-item modal-button-2"
            @click="confirm"
          >
            {{ props.confirmText || $t('common.confirm') }}
          </view> -->

					<slot name="affterBtn"></slot>

				</view>

			</view>
		</uv-popup>
	</view>
</template>

<script setup>
import { ref, computed, watch } from "vue";

const popup = ref()

const props = defineProps({
	title: {
		type: String,
		default: ""
	},
	content: {
		type: String,
		default: ""
	},
	cancelText: {
		type: String,
		default: ""
	},
	cancelShow: {
		type: Boolean,
		default: true
	},
	confirmText: {
		type: String,
		default: ""
	},
	confirmShow: {
		type: Boolean,
		default: true
	},
	modelValue: {
		type: Boolean,
		default: false
	},
	noClose: {
		type: Boolean,
		default: false
	}
})

const emit = defineEmits([
	"close",
	"confirm",
	"update:modelValue"
])

const modelValue = computed({
	get() {
		return props.modelValue
	},
	set(value) {
		emit("update:modelValue", value)

		if (value) {
			popup.value?.open()
		} else {
			popup.value?.close()
		}
	}
})

watch(
	() => modelValue.value,
	(val) => {
		if (!popup.value) {
			setTimeout(() => {
				val ? popup.value?.open() : popup.value?.close()
			}, 300)
		} else {
			val ? popup.value?.open() : popup.value?.close()
		}
	},
	{
		immediate: true
	}
)

const closeModal = () => {
	emit("close")

	if (!props.noClose) {
		modelValue.value = false
	}
}

const confirm = () => {
	emit("confirm")

	if (!props.noClose) {
		modelValue.value = false
	}
}
</script>

<style lang="scss">
.modal-container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
}

/* 标题 */

.modal-title {
	width: 100%;
	text-align: center;
	font-weight: bold;
	font-size: 36rpx;
	color: #000000;
}

/* 文本外层 */

.modal-text-wrap {
	width: 100%;
	text-align: center;
	margin-top: 20rpx;
}

/* 文本 */

.modal-text {
	display: inline-block;
	text-align: left;
	// font-size: 34rpx;
	// font-weight: 600;
	// line-height: 48rpx;
	padding: 20rpx 0;
	max-width: 100%;
}

/* 按钮容器 */

.modal-button {
	margin-top: 20rpx;
	width: 100%;
	min-height: 86rpx;
	display: flex;
	gap: 20rpx;
	:deep(.uv-button-wrapper){
		flex: 1;
	}
}

</style>