<template>
	<el-card shadow="never" class="h100 card">
		<audio ref="audioPlayerRef" :key="recordUrl" controls class="w100" style="height: 43px; padding: 0; margin: 0" preload="auto">
			<source :src="recordUrl" type="audio/wav" />
		</audio>
		<el-table :data="tableData" border class="mt10">
			<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" width="160">
				<template #default="{ row }">
					<el-button type="primary" link @click="onPlay(row)" :loading="loading">播放</el-button>
					<el-button type="primary" link v-auth="'public:record:download'" @click="download(row)" :loading="loading">下载</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { NextLoading } from '@/utils/loading';
import { callLogDetail } from '@/api/tels/callLog';
import { formatDate } from '@/utils/formatTime';
import { useRoute } from 'vue-router';
import { useThemeConfig } from '@/stores/themeConfig';
import { storeToRefs } from 'pinia';
import { fileDownload } from '@/api/public/file';
import { downloadFileBySrc, downloadFileByStream } from '@/utils/tools';
const loading = ref(false);
const tableData = ref<EmptyArrayType>([]);
NextLoading.done();
const route = useRoute();
const getData = async () => {
	try {
		const { result } = await callLogDetail(route.query.id as string);
		tableData.value = result.map((item: any) => {
			return {
				...item,
				createTime: formatDate(item.beginIvrTime, 'YYYY-mm-dd HH:MM:SS'),
			};
		});
	} catch (e) {
		console.log(e);
		loading.value = false;
	}
};
// 点击播放录音
const audioPlayerRef = ref<RefType>();
const recordUrl = ref('');
const onPlay = (row: any) => {
	recordUrl.value = themeConfig.value.recordPrefix + row.audioFile;
	if (audioPlayerRef.value) {
		setTimeout(() => {
			audioPlayerRef.value.play();
		}, 100);
	}
};
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
// 下载录音
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;
	}
};
onMounted(() => {
	getData();
});
</script>
<style scoped lang="scss">
.card {
	:deep(.el-card__body) {
		padding: 0 20px;
	}
}
</style>
