<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>
                <span v-if="item.noticeClass==='紧急通知'" style="cursor: pointer;text-decoration:underline;" @click="openConfirmView(item)">{{item.noticeClass}} <i class="el-icon-search"></i></span>
                <span v-else>{{ item.noticeClass }}</span>
              </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>
    <div class="vonfirm-view-box"  v-if="confirmViewShow">
      <div style="color:white;font-size:14px;margin-bottom:1vh;font-size: 18px;font-weight: 600;">通知确认情况</div>
     <div class="rolling" style="padding:0;height: 3vh">
        <div class="table-box">
          <dl>
            <dt>
              <div style="width:10%"></div>
              <div style="width:60%;text-align:left;padding-left:10px;">车牌号</div>
              <div style="width:30%;text-align:right;padding-right:30px;">状态</div>
            </dt>
          </dl>
        </div>
      </div>
      <div style="padding:0;height: 47vh">
        <div class="rolling" style="height: 100%">
          <div class="table-box">
            <dl>
              <dd v-for="(item,index) in carList" :key="index">
                <div style="width:10%"></div>
                <div style="width:60%;text-align:left;padding-left:10px;">{{item.carNumber}}</div>
                <div style="width:30%;text-align:right;padding-right:5px;">
                  <span v-if="item.isRead===0" style="color:#a3a3a3">未确认</span>
                  <span v-else style="color:mediumseagreen">已确认</span>
                  <i style="color:lightgray" class="el-icon-s-promotion"></i>
                </div>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="voiceAppContent_4">
        <button class="voiceAppContent_4_btns" @click="closeConfirmView()">关闭窗口</button>
      </div>
    </div>
    <!-- 播放器 -->
    <audio id="audioIndex" 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,
      confirmViewShow: false,
      carList: [],
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    openConfirmView(item){
      this.confirmViewShow = true;
      this.carList = [];
      HttpReq.truckDispatching.ddNoticeReadStatus({id:item.id}).then((res) => {
        if (res.code == 200) {
          this.carList = res.data||[];
        }
      })
    },
    closeConfirmView(){
      this.confirmViewShow = false;
    },
    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) {
      let This = this;
      if (!item.videoContent) {
        this.$notify({
          title: '无语音数据！',
          type: 'warning',
          duration: 2500
        });
      } else {
        //注意base64的最后面中括号和引号是不转译的
        console.log(item)
        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);
          setTimeout(function() {
            let au = document.getElementById("audioIndex");
            au.currentTime = 0;
            au.play();
          }, 200);
        };
      }

    },
    //解析base64编码到blob流
    dataURItoBlob(base64Data) {
      //console.log(base64Data);//data:image/png;base64,
      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/mp3" });
    },
    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;
}
.DPcomputer17Box .vonfirm-view-box {
  position: absolute;
  bottom: 33vh;
  left: 0.7vw;
  height: 58vh;
  width: 18.5vw;
  z-index: 50;
  background: no-repeat center center url('~@/assets/images/cutGraph/guzhangshenbankuang1.png');
  background-size: 100% 100%;
  padding: 10px 10px 0px;
  box-sizing: border-box;
}
.DPcomputer17Box .voiceAppContent_4 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-evenly;
}

.DPcomputer17Box .voiceAppContent_4_btns {
  background-color: #112251;
  border: 1px solid #00FCF9;
  color: #00FFFF;
  border-radius: 5px;
  height: 2.5vh;
  /*margin: 5px 2vw 3px;*/
  width: 25%;
  font-size: 15px;
  cursor: pointer;
}

.DPcomputer17Box .voiceAppContent_4_btns:active {
  background: linear-gradient(to top, #007EFF, #30CFBE);
  border: 1px solid #00FCF9;
  color: white;
}
</style>
