<script setup lang="ts">
import { ref, defineEmits, defineExpose } from 'vue'

const emit = defineEmits(['confirmDia'])
let showDia = ref<boolean>(false)

const openDia = (): void => {
  showDia.value = true
}  

const closeDia = (): void => {
  showDia.value = false
}

const confirmDia = (): void => {
  emit('confirmDia', '彈窗內容事件處理完畢，信息傳給父組件。')
}  
// vue3中規(guī)定，使用了 <script setup> 的組件是默認私有的：
// 一個父組件無法訪問到一個使用了 <script setup> 的子組件中的任何東西，除非子組件在其中通過 defineExpose 宏顯式暴露
defineExpose({
  openDia,
  closeDia
})

</script>

<template>
   <el-dialog 
		title="Dialog" 
		@close="closeDia" 
		v-model="showDia"
	>
   		
    <template v-slot:footer>
        <el-button @click="confirmDia" type="primary">確定</el-button>
        <el-button @click="closeDia" type="primary" plain>取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MyDialog from './components/MyDialog.vue'

// 聲明一個 ref 來存放該元素的引用
// 必須和模板里的 ref 同名
// 為了獲取 MyDialog 的類型，我們首先需要通過 typeof 得到其類型，再使用 TypeScript 內置的 InstanceType 工具類型來獲取其實例類型
let dialog = ref<InstanceType<typeof MyDialog> | null>(null)

const open = (): void => {
    dialog.value?.openDia()
}
const confirmDia = (val: string): void => {
  console.log(val)
  dialog.value?.closeDia()
}
</script>

<template>
  <MyDialog ref="dialog" @confirmDia="confirmDia"/>
  <el-button @click="open" type="primary">打開彈窗</el-button>
</template>