<template>
	<el-dialog
		v-model="dialogVisible"
		width="600px"
		draggable
		title="播放录音"
		append-to-body
		destroy-on-close
		:modal="false"
		modal-class="modal_class"
		class="dialog_class_record"
		:close-on-click-modal="false"
	>
		<div v-loading="loading">
			<el-table :data="tableData" border>
				<el-table-column prop="fromNo" label="来电号码" align="center" />
				<el-table-column prop="createTime" label="来电时间" width="160" align="center" />
				<el-table-column prop="duration" label="时长(秒)" align="center" />
				<el-table-column prop="size" label="操作" align="center">
					<template #default="{ row }">
						<el-button type="primary" link v-auth="'public:record:download'" @click="download(row)" :loading="loading">下载</el-button>
						<el-button type="primary" link @click="onPlay(row)" :loading="loading">播放</el-button>
					</template>
				</el-table-column>
			</el-table>
			<audio-player :url="recordUrl" :key="recordUrl" v-if="recordUrl" ref="audioPlayerRef" />
		</div>
	</el-dialog>
	<el-dialog
		v-model="dialogVisibleSmart"
		width="600px"
		draggable
		title="播放录音"
		append-to-body
		destroy-on-close
		:modal="false"
		modal-class="modal_class"
		class="dialog_class_record"
		:close-on-click-modal="false"
	>
		<audio-player :url="recordUrl" :key="recordUrl" />
	</el-dialog>
</template>

<script lang="ts" setup name="playRecord">
import { defineAsyncComponent, ref, watch } from 'vue';
import { fileDownload } from '@/api/public/file';
import { downloadFileBySrc, downloadFileByStream } from '@/utils/tools';
import { callLogDetail } from '@/api/tels/callLog';
import { formatDate } from '@/utils/formatTime';
import { useThemeConfig } from '@/stores/themeConfig';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
// 引入组件
const AudioPlayer = defineAsyncComponent(() => import('@/components/AudioPlayer/index.vue'));
// 定义子组件向父组件传值/事件
const emit = defineEmits(['openDialog', 'closeDialog']);
const recordUrl = ref<RefType>(); //录音地址
const dialogVisible = ref<boolean>(false); //是否显示弹窗
const tableData = ref<EmptyArrayType>([]);
const loading = ref(false);
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
// 打开弹窗
const openDialog = async (callId: string) => {
	loading.value = true;
	recordUrl.value = null;
	try {
		const { result } = await callLogDetail(callId);
		tableData.value = result.map((item: any) => {
			return {
				...item,
				createTime: formatDate(item.beginIvrTime, 'YYYY-mm-dd HH:MM:SS'),
			};
		});
		dialogVisible.value = true;
		loading.value = false;
		emit('openDialog');
	} catch (e) {
		console.log(e);
		loading.value = false;
	}
};
// 关闭弹窗
const closeDialog = () => {
	dialogVisible.value = false;
	emit('closeDialog');
};
// 下载录音
const download = (row: any) => {
	loading.value = true;
	switch (themeConfig.value.appScope) {
		case 'YiBin':
			fileDownload({ path: themeConfig.value.recordDownLoadPrefix + row.audioFile })
				.then((res: any) => {
					downloadFileByStream(res, row.audioFile);
					loading.value = false;
				})
				.catch(() => {
					loading.value = false;
				});
			break;
		case 'ZiGong':
		case 'LuZhou':
			downloadFileBySrc(themeConfig.value.recordPrefix + row.audioFile, row.audioFile);
			// window.open(themeConfig.value.recordPrefix + row.audioFile)
			loading.value = false;
			break;
	}
};
// 直接打开录音
const router = useRouter();
const dialogVisibleSmart = ref(false);
const playRecord = async (callId: string) => {
	recordUrl.value = null;
	let routeData = router.resolve({
		path: '/tableAudio',
		query: { id: callId },
	});
	window.open(routeData.href, '_blank', 'left=100,top=100,width=600,height=200');
};
const playRecordPath = async (path: string) => {
	recordUrl.value = null;
	recordUrl.value = path;
	let popup = window.open('', '_blank', 'left=100,top=100,width=400,height=200');
	if (popup) {
		popup.document.write(`
			<html>
				<head>
					<title>播放录音</title>
					<style>
						body,html {
						 margin: 0;
						padding: 0;
						width: 100%;
						height: 100%;
						font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
						font-weight: 400;
						-webkit-font-smoothing: antialiased;
						-webkit-tap-highlight-color: transparent;
						background-color: var(--hotline-bg-main-color);
						font-size: 14px;
						overflow: hidden;
						position: relative;
						}
						.play-content{
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							flex-direction: column;
						}
						.audio-player{
							width: 100%;
						}
					</style>
				</head>
				<body>
					 <div class="play-content">
							<audio controls class="audio-player">
								<source src="${recordUrl.value}" type="audio/wav">
								您的浏览器不支持音频组件
							</audio>
						</div>
				</body>
			</html>
		`);
	} else {
		alert('浏览器阻止了弹出窗口，请允许弹出窗口后再试。');
	}
};
// 点击播放录音
const audioPlayerRef = ref<RefType>();
const onPlay = (row: any) => {
	recordUrl.value = themeConfig.value.recordPrefix + row.audioFile;
};
watch(
	() => audioPlayerRef.value,
	() => {
		if (audioPlayerRef.value) audioPlayerRef.value.playPauseAudio();
	}
);
//暴漏变量和方法
defineExpose({ closeDialog, openDialog, playRecord, playRecordPath });
</script>
<style lang="scss" scoped>
.item {
	display: flex;
	align-items: center;
	span {
		display: inline-block;
		width: 60px;
		margin-right: 10px;
	}
	b {
		flex: 1;
		font-weight: normal;
	}
}
</style>
<style lang="scss">
.dialog_class_record {
	pointer-events: auto;
	flex-direction: column;
	margin: 0 !important;
	position: absolute;
	top: 30vh;
	left: calc(50vw - 300px);
}
</style>
