<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
const props = defineProps({
	textData: {
		type: Object,
		default: () => {}
	} as any,
	styleData: {
		type: Object,
		default: () => {}
	} as any,
	callBack: {
		type: Function,
		default: () => {}
	}
})
// const emit = defineEmits([
// ])
let data = reactive({
})

const dialogFormVisible = ref(false)

const confirm = async ()=>{
	if(props.callBack)await props.callBack()
	dialogFormVisible.value = false
}

onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({open:()=>dialogFormVisible.value = true})
const {} = toRefs(data);
</script>
<template>
	<div class="dialog">
		<el-dialog 
			:align-center="true"
			v-model="dialogFormVisible" 
			:close-on-click-modal="false"
			:title="props.textData?.title" 
			:show-close="false"
			:width="props.styleData?.width || '50%'">
			<template #header="{ close, titleId, titleClass }">
				<div class="my-header">
					<div class="text">{{ props.textData?.title }}</div>
					<div class="icon" @click="dialogFormVisible = false">
						<SvgIcon
							name="close"
							size="8"
						/>
					</div>
				</div>
			</template>
			<div class="boundary"></div>
			<div class="dialog-content">
				{{ props.textData?.text }}
			</div>
			<template #footer>
				<div class="dialog-footer">
					<div class="dialog-footer-cancel" @click="dialogFormVisible = false">
						{{ props.textData?.cancelText || 'Cancel' }}
					</div>
					<div class="dialog-footer-confirm" type="primary" @click="confirm">
					{{ props.textData?.submitText || 'Confirm' }}
					</div>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<style lang="less" scoped>
	.dialog{
		--el-dialog-padding-primary: 1.6rem 1.2rem;
		--el-dialog-border-radius: .8rem;
		:deep(.el-dialog){
			.my-header{
				display: flex;
				padding: 0 .5rem;
				justify-content: space-between;
				--el-dialog-padding-primary: 1.2rem
				.text{
					font-family: 'Semibold';
					font-size: 1.4rem;
					line-height: 2rem;
					letter-spacing: -0.18px;
				}
				.icon{
					cursor: pointer;
					width: 2rem;
					height: 2rem;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.boundary{
				border-bottom: .7px solid rgba(0, 0, 0, 0.1);
				width: 100%;
			}
			.dialog-content{
				padding: 0 .5rem;
				padding-top: 1.2rem;
				font-family: 'Regular';
				font-weight: 400;
				font-size: 1.2rem;
				line-height: 2rem;
				letter-spacing: -0.18px;
			}
			.dialog-footer{
				display: flex;
				justify-content: flex-end;
				--el-dialog-padding-primary: 1.7rem;
				> div{
					font-weight: 500;
					font-size: 1.2rem;
					line-height: 2rem;
					letter-spacing: -0.18px;
					width: 5.9rem;
					text-align: center;
					cursor: pointer;
					border-radius: 1.5rem;
					padding: .3rem 0 .4rem;
				}
				.dialog-footer-cancel{
					color: #000;
					margin-right: .6rem;
					border: 0.7px solid #0000001A;
					background: #FFFFFF;
				}
				.dialog-footer-confirm{
					color: #fff;
					background-color: #f74545;
				}
			}
		}
	}
</style>