<template>
  <modal :show.sync="show" v-ref:modal backdrop="false"  width="720px" style="height:auto">
    <header slot="modal-header">
      <div class="header">
        <span class="glyphicon glyphicon-remove-circle close" style="margin-top: 35px;margin-right: 30px" @click="close"></span>
        <h4 class="title">高拍仪（哲林）</h4>
      </div>
    </header>
    <article slot="modal-body" class="form-control" style="padding: 0px">
      <div class="form-group">
        <div class="operation-group">
          <strong class="operation" style="margin-top: 2px">视频操作:</strong>
          <button class="btn btn-info photo" @click="bb()">拍照</button>
          <button class="btn btn-info" @click="cam_switch(1)">打开视频1</button>
          <button class="btn btn-info" @click="cam_switch(2)">打开视频2</button>
          <button class="btn btn-info" @click="CloseVideo()">关闭视频</button>
          <button class="btn btn-info" @click="openApp()">开启程序</button>
<!--          <div style="display: inline-block;margin-left: 570px">-->
<!--            <strong class="operation">读取身份证:</strong>-->
<!--            <button class="btn btn-info readIDCard" @click=Begin()>读身份证</button>-->
<!--            <button class="btn btn-default stop" @click=Stop()>停止读卡</button>-->
<!--          </div>-->
        </div>
        <div class="showInfo">
          <IMG ID="Base64IMG" src="" class="img"></IMG>
          <!--          <button style="position: absolute;buttom:-10px;left:0px;" @click="splitsimg">旋转</button>-->
          <textarea id="Console" disabled="disabled"></textarea>
          <IMG id="cam"  :src="cameraurl" width="640" height="640">
          </IMG>
        </div>
<!--        <div class="IdCard">-->
<!--          <div class="auto IdInputDiv" style="margin-top: 20px"><strong class="IdHint">姓&emsp;&emsp;名</strong><input size=49 id="Name" class="IdInput"></div>-->
<!--          <div class="auto IdInputDiv" ><strong class="IdHint">性&emsp;&emsp;别</strong><input type="text" size=49 id="Sex" class="IdInput"></div>-->
<!--          <div class="auto IdInputDiv" ><strong class="IdHint">民&emsp;&emsp;族</strong><input type="text" size=49 id="Nation" class="IdInput"></div>-->
<!--          <div class="auto IdInputDiv"><strong class="IdHint">出&emsp;&emsp;生</strong><input type="text" size=49 id="Born" class="IdInput"></div>-->
<!--          <div class="auto IdInputDiv"><strong class="IdHint">地&emsp;&emsp;址</strong><input type="text" size=49 id="Address" class="IdInput"></div>-->
<!--          <div class="auto IdInputDiv"><strong class="IdHint">身份证号</strong><input type="text" size=49 id="CardNo" class="IdInput"></div>-->
<!--          <div class="auto IdInputDiv"><strong class="IdHint">签发机关</strong><input type="text" size=49 id="Police" class="IdInput"></div>-->
<!--          <div class="auto IdInputDiv"><strong class="IdHint">期限起始</strong><input type="text" size=49 id="ActivityLFrom" class="IdInput"></div>-->
<!--          <div class="auto IdInputDiv"><strong class="IdHint">期限失效</strong><input type="text" size=49 id="ActivityLTo" class="IdInput"></div>-->
<!--&lt;!&ndash;          <div class="auto IdInputDiv"><strong class="IdHint">设&emsp;备ID</strong><input type="text" size=49 id="DeviceNo" class="IdInput"></div>&ndash;&gt;-->
<!--          <div class="auto IdInputDiv" style="float: left"><strong class="IdHint">照片编码</strong><TEXTAREA id="PhotoBuffer"style="width: 400px;height: 92px"></TEXTAREA>-->
<!--          </div>-->
<!--          <div class="auto IdInputDiv" style="float: left"><strong class="IdHint">照&emsp;&emsp;片</strong><IMG style="width: 130px; height:169px" id=PhotoDisplay />-->
<!--          </div>-->
<!--          <div class="auto IdInputDiv" style="padding-top:45%;padding-left:35%">-->
<!--            <button class="btn btn-info" style="width: max-content" @click="confirmIdCard">确定</button>-->
<!--          </div>-->
<!--        </div>-->
        <!--<div style="display: inline-block;margin-top: 5px;margin-left: 5px;height: 640px;float: left;">-->
        <!--<IMG id="IMG3" src="" style="width:300px;height:160px;display: block">-->
        <!--<button class="btn btn-success" @click="DelPDF3()">删除图片</button>-->
        <!--<IMG id="IMG2" src="" style="width:300px;height:160px;display: block">-->
        <!--<button class="btn btn-success" @click="DelPDF2()">删除图片</button>-->
        <!--<IMG id="IMG1" src="" style="width:300px;height:160px;display: block">-->
        <!--<button class="btn btn-success" @click="DelPDF1()">删除图片</button>-->
        <!--</div>-->
      </div>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <!--<button  type="button" class="btn btn-default" @click='close'>取消</button>-->
      <!--<button  type="button" class="btn btn-success" @click='confirm(filename)'>确认</button>-->
    </footer>
  </modal>
