<template>
    <div class="DPcomputer17Box">
        <!-- 近期通知列表-->
        <div class="intelligentSchScrView_leftView_title">近期通知列表</div>
        <div class="intelligentSchScrView_leftView_content">
            <div class="rolling">
                <div class="table-box">
                    <dl>
                        <dt>
                            <div>通知类型</div>
                            <div>开始时间</div>
                            <div>录音回放</div>
                        </dt>
                        <dd v-for="(item,index) in recentNoticeData" :key="index">
                            <div>{{item.noticeClass}}</div>
                            <div>{{item.createTime}}</div>
                            <div style="cursor: pointer;text-decoration:underline;" @click="item.noticeClass == '智能调度' ? '' : item.noticeClass == '人工调度' ? '' : selectSituation(item)">{{item.noticeClass == '智能调度' ? '无录音' : item.noticeClass == '人工调度' ? '无录音' : '录音播放'}}</div>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
		<!-- 播放器 -->
        <audio controls currentTime autoplay :src='srcUrl' style="display:none;"></audio>
    </div>
</template>

<script>
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';


export default {
    data(){
        return {
            DPcomputer17BoxTimer:null,
            recentNoticeData:[], //近期通知列表
			srcUrl:null,
        }
    },
    mounted(){
        this.loadData();
    },
    methods:{
        loadData(){
			this.srcUrl = null;
            //近期通知列表
            HttpReq.truckDispatching.recentNoticeQuery({size:50,sort:'id,desc'}).then((res) => {
                if(res.code == 200){
                    this.recentNoticeData = res.data.content;
                };
            })

            this.DPcomputer17BoxTimer = setInterval(() => {
                //近期通知列表
                HttpReq.truckDispatching.recentNoticeQuery({size:50,sort:'id,desc'}).then((res) => {
                    if(res.code == 200){
                        this.recentNoticeData = res.data.content;
                    };
                })
            },5000)

        },
        //播放语音
		selectSituation(item){
            if(!item.videoContent){
                this.$notify({
					title: '无语音数据！',
					type: 'warning',
					duration: 2500
				});
            }else{
                //注意base64的最后面中括号和引号是不转译的
                let bstr = this.dataURItoBlob(item.videoContent);
                const reader1 = new FileReader();
                reader1.readAsArrayBuffer(bstr);
                reader1.onload = (e) => {
                    const bufer = e.srcElement.result;
                    const blob = this.addWavHeader(bufer, 16000, 16, 1);
                    this.srcUrl = (window.URL||webkitURL).createObjectURL(blob);
                };
            }
            
		},
        //解析base64编码到blob流
        dataURItoBlob(base64Data) {
			//console.log(base64Data);
			var byteString;
			if(base64Data.split(',')[0].indexOf('base64') >= 0)
				byteString = atob(base64Data.split(',')[1]);//base64 解码
			else{
				byteString = unescape(base64Data.split(',')[1]);
			}
			var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png

			// var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
			// var ia = new Uint8Array(arrayBuffer);//创建视图
			var ia = new Uint8Array(byteString.length);//创建视图
			for(var i = 0; i < byteString.length; i++) {
				ia[i] = byteString.charCodeAt(i);
			}
			var blob = new Blob([ia], {
				type: mimeString
			});
			return blob;
		},
		addWavHeader(samples, sampleRateTmp, sampleBits, channelCount) {
			const dataLength = samples.byteLength;
			/* 新的buffer类，预留44bytes的heaer空间 */
			const buffer = new ArrayBuffer(44 + dataLength);
			/* 转为 Dataview, 利用API来填充字节 */
			const view = new DataView(buffer);
			let offset = 0;
			/* ChunkID, 4 bytes,  资源交换文件标识符 */
			this.writeString(view, offset, 'RIFF'); offset += 4;
			/* ChunkSize, 4 bytes, 下个地址开始到文件尾总字节数,即文件大小-8 */
			view.setUint32(offset, /* 32 */ 36 + dataLength, true); offset += 4;
			/* Format, 4 bytes, WAV文件标志 */
			this.writeString(view, offset, 'WAVE'); offset += 4;
			/* Subchunk1 ID, 4 bytes, 波形格式标志 */
			this.writeString(view, offset, 'fmt '); offset += 4;
			/* Subchunk1 Size, 4 bytes, 过滤字节,一般为 0x10 = 16 */
			view.setUint32(offset, 16, true); offset += 4;
			/* Audio Format, 2 bytes, 格式类别 (PCM形式采样数据) */
			view.setUint16(offset, 1, true); offset += 2;
			/* Num Channels, 2 bytes,  通道数 */
			view.setUint16(offset, channelCount, true); offset += 2;
			/* SampleRate, 4 bytes, 采样率,每秒样本数,表示每个通道的播放速度 */
			view.setUint32(offset, sampleRateTmp, true); offset += 4;
			/* ByteRate, 4 bytes, 波形数据传输率 (每秒平均字节数) 通道数×每秒数据位数×每样本数据位/8 */
			view.setUint32(offset, sampleRateTmp * channelCount * (sampleBits / 8), true); offset += 4;
			/* BlockAlign, 2 bytes, 快数据调整数 采样一次占用字节数 通道数×每样本的数据位数/8 */
			view.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;
			/* BitsPerSample, 2 bytes, 每样本数据位数 */
			view.setUint16(offset, sampleBits, true); offset += 2;
			/* Subchunk2 ID, 4 bytes, 数据标识符 */
			this.writeString(view, offset, 'data'); offset += 4;
			/* Subchunk2 Size, 4 bytes, 采样数据总数,即数据总大小-44 */
			view.setUint32(offset, dataLength, true); offset += 4;
			if (sampleBits === 16) {
				this.floatTo16BitPCM(view, samples);
			} else if (sampleBits === 8) {
				this.floatTo8BitPCM(view, samples);
			} else {
				this.floatTo32BitPCM(view, samples);
			}
			return new Blob([view], { type: 'audio/wav' });
		},
		writeString(view, offset, string) {
			for (let i = 0; i < string.length; i += 1) {
				view.setUint8(offset + i, string.charCodeAt(i));
			}
		},
		floatTo32BitPCM(output, input) {
			const oinput = new Int32Array(input);
			let newoffset = 44;
			for (let i = 0; i < oinput.length; i += 1, newoffset += 4) {
				output.setInt32(newoffset, oinput[i], true);
			}
		},
		floatTo16BitPCM(output, input) {
			const oinput = new Int16Array(input);
			let newoffset = 44;
			for (let i = 0; i < oinput.length; i += 1, newoffset += 2) {
				output.setInt16(newoffset, oinput[i], true);
			}
		},
		floatTo8BitPCM(output, input) {
			const oinput = new Int8Array(input);
			let newoffset = 44;
			for (let i = 0; i < oinput.length; i += 1, newoffset += 1) {
				output.setInt8(newoffset, oinput[i], true);
			}
    	},
    },
    beforeDestroy(){
		this.srcUrl = null;
        if(this.DPcomputer17BoxTimer) {
			clearInterval(this.DPcomputer17BoxTimer);
            this.DPcomputer17BoxTimer = null;
		}
    }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.DPcomputer17Box{
    width: 20vw;
    height: 32vh;
    background-color: rgba(32,42,67,0.95);
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
}
.DPcomputer17Box .intelligentSchScrView_leftView_title{
    margin-bottom: 5px;
    width: 100%;
    height: 3.5vh;
    background:no-repeat center center url('~@/assets/images/cutGraph/biaoti1.png');
	background-size:100% 100%;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 3.5vh;
    color: #FAFAFB;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px #92CBFF;
}
.DPcomputer17Box .intelligentSchScrView_leftView_content{
    width: 100%;
}
.DPcomputer17Box .rolling{
    text-align: center;
	height: 26vh;
	overflow-y:auto;
    scrollbar-width: none;
}
.DPcomputer17Box .rolling::-webkit-scrollbar {
  display: none;
}
.DPcomputer17Box dl{
	display:table;
	width:100%;
}
.DPcomputer17Box dt{
	margin-top: 20px;
	display:table-row;
	background-color: #274088;
}
.DPcomputer17Box dt>div{
	display:table-cell;
	padding:7px 3px;
	font-size: 16px;
	font-weight: 500;
	color: rgb(24,228,240);
}
.DPcomputer17Box dd{
	display:table-row;
}
.DPcomputer17Box dd>div{
	display:table-cell;
	padding:5px 3px;
	font-size: 15px;
	color: #A6F6F9;
}
</style>