<template>
	<el-dialog v-model="exportDialogVisible" title="导出" width="250" center align-center @close="close" draggable>
		<div class="text-center">
			<span style="color: #fff;font-size: 15px;">确定导出吗？</span>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="close">取消</el-button>
				<el-button type="primary" @click="handleExport">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { defineProps } from 'vue';

const props = defineProps({
	dialogVisible: {
		type: Boolean,
		default: false
	},
	mode: {
		type: String,
		default: '1'
	}
})
const emit = defineEmits(['update:dialogVisible', 'confirm'])
const exportDialogVisible = ref(props.dialogVisible)

// 导出方法
const handleExport = () => {
	emit('confirm')
	exportDialogVisible.value = false
}
// 关闭弹窗的方法
const close = () => {
	exportDialogVisible.value = false
}
// 监听父组件传过来的值
watch(() => props.dialogVisible,
	(newVal) => {
		exportDialogVisible.value = newVal
	}
)
// 监听组件内的值并向父组件更新
watch(() => exportDialogVisible.value,
	(newVal) => {
		emit('update:dialogVisible', newVal)
	}
)
</script>