</template>

<script>
let ws
let server_addr = 'ws://127.0.0.1:38088'// 本机端口地址
export default {
  title: '高拍仪',
  data () {
    return {
      cameraurl: '',
      jd: 'transform:rotate(0deg)',
      degs: 0
    }
  },
  props: ['show'],
  methods: {
    splitsimg () {
      this.degs += 90
      this.jd = `transform:rotate(${this.degs}deg)`
    },
    // 页面load消息
    onLoad () {
      return new Promise((resolve, reject) => {
        if (ws) {
          resolve()
        }
        // output("正在连接：" + server_addr);
        ws = new WebSocket(server_addr)
        ws.onopen = (evt) => {
          if (this.connected) {
            resolve()
          }
          this.connected = true
          console.log('已连接服务器')
          this.output('已经连接到服务器')
          // 打开视频
          console.log('打开摄像头1')
          this.cam_switch(1)
          // 打开自动裁边
          resolve()
        }
        ws.onclose = (evt) => {
          if (!this.connected) {
            window.location.href = 'FLShell://'
            setTimeout('this.onLoad()', 3)
          } else {
            this.output('已断开服务器连接')
            this.connected = false
          }
          ws = null
          reject(new Error('连接失败'))
        }
        ws.onmessage = (evt) => {
          if (evt.data.length === 0) {
            return
          }
          if (typeof evt.data === 'string') {
            let msg = JSON.parse(evt.data)
            if (msg.err && msg.err !== 0) {
              this.output('错误 - ' + msg.err + ', ' + msg.msg)
              reject('错误 - ' + msg.err + ', ' + msg.msg)
            } else if (msg.msg) {
              this.output(msg.msg)
            }

            if (msg.user_data) {
              this.callback[msg.user_data](msg)
              if (typeof msg.user_data === 'number') {
                this.callback[msg.user_data] = undefined
              }
            }
          } else {
            let file = new FileReader()
            file.onload = (evt) => {
              if (evt.target.readyState == FileReader.DONE) {
                let data = new Uint8Array(evt.target.result)
                if (data[0] == this.SVR_BIN_MSG.CAP_FRAME) {
                  return this.drawImage(data)
                }
              }
            }

            file.readAsArrayBuffer(evt.data)
          }
        }
        let canvas = document.getElementById('cam')
        canvas.onmousedown = (e) => {
          canvas.style.cursor = 'crosshair'

          this.clicked = true

          this.sendMsg(this.CLT_MSG.PRESET_MOUSEDOWN, {origX: e.layerX, origY: e.layerY}, function (msg) {
            if (msg.err !== 0) { }
          })
        }

        canvas.onmousemove = (e) => {
          if (!this.clicked) {
            canvas.style.cursor = 'default'
            return
          }
          canvas.style.cursor = 'crosshair'

          this.sendMsg(this.CLT_MSG.PRESET_MOUSEMOVE, {offx: e.layerX, offy: e.layerY}, (msg) => {
            if (msg.err !== 0) { }
          })
        }

        onmouseout = canvas.onmouseup = (e) => {
          canvas.style.cursor = 'default'
          if (!this.clicked) { return }

          this.sendMsg(this.CLT_MSG.PRESET_MOUSEUP, {offx: e.layerX, offy: e.layerY}, (msg) => {
            if (msg.err !== 0) {

            }
          })
          this.clicked = false
        }
      })
    },
    // 打开视频
    cam_switch (capID) {
      if (capID == 1) {

        this.cameraurl = 'http://127.0.0.1:38088/video=stream&camidx=0'
      }
      if (capID == 2) {
        this.cameraurl = 'http://127.0.0.1:38088/video=stream&camidx=1'
      }
    },
    // 关闭视频
    CloseVideo () {
      this.cameraurl = ''
    },
    openApp () {
      window.location.href = 'cameraServicetis:0' // 启动 CameraService 服务程序
    },
    // //获取初始化结果
    // GetInitRet(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.GET_EVENT,(msg)=> {
    //       if(msg.err !== 0){
    //         this.iswaiting = false
    //         return
    //       }
    //   let event = msg.event
    //   switch(event){
    //     case 2:
    //       this.output("设备连接中断，请重新连接后再次打开视频。");
    //       break
    //
    //     case 1:
    //       this.output("初始化成功");
    //       break;
    //
    //     case 0:
    //       this.output("设备非法");
    //       break
    //   }
    //   this.iswaiting = false
    //   })
    // },
    // //获取PID
    // GetPid(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.GET_PID, (msg) => {
    //     if(msg.err !== 0) {
    //       this.iswaiting = false
    //       return
    //     }
    //
    //     this.output("pid : " + msg.pid)
    //     this.iswaiting = false
    //   })
    // },
    // //获取分辨率
    // GetFbl(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true;
    //   this.sendMsg(this.CLT_MSG.GET_FBL, (msg) => {
    //     if(msg.err !== 0) {
    //       this.iswaiting = false;
    //       return;
    //     }
    //
    //     this.output("分辨率 : " + msg.fbl);
    //     this.iswaiting = false
    //   });
    // },
    // //设置分辨率
    // SetResolution(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   let first = false
    //   let second = false
    //   this.sendMsg(this.CLT_MSG.SET_MJPG, {isMJPG:1},(msg) => {   //设置MJPG格式
    //     if(msg.err !== 0) {
    //       first = true
    //       if(first == true && second == true){
    //         this.iswaiting = false
    //         return
    //       }
    //     }
    //     this.output("MJPG : " + 1)
    //     first = true
    //     if(first == true && second == true){
    //       this.iswaiting = false
    //     }
    //   })
    //   this.sendMsg(this.CLT_MSG.SET_FBL, {width:800,height:600},(msg) => {  //设置分辨率
    //     if(msg.err !== 0) {
    //       second = true
    //       if(first == true && second == true){
    //         this.iswaiting = false
    //       }
    //       return
    //     }
    //     this.output("设置分辨率 : width=" + 800 + ",height=" + 600)
    //     second = true
    //     if(first == true && second == true){
    //       this.iswaiting = false
    //     }
    //   })
    // },
    // //设置视频旋转方向
    // SetOrientation(){
    //   let oriT = 0
    //   //	设置转动 0 正常 1 上下转 2 左转 3 右转
    //   if(this.iswaiting){
    //     return
    //   }
    //   this.iswaiting = true
    //   oriT = 2
    //   if(oriT == 1){
    //     this.rotanumber = 2
    //   }else if(oriT == 2){
    //     this.rotanumber = 3
    //   }else if(oriT == 3){
    //     this.rotanumber = 1
    //   }
    //   this.sendMsg(this.CLT_MSG.SET_TURN, {turn:oriT},(msg) => {
    //     if(msg.err !== 0) {
    //       this.iswaiting = false
    //       return
    //     }
    //
    //     this.output("设置旋转 : turn=" + oriT)
    //     this.iswaiting = false
    //   });
    // },
    // //设置视频旋转方向
    // SetLeft(){
    //   //	设置转动 0 正常 1 上下转 2 左转 3 右转
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.rotanumber--;
    //   let T = 0;
    //   if(this.rotanumber%4 == 0){
    //     T = 0;
    //   }else if(this.rotanumber%4 == -1 || this.rotanumber%4 == 3){
    //     T = 2;
    //   }else if(this.rotanumber%4 == -2 || this.rotanumber%4 == 2){
    //     T = 1;
    //   }else if(this.rotanumber%4 == -3 || this.rotanumber%4 == 1){
    //     T = 3
    //   }
    //   this.sendMsg(this.CLT_MSG.SET_TURN, {turn:T},(msg) => {
    //     if(msg.err !== 0) {
    //       this.iswaiting = false
    //       return
    //     }
    //     this.output("设置旋转 : turn=" + T)
    //     this.iswaiting = false
    //   })
    // },
    // //设置视频旋转方向
    // SetRight(){
    //   //	设置转动 0 正常 1 上下转 2 左转 3 右转
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.rotanumber++;
    //   var T = 0;
    //   if(this.rotanumber%4 == 0){
    //     T = 0
    //   }else  if(this.rotanumber%4 == 1 || this.rotanumber%4 == -3){
    //     T = 3
    //   }else  if(this.rotanumber%4 == 2 || this.rotanumber%4 == -2){
    //     T = 1
    //   }else  if(this.rotanumber%4 == 3 || this.rotanumber%4 == -1){
    //     T = 2
    //   }
    //   this.sendMsg(this.CLT_MSG.SET_TURN, {turn:T},(msg) => {
    //     if(msg.err !== 0) {
    //       this.iswaiting = false
    //       return
    //     }
    //
    //     this.output("设置旋转 : turn=" + T)
    //     this.iswaiting = false
    //   })
    // },
    // 设置截图保存的jpg格式压缩质量
    SetQuality () {
      if (this.iswaiting) return
      this.iswaiting = true
      this.sendMsg(this.CLT_MSG.SET_QUALITY, {quality: 50}, (msg) => {
        if (msg.err !== 0) {
          this.iswaiting = false
          return
        }
        this.output('设置拍照图片质量 : quality=' + 50)
        this.iswaiting = false
      })
    },
    // 设置自动裁边开启
    SetAutoCutOn () {
      console.log('设置自动采编')
      if (this.iswaiting) return
      this.iswaiting = true
      this.sendMsg(this.CLT_MSG.SET_AUTOCROP, {open: 1}, (msg) => {
        if (msg.err !== 0) {
          this.iswaiting = false
          return
        }
        this.output('设置自动裁边 : open=' + 1)
        this.iswaiting = false
      })
    },
    // 设置自动裁边关闭
    SetAutoCutOff () {
      if (this.iswaiting) return
      this.iswaiting = true
      this.sendMsg(this.CLT_MSG.SET_AUTOCROP, {open: 0}, (msg) => {
        if (msg.err !== 0) {
          this.iswaiting = false
          return
        }
        this.output('设置自动裁边 : open=' + 0)
        this.iswaiting = false
      })
    },
    // //设置预设框选
    // SetBox(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.resetx = 20
    //   this.resety = 20
    //   this.resetwidth = 300
    //   this.resetheight = 400
    //   this.sendMsg(this.CLT_MSG.SET_PREST, {left:this.resetx, top:this.resety, width:this.resetwidth, height:this.resetheight},(msg) =>{
    //     if(msg.err !== 0) {
    //       this.iswaiting = false
    //       return
    //     }
    //     this.output("设置预设框选 : left=" + this.resetx + ",top=" + this.resety + ",width=" + this.resetwidth + ",height=" + this.resetheight);
    //     this.iswaiting = false;
    //   })
    // },
    // //获取当前预设框选参数
    // ShowResetInfo(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.GET_PREST_INFO, (msg) => {
    //     if(msg.err !== 0) {
    //       this.iswaiting = false
    //       return
    //     }
    //     this.output("当前预设 : " + msg.prest_info)
    //     this.iswaiting = false
    //   })
    // },
    // 取消预设框选
    ResetBox () {
      if (this.iswaiting) return
      this.iswaiting = true
      this.sendMsg(this.CLT_MSG.SET_PREST, {left: 0, top: 0, width: 0, height: 0}, (msg) => {
        if (msg.err !== 0) {
          this.iswaiting = false
          return
        }
        this.resetx = 0
        this.resety = 0
        this.resetwidth = 0
        this.resetheight = 0
        this.output('取消预设框选')
        this.iswaiting = false
      })
    },
    // //视频格式弹窗
    // FormatDlg(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.FORMAT_DLG,(msg) => {
    //     if(msg.err !== 0) {
    //       this.iswaiting = false;
    //       return
    //     }
    //     this.iswaiting = false;
    //   })
    // },
    // //视频属性弹窗
    // PropertyDlg(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.PROPERTY_DLG,(msg) => {
    //     if(msg.err !== 0) {
    //       this.iswaiting = false;
    //       return
    //     }
    //     this.iswaiting = false;
    //   })
    // },
    // //设置颜色模式 只针对截图
    bb () {
      let camidx = 0
      if (this.cameraurl === 'http://127.0.0.1:38088/video=stream&camidx=0') {
        camidx = 0
      } else if (this.cameraurl === 'http://127.0.0.1:38088/video=stream&camidx=1') {
        camidx = 1
      } else {
        this.$showAlert('请先打开视频', 'warning', 2000)
        return
      }
      let param = {
        camidx: camidx
      }
      this.$resetpost('http://127.0.0.1:38088/video=grabimage', param).then((msg) => {   // 截图
        console.log(msg)

        if (msg.data.code != '0') {
          this.$showAlert(msg.data.message, 'warning', 2000)
          return
        }
        let s = 'data:image/jpg;base64,' + msg.data.photoBase64
        document.getElementById('Base64IMG').src = s// 网页预览图片

        this.output('base64 长度 : ' + s.length)
         console.log(msg.data.photoBase64)
        this.$emit('photo-finish', msg.data.photoBase64)
        // document.getElementById("Base64IMG").src= "D:\\1234.jpg?" + Math.random();//网页预览图片
      })
    },
    // 内存截图
    bbase64 () {
      if (this.iswaiting) return
      this.iswaiting = true
      this.sendMsg(this.CLT_MSG.GET_PICTURE_MEM, {turn: 0}, (msg) => {
        if (msg.err !== 0) {
          this.iswaiting = false
          return
        }
        let s = 'data:image/jpg;base64,' + msg.base64str
        document.getElementById('Base64IMG').src = s// 网页预览图片
        alert(s)
        this.output('base64 长度 : ' + s.length)
        this.iswaiting = false
      })
    },
    // base64编码测试
    TestBase64 () {
      if (this.iswaiting) return
      this.iswaiting = true
      this.sendMsg(this.CLT_MSG.TEST_BASE64, {code: '123456789'}, (msg) => {
        if (msg.err !== 0) {
          this.iswaiting = false
          return
        }
        this.output('base64 内容 : ' + msg.base64str)
        this.iswaiting = false
      })
    },
    // //开启去底色
    // bbStartClean(){
    //   if(this.iswaiting) return;
    //   this.iswaiting = true;
    //   this.sendMsg(this.CLT_MSG.SET_CLEAN_PARAM,{param1:280,param2:1.15,param3:8},(msg) => {
    //     if(msg.err !== 0){
    //       this.iswaiting = false
    //       return
    //     }
    //     this.output("去底色: " + 280 + "," + 1.15 + "," + 8)
    //     this.iswaiting = false
    //   })
    // },
    // //关闭去底色
    // bbCloseClean(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.SET_CLEAN_PARAM,{param1:-1},(msg) => {
    //     if(msg.err !== 0){
    //       this.iswaiting = false;
    //       return
    //     }
    //     this.output("去底色: " + -1);
    //     this.iswaiting = false;
    //   });
    // },
    // //设置制作PDF临时目录
    // SetPDFPath(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.SET_TEMPDIR,{path:"d:\\tp\\temp"},(msg) => {
    //     if(msg.err !== 0){
    //       this.iswaiting = false
    //       return
    //     }
    //     this.output("设置PDF路径: " + "d:\\tp\\temp")
    //     this.iswaiting = false
    //   })
    // },
    // //开始制作PDF
    // BeginPDF(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.BEGIN_PDF,(msg) => {
    //     if(msg.err !== 0){
    //       this.iswaiting = false
    //       return
    //     }
    //     this.output("开始制作PDF")
    //     this.iswaiting = false
    //   })
    // },
    // //PDF截图 保存到PDF临时目录
    // GetPDF(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.GET_PDF_PICTURES,{turn:0},(msg) => {
    //     if(msg.err !== 0){
    //       this.iswaiting = false
    //       return
    //     }
    //     // let s =  "file://" + msg.path
    //     let s = "data:image/jpg;base64," + msg.base64str;
    //     document.getElementById("IMG1").src= null;
    //     document.getElementById("IMG1").src= document.getElementById("IMG2").src;
    //
    //     document.getElementById("IMG2").src= null;
    //     document.getElementById("IMG2").src= document.getElementById("IMG3").src;
    //
    //     document.getElementById("IMG3").src= null;
    //     document.getElementById("IMG3").src= s;
    //     this.output("PDF 文件 : " + msg.path + ",PDF文件 BASE64码长度：" + msg.base64str.length);
    //     this.iswaiting = false;
    //   })
    // },
    // // 结束制作PDF
    // EndPDF(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.END_PDF_PICTURES,{path:"D:\\tp\\1234.pdf"},(msg) => {
    //     if(msg.err !== 0){
    //       this.iswaiting = false
    //       return
    //     }
    //     this.output("结束PDF PDF文件：" + "D:\\tp\\1234.pdf");
    //     this.iswaiting = false;
    //   })
    // },
    // //PDF文件转码成BASE64文件   适合所有格式文件 非PDF也可使用
    // PDFtoBASE64(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.PDF_TO_BASE64,{src:"D:\\tp\\1234.pdf",des:"D:\\tp\\temp\\1234.txt"},(msg) => {
    //     if(msg.err !== 0){
    //       this.iswaiting = false
    //       if(msg.err == 108){return this.output("读文件错误")}
    //       if(msg.err == 109){return this.output("写文件错误")}
    //     }
    //     this.output("文件 ：" + "D:\\tp\\1234.pdf" + "转成base64 ：" + "D:\\tp\\temp\\1234.txt");
    //     this.iswaiting = false
    //   })
    // },
    // //base64文件转成PDF文件 适合所有文件 非PDF文件也可使用
    // BASE64toPDF(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.BASE64_TO_PDF,{src:"D:\\tp\\temp\\1234.txt",des:"D:\\tp\\pdfpdf.pdf"},(msg) => {
    //     if(msg.err !== 0){
    //       this.iswaiting = false;
    //       if(msg.err == 108){return this.output("读文件错误")}
    //       if(msg.err == 109){return this.output("写文件错误")}
    //     }
    //     this.output("base64文件: " + "D:\\tp\\temp\\1234.txt" + "转成:" + "D:\\tp\\pdfpdf.pdf")
    //     this.iswaiting = false
    //   })
    // },
    // //PDF文件转成BASE64码字符串 适合所有文件 非PDF文件也可使用
    // PDFtoBASE64Str(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.PDF_TO_BASE64_STR,{file:"D:\\tp\\pdfpdf.pdf"},(msg) => {
    //     if(msg.err !== 0){
    //       this.iswaiting = false
    //       if(msg.err == 108){return this.output("读文件错误")}
    //     }
    //     alert(msg.base64str)
    //     this.output("文件 BASE64 长度: " + msg.base64str.length)
    //     this.iswaiting = false
    //   })
    // },
    // //打印图片
    // printimage(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.PRINT_IMAGE,{file:"D:\\tp\\1234.jpg"},(msg) => {
    //     if(msg.err !== 0){ //错误消息可以不用处理 在config.js中已经有了统一的打印处理 在output函数中设置打印位置
    //       this.iswaiting = false;
    //       if(msg.err == 112){return this.output("开启打印机错误");}
    //       if(msg.err == 111){return this.output("请检查打印机纸张");}
    //       if(msg.err == 110){return this.output("没有默认打印机");}
    //     }
    //     this.output("打印作业号: " + msg.print_no);
    //     this.iswaiting = false;
    //   })
    // },
    // //显示错误弹窗
    // ShowErrorInfo(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.SHOW_ERROR_BOX,{on:1},(msg) => {
    //     if(msg.err !== 0){
    //       this.iswaiting = false
    //       return
    //     }
    //     this.output("错误提示开关：" + 1)
    //     this.iswaiting = false;
    //   })
    // },
    // //删除制作PDF的图片文件
    // DelPDF3(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.DEL_PICTURE_PDF,{file:1},(msg) => {
    //     if(msg.err !== 0){
    //       this.iswaiting = false
    //       return
    //     }
    //     this.output("删除PDF图片文件成功")
    //     this.iswaiting = false
    //   })
    //   document.getElementById("IMG3").src= null;
    //   document.getElementById("IMG3").src= document.getElementById("IMG2").src;
    //
    //   document.getElementById("IMG2").src= null;
    //   document.getElementById("IMG2").src= document.getElementById("IMG1").src;
    //
    //   document.getElementById("IMG1").src= null;
    // },
    // //删除制作PDF的临时图片文件
    // DelPDF2(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.DEL_PICTURE_PDF,{file:2},(msg) => {
    //     if(msg.err !== 0){
    //       this.iswaiting = false
    //       return
    //     }
    //     this.output("删除PDF图片文件成功")
    //     this.iswaiting = false
    //   })
    //   document.getElementById("IMG2").src= null;
    //   document.getElementById("IMG2").src= document.getElementById("IMG1").src;
    //   document.getElementById("IMG1").src= null;
    // },
    // //删除制作PDF的临时图片文件
    // DelPDF1(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   this.sendMsg(this.CLT_MSG.DEL_PICTURE_PDF,{file:3},(msg) => {
    //     if(msg.err !== 0){
    //       this.iswaiting = false;
    //       return
    //     }
    //     this.output("删除PDF图片文件成功")
    //     this.iswaiting = false
    //   })
    //   document.getElementById("IMG1").src= null;
    // },
    // //人证对比
    // IDCardCompare(){
    //   if(this.iswaiting) return
    //   this.iswaiting = true
    //   let send = {file1:"D:\\1.jpg",file2:"D:\\2.jpg"}
    //   this.sendMsg(this.CLT_MSG.IDCARD_COMPARE,send,(msg) => {
    //     if(msg.err !== 0){
    //       this.iswaiting = false
    //       return
    //     }
    //     this.output("对比完成:" + send.file1 + "与" + send.file2 + "相似度"+ msg.cmpresult)
    //     this.iswaiting = false
    //   })
    // },
    ReadIDCard () {
      return this.sendMsg(this.CLT_MSG.READ_IDCARD, (msg) => {
        if (msg.code !== 0) { return }
        this.setText(msg.IDCardInfo)
        this.output('单读卡')
      })
    },
    // 读身份证
    Begin () {
      this.$resetpost('http://127.0.0.1:38088/card=idcard', {}).then((msg) => {   // 截图
        console.log(msg)

        if (msg.data.code != '0') {
          this.$showAlert(msg.data.message, 'warning', 2000)
          return
        }else{
          this.setText(msg.data.IDCardInfo)
        }

        this.output('读取身份证')

        // document.getElementById("Base64IMG").src= "D:\\1234.jpg?" + Math.random();//网页预览图片
      })
      this.output('开始读卡')
    },
    // 停止读身份证
    Stop () {
      this.sendMsg(this.CLT_MSG.STOP_READ_IDCARD, (msg) => {
        if (msg.err !== 0) { return }
        this.output('停止读卡')
      })
    },
    // //横向复印
    // HCopy(){
    //   this.sendMsg(this.CLT_MSG.HCOPY_IDCARD, {copy_path:"D:\\"},(msg) => {
    //     if(msg.err !== 0){return}
    //     document.getElementById("IDCardDisplay").src = "data:image/jpg;base64," + msg.hcopy
    //     this.sendMsg(this.CLT_MSG.PRINT_IMAGE,{file:msg.filename},(msg2) => {
    //       if(msg2.err !== 0){ return}
    //       his.output("打印作业号: " + msg2.print_no)
    //     })
    //     this.output("横向复印" + msg.filename)
    //   })
    // },
    // //竖向复印
    // VCopy(){
    //   this.sendMsg(this.CLT_MSG.VCOPY_IDCARD, {copy_path:"D:\\"},(msg) => {
    //     if(msg.err !== 0){return}
    //     document.getElementById("IDCardDisplay").src = "data:image/jpg;base64," + msg.vcopy;
    //     this.sendMsg(this.CLT_MSG.PRINT_IMAGE,{file:msg.filename},(msg2) => {
    //       if(msg2.err !== 0){ return}
    //       this.output("打印作业号: " + msg2.print_no)
    //     })
    //     this.output("竖向复印" + msg.filename)
    //   })
    // },
    // //正面复印
    // PCopy(){
    //   this.sendMsg(this.CLT_MSG.PCOPY_IDCARD, {copy_path:"D:\\"},(msg) => {
    //     if(msg.err !== 0){return}
    //     document.getElementById("IDCardDisplay").src = "data:image/jpg;base64," + msg.pcopy
    //     this.sendMsg(this.CLT_MSG.PRINT_IMAGE,{file:msg.filename},(msg2) => {
    //       if(msg2.err !== 0){ return}
    //       this.output("打印作业号: " + msg2.print_no)
    //     })
    //     this.output("正面复印" + msg.filename)
    //   })
    // },
    // //反面复印
    // NCopy(){
    //   this.sendMsg(this.CLT_MSG.NCOPY_IDCARD, {copy_path:"D:\\"},(msg) => {
    //     if(msg.err !== 0){return}
    //     document.getElementById("IDCardDisplay").src = "data:image/jpg;base64," + msg.ncopy
    //     this.sendMsg(this.CLT_MSG.PRINT_IMAGE,{file:msg.filename},(msg2) => {
    //       if(msg2.err !== 0){ return}
    //       this.output("打印作业号: " + msg2.print_no)
    //     })
    //     this.output("反面复印" + msg.filename)
    //   })
    // },
    // 视频帧绘制函数
    drawImage (data) {
      // 校验视频是否在一定时间内的
      if (!this.checkTimestamp(data[2] * 256 + data[1])) {
        return
      }
      // 视频帧头有时间戳 注意偏移 和 大小端处理
      let width = data[this.base_offset + 1] * 256 + data[this.base_offset]
      let height = data[this.base_offset + 3] * 256 + data[this.base_offset + 2]

      let cam = document.getElementById('cam')
      let context = cam.getContext('2d')
      if (this.orgdrawwidth != width || this.orgdrawheight != height) {
        this.orgdrawwidth = width
        this.orgdrawheight = height
        cam.height = cam.height
      }

      let image = context.createImageData(width, height)
      for (let n = 0; n != height; ++n) {
        for (let m = 0; m != width; ++m) {
          let image_offset = ((height - n - 1) * width + m) * 4
          let data_offset = (n * width + m) * 3 + this.base_offset + 4
          image.data[image_offset] 			= data[data_offset + 2]
          image.data[image_offset + 1] 	= data[data_offset + 1]
          image.data[image_offset + 2] 	= data[data_offset]
          image.data[image_offset + 3] 	= 255
        }
      }
      context.putImageData(image, 0, 0)
    },
    checkTimestamp (svr_time) {
      let myDate = new Date()
      let clt_time = myDate.getSeconds() * 1000 + myDate.getMilliseconds()
      if (clt_time < svr_time) {
        clt_time += 60 * 1000
      }
      return clt_time - svr_time < 3000
    },
    sendMsg (proto, msg, cb) {
      if (!ws) {
        return
      }

      if (typeof msg !== 'object') {
        if (typeof msg === 'function') {
          cb = msg
          msg = {}
        } else {
          msg = {}
        }
      }

      msg.proto = proto
      if (typeof cb === 'function') {
        this.callback[++this.context] = cb
        msg.user_data = this.context
      }

      ws.send(JSON.stringify(msg))
    },
    output (content) {
      if (content.length == 0) {	return }
      let console = document.getElementById('Console')
      console.value += content
      console.value += '\r'
      console.scrollTop = console.scrollHeight
    },
    // 显示读到的身份证信息
    setText (msg) {
      document.getElementById('Name').value = msg.name
      document.getElementById('Sex').value = msg.sex
      document.getElementById('Nation').value = msg.nation
      document.getElementById('Born').value = msg.birthday
      document.getElementById('Address').value = msg.address
      document.getElementById('CardNo').value = msg.cardID
      document.getElementById('Police').value = msg.issueOrgan
      document.getElementById('ActivityLFrom').value = msg.validStart
      document.getElementById('ActivityLTo').value = msg.validEnd
      // document.getElementById('DeviceNo').value = msg.validEnd
      document.getElementById('PhotoBuffer').value = msg.fingerBase64
      document.getElementById('PhotoDisplay').src = 'data:image/jpg;base64,' + msg.photoBase64
      this.IdCardInfo = msg
    },
    close () {
      this.show = !this.show
      if (this.isopen) {
        this.CloseVideo()
      }
    },
    confirmIdCard () {
      let param = this.IdCardInfo
      param.strName=this.IdCardInfo.name
      param.strID=this.IdCardInfo.cardID
      this.$emit('confirminfo', param)
      this.IdCardInfo = {}
    }
  },
  ready () {
    this.onLoad().then(() => {
      this.$emit('ready')
    }).catch((error) => {
      this.$emit('error', error)
    })
  }
}
</script>

