<template>
    <div class="system-add-blackList-container">
        <el-dialog v-model="state.isShowDialog" width="500px" draggable title="播放录音">
            <AudioPlayer url="http://music.163.com/song/media/outer/url?id=447925558.mp3" v-if="state.isShowDialog"/>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="closeDialog" class="default-button">关 闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import {  reactive, defineAsyncComponent  } from 'vue';

// 引入组件
const AudioPlayer = defineAsyncComponent(() => import('/@/components/AudioPlayer/index.vue'))

// 定义接口来定义对象的类型
interface StateBacklist {
    isShowDialog:boolean
}

// 定义子组件向父组件传值/事件
const emit = defineEmits(['openDialog','closeDialog'])

// 定义变量内容
const state = reactive<StateBacklist>({
    isShowDialog:false
})
// 打开弹窗
const openDialog = ()=>{
    state.isShowDialog = true;
    emit('openDialog')
}
// 关闭弹窗
const closeDialog = () => {
    state.isShowDialog = false;
    emit('closeDialog')
};
 //暴漏变量和方法
defineExpose({closeDialog,openDialog})
</script>
