<template>
<view class="model" v-if="visibleF">
	<view class="model-con">
		<view class="model-top" v-if="title">{{title}}</view>
		<view :class="{'model-middle':true,'m-height':!title}">{{contents}}</view>
		<view class="model-bottom">
			<button type="primary" class="btn-cancel" @click="handleCancel" v-if="btnFlag2">取消</button>
			<button type="default" class="btn-green" @click="handleConfirm" v-if="btnFlag" :loading="loading" :disabled="loading">{{btnTxt}}</button>
		</view>
	</view>
</view>
</template>

<script setup>
import { ref,watch } from 'vue'
const props = defineProps({
	visible:{
		type:Boolean
	},
	title:{
		type: String,
	},
	content: {
		type: String
	},
	btnFlag:{
		type:Boolean,
		default:true
	},
	btnFlag2:{
		type:Boolean,
		default:true
	},
	btnTxt:{
		type:String,
		default:'确定'
	}
})

let visibleF = ref(props.visible)
let titles = ref(props.title)
let contents = ref(props.content)
let btnFlags = ref(props.btnFlag)
let loading = ref(false);

// 显示隐藏
watch(() => props.visible, (newVal, oldVal) => {
    loading.value = false;
	visibleF = newVal
},{
    deep:true, // 深度监听
    immediate:true // 立即执行
});

// 标题
watch(() => props.title, (newVal, oldVal) => {
	titles.value = newVal
},{
    deep:true,
    immediate:true
});
// 内容
watch(() => props.content, (newVal, oldVal) => {
	contents = newVal
},{
    deep:true,
    immediate:true
});

// 按钮
watch(() => props.btnFlag, (newVal, oldVal) => {
	btnFlags.value = newVal
},{
    deep:true,
    immediate:true
});

// 调用父组件的方法
const emit = defineEmits(['close','confirm'])
const handleCancel = ()=>{
	emit('close');
}

const handleConfirm = ()=>{
	loading.value=true;
	emit('confirm')
}

</script>

<style lang="scss" scoped>
.model {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 9999;
	.model-con{
		background: #fff;
		position: fixed;
		top:50%;
		left:50%;
		width:500rpx;
		min-height: 278rpx;
		margin-left: -270rpx;
		margin-top:-139rpx;
		border-radius: 24rpx;
		padding:20rpx 20rpx 30rpx;
	}
	.model-top{
		text-align: center;
		padding:20rpx 0;
		font-size:36rpx;
	}
	.model-middle{
		// margin-top:290rpx;
		text-align: center;
		font-size:36rpx;
		color:#333333;
		.font-green{
			color:#05A3F4;
			font-size: 42rpx;
			font-weight: bold;
			padding:20rpx 0;
		}
	}
	.model-middle.m-height{
		padding:60rpx 0 20rpx;
	}
	.model-bottom{
		display: flex;
		justify-content: center;
		margin-top:40rpx;
		// align-items: center;
		.btn-green,.btn-cancel{
			background-color: #fff;
			color:#05A3F4;
			border-radius: 48rpx;
			font-size:30rpx;
			width:200rpx;
			height:65rpx;
			line-height: 60rpx;
			text-align: center;
			font-size:30rpx;
			border: 1px solid #05A3F4;
			margin-left:0rpx !important;
			margin-right:0 !important;
			&::after{
				border:none;
				border-radius: 37rpx;
			}
		}
		.btn-green{
			border: 1px solid #05A3F4;
			background-color:#05A3F4;
			color:#fff;
			margin-left:20rpx !important;
		}
	}
}
</style>