<style scoped>
.modal-bk{
  border-radius:18px 0;
}
.header{
  background-color: #d8e9f3;
  height: 88px;
}
.title{
  position: absolute;
  font-family:PingFang-SC-Bold;
  font-size:36px;
  color: #666666;
  margin-top: 32px;
  margin-left: 300px;
  margin-bottom: 0px;
}
.operation{
  font-family:PingFang-SC-Medium;
  font-size: 22px;
  color:#666666;
  line-height: 5px;
}
.operation-group{
  margin-left: 36px;
  margin-top: 20px;
}
.photo{
  font-family: PingFang-SC-Medium;
  font-size: 20px;
  color: #ffffff;
  margin-left: 20px;
  border-radius: 4px;
  background-color: #2fadf5;
  height: 32px;
  width: 92px;
  line-height:12px;
}
.readIDCard{
  font-family: PingFang-SC-Medium;
  font-size: 20px;
  color: #ffffff;
  border-radius: 4px;
  background-color: #2fadf5;
  margin-left: 20px;
  width: 120px;
  height: 32px;
  line-height: 12px;
}
.stop{
  border-radius: 4px;
  border: 1px solid #2fadf5;
  font-family: PingFang-SC-Medium;
  font-size: 20px;
  color: #2fadf5;
  width: 120px;
  height: 32px;
  line-height: 12px;
}
.showInfo{
  float: left;
  width: 640px;
  display: inline-block;
  margin-top: 20px;
  margin-left: 36px;
}
#Console{
  margin-left: 18px;
  border-radius: 4px;
  border: 1px solid #b5b5b5;
  height:300px;
  width:322px;
  resize:none;
  background-color: #f6f6f6;
}
.img{
  height:300px;
  width:300px;
  float: left;
  border-radius: 4px;
  border: 1px solid #b5b5b5;
}
#cam{
  border-radius: 4px;
  border:1px solid #b5b5b5;
  display: inline-block
}
.IdCard{
  height: 950px;
  width: 692px;
  display: inline-block;
  border-radius: 20px;
  background-color: #fafafa;
  border: 1px solid #d8f1ff;
  margin-left: 40px;
  margin-top: 20px;
}
.IdInput{
  border-radius: 4px;
  border: 1px solid #939393;
  width: 400px;
  height: 38px;
  margin-left: 20px;
}
.IdInputDiv{
  margin-top: 20px;
  margin-left: 100px;
}
.IdHint{
  font-family: PingFang-SC-Medium;
  font-size: 18px;
  color: #7e7c81;
}
#PhotoBuffer,#PhotoDisplay{
  border-radius: 4px;
  background-color: #ffffff;
  border: 1px solid #939393;
  margin-left: 20px;
}
</style>
