<template>
	<div class="tels-callRecord-playRecord-container">
		<el-dialog v-model="dialogVisible" width="500px" draggable title="播放录音">
			<audio-player :url="RecordUrl" v-if="dialogVisible" />
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="callRecordPlayRecord">
import {defineAsyncComponent, ref} from 'vue';
// 引入组件
const AudioPlayer = defineAsyncComponent(() => import('/@/components/AudioPlayer/index.vue'));

// 定义子组件向父组件传值/事件
const emit = defineEmits(['openDialog', 'closeDialog']);
const RecordUrl = ref<string>('');//录音地址
const dialogVisible = ref<boolean>(false);//是否显示弹窗
// 打开弹窗
const openDialog = async (row:any) => {
  RecordUrl.value = row.recordUrl;
  dialogVisible.value = true;
  emit('openDialog');
};
// 关闭弹窗
const closeDialog = () => {
  dialogVisible.value = false;
	emit('closeDialog');
};
//暴漏变量和方法
defineExpose({ closeDialog, openDialog });
</script>
