<template>
  <modal :show.sync="show" v-ref:modal backdrop="false" width="820px">
    <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">高拍仪(CUZR)</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="CZUR_ID_Initialize()">初始化</button>
          <button class="btn btn-info" @click="CZUR_ID_OpenDevice(0)">打开主摄像头</button>
          <button class="btn btn-info photo" @click="CZUR_ID_GrabBase64()">拍照</button>
        </div>
        <div class="showInfo flex">
          <!--          <IMG ID="Base64IMG" src="" class="img"></IMG>-->
          <canvas style="background:black" id="base64img" width="400px" height="300px"></canvas>
          <textarea id="TextArea1" rows="10" disabled="disabled"></textarea>
          <canvas style="background:black" id="mframe" width="400px" height="300px"></canvas>
          <canvas v-show="false" style="background:black" id="sframe" width="0" height="0"></canvas>
          <IMG v-show="false" v-model="src" id="img"></IMG>-->
        </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>
var m_cav_frame = null;
var m_ctx_frame = null;
var m_img_frame = new Image();

var s_cav_frame = null;
var s_ctx_frame = null;
var s_img_frame = null

//显示jpg(BASE64编码)图像数据
var j_cav_base64 = null;
var j_ctx_base64 = null;
var j_img_base64 = new Image();

var txtlog = null;

//记录主头处理方式
var m_process_type = 0;
//记录副头处理方式，0(不处理)、1(手动框选裁剪)、2(人脸对比)
var s_process_type = 0;

//标记当前是否按下鼠标左键
var is_down_m = false;
//记录主头手动框选裁剪得矩形框
var m_left = null;
var m_top = null;
var m_right = null;
var m_bottom = null;

//标记当前是否按下鼠标左键
var is_down_s = false;
//记录副头需要绘制的矩形框坐标
var s_left = null;
var s_top = null;
var s_right = null;
var s_bottom = null;

//记录主头自动裁剪边框坐标
var m_x1 = 0, m_y1 = 0, m_x2 = 0, m_y2 = 0, m_x3 = 0, m_y3 = 0, m_x4 = 0, m_y4 = 0;

//记录副头人脸检测区域坐标
var s_x1 = 0, s_y1 = 0, s_x2 = 0, s_y2 = 0, s_x3 = 0, s_y3 = 0, s_x4 = 0, s_y4 = 0;

//是否绘制主头视频画面
var is_draw_m_frame = false;
//是否绘制副头视频画面
var is_draw_s_frame = false;

//主头通道信息
var ws_mc = null;
var mc_svc_port = 9999;
var mc_svc_connect = false;

//副头通道信息
var ws_sc = null;
var sc_svc_port = 10001;
var sc_svc_connect = false;

//指令通道信息
var ws_cmd = null;
var cmd_svc_port = 25014;
var cmd_svc_connect = false;

function DrawRect(index) {
  //主头区域
  if (index == 0) {
    m_ctx_frame.shadowBlur = 5;
    m_ctx_frame.shadowColor = "rgba(0,0,0,0.5)";
    m_ctx_frame.strokeStyle = "#FF0000";
    m_ctx_frame.lineWidth = 2;
    m_ctx_frame.beginPath();
    m_ctx_frame.rect(m_left, m_top, m_right - m_left, m_bottom - m_top);
    m_ctx_frame.stroke();
  } else //副头区域
  {
    s_ctx_frame.shadowBlur = 5;
    s_ctx_frame.shadowColor = "rgba(0,0,0,0.5)";
    s_ctx_frame.strokeStyle = "#FF0000";
    s_ctx_frame.lineWidth = 2;
    s_ctx_frame.beginPath();
    s_ctx_frame.rect(s_left, s_top, s_right - s_left, s_bottom - s_top);
    s_ctx_frame.stroke();
  }
}

function DrawMLine() {
  m_ctx_frame.shadowBlur = 5;
  m_ctx_frame.shadowColor = "rgba(0,0,0,0.5)";
  m_ctx_frame.strokeStyle = "#00FF00";
  m_ctx_frame.lineWidth = 2;
  m_ctx_frame.beginPath();
  m_ctx_frame.moveTo(m_x1, m_y1);
  m_ctx_frame.lineTo(m_x2, m_y2);
  m_ctx_frame.lineTo(m_x3, m_y3);
  m_ctx_frame.lineTo(m_x4, m_y4);
  m_ctx_frame.lineTo(m_x1, m_y1);
  m_ctx_frame.stroke();
}

function DrawSLine() {
  s_ctx_frame.shadowBlur = 5;
  s_ctx_frame.shadowColor = "rgba(0,0,0,0.5)";
  s_ctx_frame.strokeStyle = "#00FF00";
  s_ctx_frame.lineWidth = 2;
  s_ctx_frame.beginPath();
  s_ctx_frame.moveTo(s_x1, s_y1);
  s_ctx_frame.lineTo(s_x2, s_y2);
  s_ctx_frame.lineTo(s_x3, s_y3);
  s_ctx_frame.lineTo(s_x4, s_y4);
  s_ctx_frame.lineTo(s_x1, s_y1);
  s_ctx_frame.stroke();
}
function CZUR_ID_Deintialize()
{
  var jsonMsg = {
    id: 3
  };
  ws_cmd.send(JSON.stringify(jsonMsg));
}
//清除CZURPlugin环境反馈，格式: {"id": 4, "error": 错误代码}
function CZUR_ID_Deintialize_Response(jsonObj)
{
  txtlog.value = "清除CZURPlugin成功\r\n" + txtlog.value;
}
function connect_mc_svc() {
  if (mc_svc_connect == true) {
    // alert("已连接主头服务器");
    return;
  }

  var url = "ws://localhost:" + mc_svc_port + "/";

  if ('WebSocket' in window) {
    ws_mc = new WebSocket(url);
  } else if ('MozWebSocket' in window) {
    ws_mc = new MozWebSocket(url);
  } else {
    alert("浏览器不支持WebSocket");
  }
  mcWebSocketEvent();
}

function mcWebSocketEvent() {
  ws_mc.onopen = function () {
    mc_svc_connect = true;
    txtlog.value = "成功连接主头服务器\r\n" + txtlog.value;
  }

  ws_mc.onclose = function () {
    is_draw_m_frame = false;
    mc_svc_connect = false;
    txtlog.value = "与主头服务器连接中断\r\n" + txtlog.value;
  }

  ws_mc.onmessage = function (e) {
    if (is_draw_m_frame) {
      m_img_frame.crossOrigin = 'anonymous';
      m_img_frame.src = 'data:image/jpeg;base64,' + e.data;

      m_img_frame.onload = function (e) {
        m_ctx_frame.drawImage(m_img_frame, 0, 0, m_cav_frame.width, m_cav_frame.height);

        if (1 == m_process_type) {
          DrawRect(0);
        } else if (2 == m_process_type) {
          DrawMLine();
        }
      }
    }
  }
}

function connect_sc_svc() {
  if (sc_svc_connect == true) {
    // alert("已连接副头服务器");
    return;
  }

  var url = "ws://localhost:" + sc_svc_port + "/";

  if ('WebSocket' in window) {
    ws_sc = new WebSocket(url);
  } else if ('MozWebSocket' in window) {
    ws_sc = new MozWebSocket(url);
  } else {
    // alert("浏览器不支持WebSocket");
  }
  scWebSocketEvent();
}

function scWebSocketEvent() {
  ws_sc.onopen = function () {
    sc_svc_connect = true;
    txtlog.value = "成功连接副头服务器\r\n" + txtlog.value;
  }

  ws_sc.onclose = function () {
    is_draw_s_frame = false;
    sc_svc_connect = false;
    txtlog.value = "与副头服务器连接中断\r\n" + txtlog.value;
  }

  ws_sc.onmessage = function (e) {
    if (is_draw_s_frame) {
      s_img_frame.crossOrigin = 'anonymous';
      s_img_frame.src = 'data:image/jpeg;base64,' + e.data;

      s_img_frame.onload = function (e) {
        s_ctx_frame.drawImage(s_img_frame, 0, 0, s_cav_frame.width, s_cav_frame.height);

        if (1 == s_process_type) //手动框选裁剪，绘制裁剪的矩形区域
        {
          DrawRect(1);
        } else if (2 == s_process_type) //人脸对比，绘制脸部矩形区域
        {
          DrawSLine();
        }
      }
    }
  }
}

//将身份证读取结果通知给调用者
function CZUR_ID_CVR(jsonObj) {
  var error = jsonObj.error;

  switch (error) {
    case 0: {
      if (0 == jsonObj.type) {
        //jsonObj.header为身份证的头像的JPG(BASE64编码)图像数据，demo中不做显示处理，用户自行决定处理
        txtlog.value = "有效期限: " + jsonObj.startdate + " - " + jsonObj.enddate + "\r\n" + txtlog.value;
        txtlog.value = "签发机关: " + jsonObj.agency + "\r\n" + txtlog.value;
        txtlog.value = "公民身份号码: " + jsonObj.cardno + "\r\n" + txtlog.value;
        txtlog.value = "住址: " + jsonObj.address + "\r\n" + txtlog.value;
        txtlog.value = "出生日期: " + jsonObj.birthday + "\r\n" + txtlog.value;
        txtlog.value = "民族: " + jsonObj.nation + "\r\n" + txtlog.value;
        txtlog.value = "性别: " + jsonObj.sex + "\r\n" + txtlog.value;
        txtlog.value = "姓名: " + jsonObj.name + "\r\n" + txtlog.value;

        txtlog.value = "成功读取到身份证信息: \r\n" + txtlog.value;
      } else {
        if (1 == jsonObj.type) {
          txtlog.value = "合成正反面成功，文件名称: " + jsonObj.image + "\r\n" + txtlog.value;
        }
      }
    }
      break;

    case 1: {
      txtlog.value = "读取身份证信息发生异常错误\r\n" + txtlog.value;
    }
      break;

    case 3: {
      txtlog.value = "系统内存不足\r\n" + txtlog.value;
    }
      break;

    case 36: {
      txtlog.value = "保存图像文件失败\r\n" + txtlog.value;
    }
      break;

    case 45: {
      txtlog.value = "打开读卡器失败\r\n" + txtlog.value;
    }
      break;

    case 46: {
      txtlog.value = "未检测到身份证，请放置身份证，再次尝试\r\n" + txtlog.value;
    }
      break;

    case 47: {
      txtlog.value = "读取身份证信息失败\r\n" + txtlog.value;
    }
      break;
  }
}

//将社保卡读取结果通知给调用者
function CZUR_ID_SSC(jsonObj) {
  var error = jsonObj.error;

  switch (error) {
    case 0: {
      txtlog.value = "出生日志: " + jsonObj.Birthday + "\r\n" + txtlog.value;
      txtlog.value = "民族: " + jsonObj.Nation + "\r\n" + txtlog.value;
      txtlog.value = "性别: " + jsonObj.Sex + "\r\n" + txtlog.value;
      txtlog.value = "姓名: " + jsonObj.Name + "\r\n" + txtlog.value;
      txtlog.value = "社会保障号码: " + jsonObj.SSN + "\r\n" + txtlog.value;
      txtlog.value = "卡有效期: " + jsonObj.Term + "\r\n" + txtlog.value;
      txtlog.value = "发卡日期: " + jsonObj.Date + "\r\n" + txtlog.value;
      txtlog.value = "卡号: " + jsonObj.NO + "\r\n" + txtlog.value;
      txtlog.value = "机构编号: " + jsonObj.SN + "\r\n" + txtlog.value;
      txtlog.value = "规范版本: " + jsonObj.Ver + "\r\n" + txtlog.value;
      switch (jsonObj.Type) {
        case 1: {
          txtlog.value = "卡类型: 学龄前儿童卡\r\n" + txtlog.value;
        }
          break;

        case 2: {
          txtlog.value = "卡类型: 学生卡\r\n" + txtlog.value;
        }
          break;

        case 3: {
          txtlog.value = "卡类型: 成年人卡\r\n" + txtlog.value;
        }
          break;

        case 4: {
          txtlog.value = "卡类型: 老年人卡\r\n" + txtlog.value;
        }
          break;
      }
      txtlog.value = "识别码: " + jsonObj.IC + "\r\n" + txtlog.value;

      txtlog.value = "成功读取到社保卡信息: \r\n" + txtlog.value;
    }
      break;

    case 3: {
      txtlog.value = "系统内存不足\r\n" + txtlog.value;
    }
      break;

    case 45: {
      txtlog.value = "打开读卡器失败\r\n" + txtlog.value;
    }
      break;

    case 46: {
      txtlog.value = "未检测到社保卡，请放置社保卡，再次尝试\r\n" + txtlog.value;
    }
      break;

    case 47: {
      txtlog.value = "读取社保卡信息失败\r\n" + txtlog.value;
    }
      break;
  }
}

//将多目标裁剪结果通知给调用者
function CZUR_ID_MULTIOBJ(jsonObj) {
  var count = jsonObj.count;
  if (count > 0) {
    for (var i = 1; i <= count; i++) {
      var idx = jsonObj.number + i - 1;
      message = "第 " + i + "目标图像: " + jsonObj.path + "\\" + jsonObj.prefix + idx + ".jpg\r\n";
      txtlog.value = message + txtlog.value;
    }

    txtlog.value = "图像文件: " + jsonObj.image + "裁剪为 " + count + "个目标图片\r\n" + txtlog.value;
  } else {
    txtlog.value = "图像文件：" + jsonObj.image + " 多目标裁剪失败\r\n" + txtlog.value;
  }
}

//将OCR结果通知给调用者
function CZUR_ID_OCR(jsonObj) {
  var error = jsonObj.error;

  switch (error) {
    case 0: {
      //type代表识别类型，0(驾驶证)、1(行驶证)、2(护照)、3(港澳通行证)、4(文档识别)
      switch (jsonObj.type) {
        case 0: {
          txtlog.value = "识别驾驶证成功，识别结果: \r\n" + JSON.stringify(jsonObj.result) + "\r\n" + txtlog.value;
        }
          break;

        case 1: {
          txtlog.value = "识别行驶证成功，识别结果: \r\n" + JSON.stringify(jsonObj.result) + "\r\n" + txtlog.value;
        }
          break;

        case 2: {
          txtlog.value = "识别护照成功，识别结果: \r\n" + JSON.stringify(jsonObj.result) + "\r\n" + txtlog.value;
        }
          break;

        case 3: {
          txtlog.value = "识别港澳通行证证成功，识别结果: \r\n" + JSON.stringify(jsonObj.result) + "\r\n" + txtlog.value;
        }
          break;

        case 4: {
          txtlog.value = "识别文档成功，文档保存名称: \r\n" + jsonObj.result + "\r\n" + txtlog.value;
        }
          break;

        case 5: {
          txtlog.value = "识别成功，文本内容：\r\n" + jsonObj.result + "\r\n" + txtlog.value;
        }
          break;
      }
    }
      break;

    case 1: {
      txtlog.value = "异常错误，导致OCR失败\r\n" + txtlog.value;
    }
      break;

    case 3: {
      txtlog.value = "系统内存不足，导致识别失败\r\n" + txtlog.value;
    }
      break;

    case 29: {
      txtlog.value = "未加载任何图像文件\r\n" + txtlog.value;
    }
      break;

    case 33: {
      txtlog.value = "识别的图像文件不存在\r\n" + txtlog.value;
    }
      break;

    case 36: {
      txtlog.value = "保存识别结果失败，请检查保存路径是否有效\r\n" + txtlog.value;
    }
      break;

    case 51: {
      txtlog.value = "当前用户权限不够，导致OCR失败\r\n" + txtlog.value;
    }
      break;

    case 76: {
      txtlog.value = "未安装CZUR Scanner客户端程序\r\n" + txtlog.value;
    }
      break;

    case 77: {
      txtlog.value = "无效的识别语言，仅支持中文简体、英文、中文繁体\r\n" + txtlog.value;
    }
      break;
  }
}

//将密码键入结果通知给调用者
function CZUR_ID_PK(jsonObj) {
  var error = jsonObj.error;
  if (48 == error) {
    txtlog.value = "用户已取消密码输入\r\n" + txtlog.value;
  } else {
    txtlog.value = "键入的密码内容: " + jsonObj.key + "\r\n" + txtlog.value;
  }
  //关闭密码键盘
  CZUR_ID_PK_CloseDevice();
}

//将人脸识别对比结果通知给调用者
function CZUR_ID_CFM(jsonObj) {
  var error = jsonObj.error;

  switch (error) {
    case 0: {
      s_process_type = 0;
      txtlog.value = "人脸对比成功\r\n" + txtlog.value;
    }
      break;

    case 1: {
      txtlog.value = "发生异常错误，导致人脸对比失败\r\n" + txtlog.value;
    }
      break;

    case 60: {
      txtlog.value = "授权过期，无法进行人脸对比\r\n" + txtlog.value;
    }
      break;

    case 61: {
      txtlog.value = "未检测到提供图片中的人脸\r\n" + txtlog.value;
    }
      break;

    case 62: {
      txtlog.value = "提取提供图片中的脸部特征失败\r\n" + txtlog.value;
    }
      break;
  }
}

//将指纹采集次数通知给调用者
function CZUR_ID_FP_FREQUENCY(jsonObj) {
  var error = jsonObj.error;

  switch (error) {
    case 0: {
      txtlog.value = "采集成功\r\n" + txtlog.value;
      //若jsonObj.base64字段不为null,则说明当前获取指纹图像的JPG(BASE64编码)数据，直接进行显示
      if (jsonObj.base64 != "null") {
        j_img_base64.crossOrigin = 'anonymous';
        j_img_base64.src = 'data:image/jpeg;base64,' + jsonObj.base64;

        j_img_base64.onload = function (e) {
          j_ctx_base64.drawImage(j_img_base64, 0, 0, j_cav_base64.width, j_cav_base64.height);
        }
      }
    }
      break;

    case 1: {
      txtlog.value = "采集指纹发生异常，请再次按压指纹\r\n" + txtlog.value;
    }
      break;

    case 3: {
      txtlog.value = "系统内存不足\r\n" + txtlog.value;
    }
      break;

    case 36: {
      txtlog.value = "保存指纹图像失败\r\n" + txtlog.value;
    }
      break;
  }
}

//将指纹特征数据通知给调用者
function CZUR_ID_FP_FEATURE(jsonObj) {
  var error = jsonObj.error;

  switch (error) {
    case 0: {
      //jsonObj.feature字段为指纹特征数据
      txtlog.value = "指纹特征数据采集成功\r\n" + txtlog.value;
    }
      break;

    case 1: {
      txtlog.value = "异常错误, 采集指纹特征数据失败\r\n" + txtlog.value;
    }
      break;

    case 3: {
      txtlog.value = "系统内存不足，导致指纹特征数据采集失败\r\n" + txtlog.value;
    }
      break;
  }
}

//将条码/二维码识别结果通知给调用者
function CZUR_ID_BCR(jsonObj) {
  var error = jsonObj.error;
  switch (error) {
    case 0: {
      switch (jsonObj.type) {
        case 8: {
          txtlog.value = "识别到条码，类型: EAN-8，内容: " + jsonObj.text + "\r\n" + txtlog.value;
        }
          break;

        case 9: {
          txtlog.value = "识别到条码，类型: UPC-E，内容: " + jsonObj.text + "\r\n" + txtlog.value;
        }
          break;

        case 12: {
          txtlog.value = "识别到条码，类型: UPC-A，内容: " + jsonObj.text + "\r\n" + txtlog.value;
        }
          break;

        case 13: {
          txtlog.value = "识别到条码，类型: EAN-13，内容: " + jsonObj.text + "\r\n" + txtlog.value;
        }
          break;

        case 14: {
          txtlog.value = "识别到条码，类型: ISBN-13，内容: " + jsonObj.text + "\r\n" + txtlog.value;
        }
          break;

        case 25: {
          txtlog.value = "识别到条码，类型: Interleaved 2 of 5，内容: " + jsonObj.text + "\r\n" + txtlog.value;
        }
          break;

        case 39: {
          txtlog.value = "识别到条码，类型: Code 39，内容: " + jsonObj.text + "\r\n" + txtlog.value;
        }
          break;

        case 64: {
          txtlog.value = "识别到条码，类型: QR Code, 内容: " + jsonObj.text + "\r\n" + txtlog.value;
        }
          break;

        case 128: {
          txtlog.value = "识别到条码，类型: Code 128，内容: " + jsonObj.text + "\r\n" + txtlog.value;
        }
          break;
      }
    }
      break;

    case 1: {
      txtlog.value = "异常错误, 条码识别失败\r\n" + txtlog.value;
    }
      break;

    case 3: {
      txtlog.value = "系统内存不足，导致条码识别失败\r\n" + txtlog.value;
    }
      break;

    case 43: {
      txtlog.value = "字符集转码失败\r\n" + txtlog.value;
    }
      break;

    case 59: {
      txtlog.value = "无效的JPG图像数据，无法识别条码\r\n" + txtlog.value;
    }
      break;

    case 72: {
      txtlog.value = "未识别到任何条码内容\r\n" + txtlog.value;
    }
      break;
  }
}

//将设备移除状态通知给调用者
function CZUR_ID_DEVICE_REMOVE(jsonObj) {
  var index = jsonObj.index;
  switch (index) {
    case 0: {
      txtlog.value = "主摄像头已移除\r\n" + txtlog.value;
    }
      break;

    case 1: {
      txtlog.value = "副摄像头已移除\r\n" + txtlog.value;
    }
      break;
  }
}
//将处理完毕的图像信息通知给调用者
function CZUR_ID_IMAGE(jsonObj) {
  var error = jsonObj.error;
  switch (error) {
    case 0: {
      //图像处理成功，判断是否识别到条码
      switch (jsonObj.type) {
        case 8: {
          txtlog.value = "识别到条码，类型: EAN-8，内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
        }
          break;

        case 9: {
          txtlog.value = "识别到条码，类型: UPC-E，内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
        }
          break;

        case 12: {
          txtlog.value = "识别到条码，类型: UPC-A，内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
        }
          break;

        case 13: {
          txtlog.value = "识别到条码，类型: EAN-13，内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
        }
          break;

        case 14: {
          txtlog.value = "识别到条码，类型: ISBN-13，内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
        }
          break;

        case 25: {
          txtlog.value = "识别到条码，类型: Interleaved 2 of 5，内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
        }
          break;

        case 39: {
          txtlog.value = "识别到条码，类型: Code 39，内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
        }
          break;

        case 64: {
          txtlog.value = "识别到条码，类型: QR Code, 内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
        }
          break;

        case 128: {
          txtlog.value = "识别到条码，类型: Code 128，内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
        }
          break;
      }

      if (jsonObj.file1 != "null") {
        txtlog.value = "保存图像成功，文件名称为: " + jsonObj.file1 + "\r\n" + txtlog.value;
      }

      if (jsonObj.file2 != "null") {
        txtlog.value = "保存图像成功，文件名称为: " + jsonObj.file2 + "\r\n" + txtlog.value;
      }
    }
      break;

    case 1: {
      txtlog.value = "发生异常错误，无法保存图像\r\n" + txtlog.value;
    }
      break;

    case 3: {
      txtlog.value = "系统内存不足\r\n" + txtlog.value;
    }
      break;

    case 36: {
      txtlog.value = "保存图像文件失败，请检查路径是否有效\r\n" + txtlog.value;
    }
      break;

    case 37: {
      txtlog.value = "源PDF文档存在密码保存，导致保存图像失败\r\n" + txtlog.value;
    }
      break;

    case 40: {
      txtlog.value = "图像为空白页，不保存文件\r\n" + txtlog.value;
    }
      break;
  }
}

//初始化CZURPlugin环境反馈，格式: {"id": 2, "error": 错误代码}
function CZUR_ID_Initialize_Response(jsonObj) {
  var error = jsonObj.error;

  switch (error) {
    case 0: {
      txtlog.value = "初始化CZURPlugin成功\r\n" + txtlog.value;
    }
      break;

    case 1: {
      txtlog.value = "异常错误\r\n" + txtlog.value;
    }
      break;

    case 3: {
      txtlog.value = "系统内存不足\r\n" + txtlog.value;
    }
      break;

    case 6: {
      txtlog.value = "无效的授权码\r\n" + txtlog.value;
    }
      break;

    case 9: {
      txtlog.value = "CZURPlugin环境已初始化\r\n" + txtlog.value;
    }
      break;

    case 42: {
      txtlog.value = "创建图像处理线程失败\r\n" + txtlog.value;
    }
      break;

    case 43: {
      txtlog.value = "字符集转换失败\r\n" + txtlog.value;
    }
      break;
  }
}

//打开设备，格式：{"id": 9, "index": 摄像头序号}
function CZUR_ID_OpenDevice() {
  //摄像头分辨率
  var width, height;

  //摄像头序号
  var index = document.getElementById("devtype").selectedIndex;
  var jsonMsg = {
    id: 9,
    index: index
  };
  ws_cmd.send(JSON.stringify(jsonMsg));
}

//打开设备反馈，格式：{"id": 10, "error": 错误代码}
function CZUR_ID_OpenDevice_Response(jsonObj) {
  var error = jsonObj.error;

  switch (error) {
    case 0: {
      var index = 0;
      if (0 == index) {
        is_draw_m_frame = true;
      } else {
        is_draw_s_frame = true;
      }
      txtlog.value = "打开摄像头成功\r\n" + txtlog.value;
    }
      break;

    case 1: {
      txtlog.value = "异常错误\r\n" + txtlog.value;
    }
      break;

    case 8: {
      txtlog.value = "CZURPlugin环境未初始化\r\n" + txtlog.value;
    }
      break;

    case 10: {
      txtlog.value = "设备不支持副摄像头\r\n" + txtlog.value;
    }
      break;

    case 11: {
      txtlog.value = "无效的摄像头序号\r\n" + txtlog.value;
    }
      break;

    case 12: {
      txtlog.value = "摄像头已打开\r\n" + txtlog.value;
    }
      break;

    case 13: {
      txtlog.value = "设备未连接，请将设备连接电脑\r\n" + txtlog.value;
    }
      break;
  }
}



//拍照保存JPG图像数据(BASE64编码)，格式: {"id": 68, "index": 摄像头序号, "dpi": DPI, "color": 颜色模式, "round": 圆角留白, "adjust": 方向转正, "bcr": 条码识别, "bpd": 空白页检测, "quality": JPG压缩质量}
function CZUR_ID_GrabBase64() {
  //摄像头序号
  var index = document.getElementById("devtype").selectedIndex;
  if (0 != index) {
    index = 1;
  }

  //DPI
  var dpi = parseInt(document.getElementById("grabdpi").value);

  //色彩模式
  var color = document.getElementById("grabcolor").selectedIndex;

  //圆角留白
  var round = 0;
  if (document.getElementById("grabround").checked) {
    round = 1;
  }

  //方向调整
  var adjust = 0;
  if (document.getElementById("grabadjust").checked) {
    adjust = 1;
  }

  //识别条码
  var bcr = 0;
  if (document.getElementById("grabbcr").checked) {
    bcr = 1;
  }

  //空白页检测
  var bpd = 0;
  if (document.getElementById("grabbpd").checked) {
    bpd = 1;
  }

  //JPG压缩质量
  var quality = parseInt(document.getElementById("jpgquality").value);

  //副摄像头仅支持彩色、灰度\黑白以及 DPI、JPG 压缩质量、TIFF 压缩方式设置，
  //round、 adjust、 bcr、 bpd 参数必须设置为 0
  if (1 == index) {
    round = 0;
    adjust = 0;
    bcr = 0;
    bpd = 0;
  }

  var jsonMsg = {
    id: 68,
    index: index,
    dpi: dpi,
    color: color,
    round: round,
    adjust: adjust,
    bcr: bcr,
    bpd: bpd,
    quality: quality,
  };
  ws_cmd.send(JSON.stringify(jsonMsg));
}

//拍照保存JPG图像数据(BASE64编码)反馈，格式: {"id": 69, "error": 错误代码}
function CZUR_ID_GrabBase64_Response(jsonObj) {
  var error = jsonObj.error;

  switch (error) {
    case 0: {
      txtlog.value = "拍照成功，图像正在处理，请稍后\r\n" + txtlog.value;
    }
      break;

    case 1: {
      txtlog.value = "异常错误\r\n" + txtlog.value;
    }
      break;

    case 3: {
      txtlog.value = "系统内存不足\r\n" + txtlog.value;
    }
      break;

    case 4: {
      txtlog.value = "录像期间，无法拍照\r\n" + txtlog.value;
    }
      break;

    case 8: {
      txtlog.value = "CZURPlugin环境未初始化\r\n" + txtlog.value;
    }
      break;

    case 10: {
      txtlog.value = "设备不支持某些拍照属性参数设置\r\n" + txtlog.value;
    }
      break;

    case 11: {
      txtlog.value = "无效的摄像头序号\r\n" + txtlog.value;
    }
      break;

    case 14: {
      txtlog.value = "摄像头尚未打开，无法进行拍照操作\r\n" + txtlog.value;
    }
      break;

    case 17: {
      txtlog.value = "无效的颜色模式\r\n" + txtlog.value;
    }
      break;

    case 19: {
      txtlog.value = "激光线闪过之后，才可以拍摄下一张\r\n" + txtlog.value;
    }
      break;

    case 21: {
      txtlog.value = "无效的JPG压缩质量\r\n" + txtlog.value;
    }
      break;

    case 50: {
      txtlog.value = "图像数据尚未准备好，请稍后再试\r\n" + txtlog.value;
    }
      break;
  }
}
//关闭设备，格式: {"id": 11, "index": 摄像头序号}
function CZUR_ID_CloseDevice()
{
  //摄像头序号
  var index = 0;

  if(0 != index){
    index = 1;
  }

  var jsonMsg = {
    id: 11,
    index: index
  };
  ws_cmd.send(JSON.stringify(jsonMsg));
}
//关闭设备反馈，格式: {"id": 12, "error": 错误代码}
function CZUR_ID_CloseDevice_Response(jsonObj)
{
  var error = jsonObj.error;

  switch(error)
  {
    case 0:{
      var index = 0;
      if(0 == index){
        is_draw_m_frame = false;
        m_ctx_frame.fillStyle="#000000";
        m_ctx_frame.beginPath();
        m_ctx_frame.fillRect(0, 0, m_cav_frame.width, m_cav_frame.height);
        m_ctx_frame.closePath();
      }else{
        is_draw_s_frame = false;
        s_ctx_frame.fillStyle="#000000";
        s_ctx_frame.beginPath();
        s_ctx_frame.fillRect(0, 0, s_cav_frame.width, s_cav_frame.height);
        s_ctx_frame.closePath();
      }
      txtlog.value = "关闭摄像头成功\r\n" + txtlog.value;
    }break;

    case 4:{
      txtlog.value = "正在进行录像，无法关闭设备\r\n" + txtlog.value;
    }break;

    case 8:{
      txtlog.value = "CZURPlugin环境未初始化\r\n" + txtlog.value;
    }break;

    case 11:{
      txtlog.value = "无效的摄像头序号\r\n" + txtlog.value;
    }break;

    case 14:{
      txtlog.value = "摄像头未打开\r\n" + txtlog.value;
    }break;
  }
}

export default {
  title: "高拍仪",
  data() {
    return {
      showhighmeter: false,
      src: '',
      cindex: null,
      license: 'piGkaOebTe+FqXPJDXa0dgVleor1YkzU6PtwAqL+FR0pRAeny4RS4UoGhkl4qxE//zYgO2TLegXFEhtWYte4xEqD47aP58FkfVBCpwPuR3OL/VjkAzzjOlKQNBzxtz6LWdXXQ6ICUshjMzpweq6xAeM4RMQFyBH3mu0ac2W9qqEGO1NvCrKIfCW/JPYYoZQLlwLGt4mtWXSE0Pa+PU9k3R/BRGb8KfaBqajZ+oomYrp8xf7orInp2UJFt1nY8B273vSdgHLdqgsaAk2p0zDGavlGZgi37JQznPTGW7kjx/dJm0se1O7BqRiUNQ5M3tavthJqQ4GbtenRpBhFXshBFkmv/8D6hL9WvhjezXMDM37NBZPTNI+j+oxzQqB8EB9nPhIyPcs6w7YubxnAxSF1KewgY8NUzNoWohtpYOVKC07X0fKvSo2f97JEkj2FNzZ9NeF0+vy4BtezIxQ79zYoU2jcYY3WXOoLMCwlvqg/ftRjfNx3lmWJgq+IwScuLrDiV3JiVXRAN9nW5Az+qbQOJoOVEKYVZUWq18IsIJl883M0l5Dc9SrEKG8oSldqaqOzO1SpKVQmQrMjIo8SNNv5ZUHEauO+effCpuCmgcPj/U9Sa7TyPkhvdLEkcSEwyjPpd6ceANAYD+/e3/t5yguVQAghbrayJm/WerChOHCO6HvaPfNbnJKrfdlm2NtP7CmZYIwZohEsT6zWNc6cmbnIvcsS5PDmErt5harFNFiXfsAeZwtUCgOM1jcdImCq8g38NrxwCeN1tb5qt+ypgdLMVfkMe69C43e+TrqiLYLUcjQB2/8jl6xtHJFvnmywPu0oAn4/h6JihpT/+Ck8uzJbsvJzTUOH+owNOd/cEyeTqPsaQj7SCLlafHs6Tz0qIqnSoRzkTCXvvL2nn+5UgTYkReIsMPGagwXM0UuOjvfkWn4A'
    }
  },
  props: ['show'],
  methods: {
    CZUR_ID_BASE64(jsonObj) {
      var error = jsonObj.error;

      switch (error) {
        case 0: {
          //图像处理成功，判断是否识别到条码
          switch (jsonObj.type) {
            case 8: {
              txtlog.value = "识别到条码，类型: EAN-8，内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
            }
              break;

            case 9: {
              txtlog.value = "识别到条码，类型: UPC-E，内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
            }
              break;

            case 12: {
              txtlog.value = "识别到条码，类型: UPC-A，内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
            }
              break;

            case 13: {
              txtlog.value = "识别到条码，类型: EAN-13，内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
            }
              break;

            case 14: {
              txtlog.value = "识别到条码，类型: ISBN-13，内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
            }
              break;

            case 25: {
              txtlog.value = "识别到条码，类型: Interleaved 2 of 5，内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
            }
              break;

            case 39: {
              txtlog.value = "识别到条码，类型: Code 39，内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
            }
              break;

            case 64: {
              txtlog.value = "识别到条码，类型: QR Code, 内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
            }
              break;

            case 128: {
              txtlog.value = "识别到条码，类型: Code 128，内容: " + jsonObj.barcode + "\r\n" + txtlog.value;
            }
              break;
          }
          txtlog.value = "获取BASE64图像数据成功\r\n" + txtlog.value;

          //demo中只是简单的对BASE64数据进行显示
          if (jsonObj.b641 != "null") {
            console.log(1)
            j_img_base64.crossOrigin = 'anonymous';
            j_img_base64.src = 'data:image/jpeg;base64,' + jsonObj.b641;
            console.log(jsonObj.b641)
            this.$emit('photo-finish', jsonObj.b641.toString())
            j_img_base64.onload = function (e) {
              j_ctx_base64.drawImage(j_img_base64, 0, 0, j_cav_base64.width, j_cav_base64.height);
            }
          }
          if (jsonObj.b642 != "null") {
            console.log(2)
            j_img_base64.crossOrigin = 'anonymous';
            j_img_base64.src = 'data:image/jpeg;base64,' + jsonObj.b642;

            j_img_base64.onload = function (e) {
              j_ctx_base64.drawImage(j_img_base64, 0, 0, j_cav_base64.width, j_cav_base64.height);
            }
          }
        }
          break;

        case 1: {
          txtlog.value = "发生异常错误，无法获取JPG图像数据\r\n" + txtlog.value;
        }
          break;

        case 3: {
          txtlog.value = "系统内存不足\r\n" + txtlog.value;
        }
          break;

        case 40: {
          txtlog.value = "图像为空白页，不保存BASE64编码数据\r\n" + txtlog.value;
        }
          break;
      }
    },

//初始化CZURPlugin环境，格式: {"id": 1, "license": "授权码"}
    cmdWebSocketEvent() {
      ws_cmd.onopen = function () {
        cmd_svc_connect = true;
        txtlog.value = "成功连接指令服务器\r\n" + txtlog.value;
      }

      ws_cmd.onclose = function () {
        cmd_svc_connect = false;
        txtlog.value = "与指令服务器连接中断\r\n" + txtlog.value;
      }
      let that = this
      ws_cmd.onmessage = function (e) {
        var jsonObj = window.JSON.parse(e.data);
        switch (jsonObj.id) {
          //删除本地文件反馈
          case 41: {
            CZUR_ID_DeleteFile_Response(jsonObj);
          }
            break;

          //处理json数据包失败反馈
          case 0: {
            var error = jsonObj.error;

            switch (error) {
              case 3: {
                txtlog.value = "系统内存不足，无法处理当前指令\r\n" + txtlog.value;
              }
                break;

              case 5: {
                txtlog.value = "无效的json指令格式\r\n" + txtlog.value;
              }
                break
            }
          }
            break;

          //初始化CZURPlugin环境反馈
          case 2: {
            CZUR_ID_Initialize_Response(jsonObj);
          }
            break;

          //清除CZURPlugin环境反馈
          case 4: {
            m_process_type = 0;
            is_draw_m_frame = false;
            m_ctx_frame.fillStyle = "#000000";
            m_ctx_frame.beginPath();
            m_ctx_frame.fillRect(0, 0, m_cav_frame.width, m_cav_frame.height);
            m_ctx_frame.closePath();

            s_process_type = 0;
            is_draw_s_frame = false;
            s_ctx_frame.fillStyle = "#000000";
            s_ctx_frame.beginPath();
            s_ctx_frame.fillRect(0, 0, s_cav_frame.width, s_cav_frame.height);
            s_ctx_frame.closePath();

            // document.getElementById("paperproc").selectedIndex = 0;
            // document.getElementById("paperproc2").selectedIndex = 0;
            // document.getElementById("rotateangle").selectedIndex = 0;
            // document.getElementById("turndetect").checked = 0;

            CZUR_ID_Deintialize_Response(jsonObj);
          }
            break;

          //获取设备型号反馈
          case 6: {
            CZUR_ID_GetDeviceModel_Response(jsonObj);
          }
            break;

          //获取设备ID反馈
          case 8: {
            CZUR_ID_GetDeviceID_Response(jsonObj);
          }
            break;

          //打开设备反馈
          case 10: {
            CZUR_ID_OpenDevice_Response(jsonObj);
          }
            break;

          //关闭设备反馈
          case 12: {
            CZUR_ID_CloseDevice_Response(jsonObj);
          }
            break;

          //拍照保存图像文件反馈
          case 14: {
            CZUR_ID_GrabImage_Response(jsonObj);
          }
            break;

          //设置分辨率反馈
          case 16: {
            CZUR_ID_SetResolution_Response(jsonObj);
          }
            break;

          //设置旋转角度反馈
          case 18: {
            CZUR_ID_SetAngle_Response(jsonObj);
          }
            break;

          //设置主头纸张处理方式反馈
          case 20: {
            CZUR_ID_SetProcessType_Response(jsonObj);
          }
            break;

          //设置副头处理方式反馈
          case 22: {
            CZUR_ID_SetProcessType2_Response(jsonObj);
          }
            break;

          //设置翻页检测反馈
          case 24: {
            CZUR_ID_SetTurnDetect_Response(jsonObj);
          }
            break;

          //检测到翻页或硬拍得反馈
          case 25: {
            var state = jsonObj.state;

            switch (state) {
              case 1: {
                txtlog.value = "已检测到硬拍工作\r\n" + txtlog.value;
              }
                break;

              case 2: {
                txtlog.value = "已检测到翻页工作\r\n" + txtlog.value;
              }
                break;
            }

            //触发拍照
            CZUR_ID_GrabImage();
          }
            break;

          //获取预览分辨率反馈
          case 27: {
            var error = jsonObj.error;

            switch (error) {
              case 0: {
                txtlog.value = "设置预览分辨率成功\r\n" + txtlog.value;
              }
                break;

              case 8: {
                txtlog.value = "CZURPlugin环境未初始化\r\n" + txtlog.value;
              }
                break;

              case 11: {
                txtlog.value = "无效的摄像头序号\r\n" + txtlog.value;
              }
                break;

              case 12: {
                txtlog.value = "摄像头已打开，无法设置\r\n" + txtlog.value;
              }
                break;

              case 16: {
                txtlog.value = "无效的预览分辨率\r\n" + txtlog.value;
              }
                break;
            }
          }
            break;

          //开启HTTP上传反馈
          case 29: {
            CZUR_ID_Http_Create_Response(jsonObj);
          }
            break;

          //停止HTTP上传反馈
          case 31: {
            CZUR_ID_Http_Delete_Response(jsonObj);
          }
            break;

          //添加水印反馈
          case 33: {
            CZUR_ID_WaterMark_Add_Response(jsonObj);
          }
            break;

          //清除水印反馈
          case 35: {
            CZUR_ID_WaterMark_Clear_Response(jsonObj);
          }
            break;

          //多目标裁剪反馈
          case 43: {
            CZUR_ID_MultiObj_Clip_Response(jsonObj);
          }
            break;

          //读取身份证信息反馈
          case 45: {
            CZUR_ID_GetIDCardOption_Response(jsonObj);
          }
            break;

          //读取身份证信息合成图片反馈
          case 47: {
            CZUR_ID_GetIDCardImage_Response(jsonObj);
          }
            break;

          //读取社保卡反馈
          case 49: {
            CZUR_ID_GetSSCOption_Response(jsonObj);
          }
            break;

          //合成PDF反馈
          case 51: {
            CZUR_ID_ImageToPDF_Response(jsonObj);
          }
            break;

          //打开密码键盘反馈
          case 53: {
            CZUR_ID_PK_OpenDevice_Response(jsonObj);
          }
            break;

          //关闭密码键盘反馈
          case 55: {
            CZUR_ID_PK_CloseDevice_Response(jsonObj);
          }
            break;

          //自动裁边反馈消息，用于绘制矩形框
          case 56: {
            if (2 == m_process_type) {
              m_x1 = m_cav_frame.width * jsonObj.x1;
              m_y1 = m_cav_frame.height * jsonObj.y1;
              m_x2 = m_cav_frame.width * jsonObj.x2;
              m_y2 = m_cav_frame.height * jsonObj.y2;
              m_x3 = m_cav_frame.width * jsonObj.x3;
              m_y3 = m_cav_frame.height * jsonObj.y3;
              m_x4 = m_cav_frame.width * jsonObj.x4;
              m_y4 = m_cav_frame.height * jsonObj.y4;
            }
          }
            break;

          //设置残缺页面补全反馈
          case 58: {
            CZUR_ID_SetPageFill_Response(jsonObj);
          }
            break;

          //识别图片保存为文档反馈
          case 60: {
            CZUR_ID_OCR_Document_Response(jsonObj);
          }
            break;

          //识别证件反馈
          case 62: {
            CZUR_ID_OCR_Paperwork_Response(jsonObj);
          }
            break;

          //开启人脸对比反馈
          case 64: {
            CZUR_ID_Start_Face_Match_Response(jsonObj);
          }
            break;

          //停止人脸对比反馈
          case 66: {
            CZUR_ID_Stop_Face_Match_Response(jsonObj);
          }
            break;

          //检测到的人脸区域反馈消息，此时用户可自行绘制人脸矩形区域
          case 67: {
            s_x1 = s_cav_frame.width * jsonObj.x1;
            s_y1 = s_cav_frame.height * jsonObj.y1;
            s_x2 = s_cav_frame.width * jsonObj.x2;
            s_y2 = s_cav_frame.height * jsonObj.y2;
            s_x3 = s_cav_frame.width * jsonObj.x3;
            s_y3 = s_cav_frame.height * jsonObj.y3;
            s_x4 = s_cav_frame.width * jsonObj.x4;
            s_y4 = s_cav_frame.height * jsonObj.y4;
            DrawMLine();
          }
            break;

          //拍照(BASE64编码数据)反馈
          case 69: {
            CZUR_ID_GrabBase64_Response(jsonObj);
          }
            break;

          //图像识别，返回文本结果反馈
          case 71: {
            CZUR_ID_OCR_Text_Response(jsonObj);
          }
            break;

          //查询匹配机型反馈
          case 73: {
            CZUR_ID_QueryMatchModel_Response(jsonObj);
          }
            break;

          //设置扫描幅面反馈
          case 75: {
            CZUR_ID_SetScanWide_Response(jsonObj);
          }
            break;

          //打开签名板反馈
          case 79: {
            CZUR_ID_SP_OpenDevice_Response(jsonObj);
          }
            break;

          //关闭签名板设备反馈
          case 81: {
            CZUR_ID_SP_CloseDevice_Response(jsonObj);
          }
            break;

          //清空签名内容反馈
          case 83: {
            CZUR_ID_SP_Clear_Response(jsonObj);
          }
            break;

          //打开指纹设备反馈
          case 91: {
            CZUR_ID_FP_OpenDevice_Response(jsonObj);
          }
            break;

          //关闭指纹设备反馈
          case 93: {
            CZUR_ID_FP_CloseDevice_Response(jsonObj);
          }
            break;

          //开启指纹特征数据采集反馈
          case 95:
          case 97: {
            CZUR_ID_FP_StartFeature_Response(jsonObj);
          }
            break;

          //停止指纹特征数据采集反馈
          case 99: {
            CZUR_ID_FP_StopFeature_Response(jsonObj);
          }
            break;

          //保存签名图像反馈
          case 85: {
            CZUR_ID_SP_SaveImageFile_Response(jsonObj);
          }
            break;

          //获取签名图像数据(BASE64)反馈
          case 87: {
            CZUR_ID_SP_GetJpgBase64_Response(jsonObj);
          }
            break;

          //开启条码识别反馈
          case 103: {
            CZUR_ID_BCR_Start_Response(jsonObj);
          }
            break;

          //停止条码识别反馈
          case 105: {
            CZUR_ID_BCR_Stop_Response(jsonObj);
          }
            break;

          //查询设备ID反馈
          case 107: {
            CZUR_ID_QueryDeviceID_Response(jsonObj);
          }
            break;

          //设置修复残留黑边反馈
          case 109: {
            CZUR_ID_SetEdgeRepair_Response(jsonObj);
          }
            break;

          //设置拍摄A4幅面反馈
          case 111: {
            CZUR_ID_SetA4Wide_Response(jsonObj);
          }
            break;

          //识别图片保存为文档反馈(扩展接口)
          case 113: {
            CZUR_ID_OCR_DocumentEx_Response(jsonObj);
          }
            break;

          //设置主摄像头亮度反馈
          case 121: {
            CZUR_ID_SetBrightness_Response(jsonObj);
          }
            break;

          //设置主摄像头对比度反馈
          case 123: {
            CZUR_ID_SetContrast_Response(jsonObj);
          }
            break;

          //限定JPG图像大小反馈
          case 128: {
            CZUR_ID_SetJpgMaxSize_Response(jsonObj);
          }
            break;

          //获取SDK版本反馈
          case 130: {
            CZUR_ID_GetVersion_Reponse(jsonObj);
          }
            break;

          //开启录像反馈
          case 132: {
            CZUR_ID_StartRecord_Response(jsonObj);
          }
            break;

          //停止录像反馈
          case 134: {
            CZUR_ID_StopRecord_Response(jsonObj);
          }
            break;

          //白色背景转透明背景反馈
          case 140: {
            CZUR_ID_WhiteCvTransparent_Response(jsonObj);
          }
            break;

          //设置拍照保存图像白背景转透明反馈
          case 142: {
            CZUR_ID_SetWhiteTransparent_Response(jsonObj);
          }
            break;

          //图像处理结果通知
          case 301: {
            CZUR_ID_IMAGE(jsonObj);
          }
            break;

          //录像状态结果通知
          case 303: {
            CZUR_ID_RECORD(jsonObj);
          }
            break;

          //HTTP上传结果通知
          case 305: {
            CZUR_ID_HTTP(jsonObj);
          }
            break;

          //OCR结果通知
          case 307: {
            CZUR_ID_OCR(jsonObj);
          }
            break;

          //多目标裁剪结果通知
          case 309: {
            CZUR_ID_MULTIOBJ(jsonObj);
          }
            break;

          //身份证读取结果通知
          case 311: {
            CZUR_ID_CVR(jsonObj);
          }
            break;

          //社保卡读取结果通知
          case 313: {
            CZUR_ID_SSC(jsonObj);
          }
            break;

          //密码键盘输入结果通知
          case 315: {
            CZUR_ID_PK(jsonObj);
          }
            break;

          //人脸对比结果通知
          case 317: {
            CZUR_ID_CFM(jsonObj);
          }
            break;

          //拍照(BASE64编码数据)结果通知
          case 318: {
            that.CZUR_ID_BASE64(jsonObj);
          }
            break;

          //签名板签名状态通知
          case 320: {
            CZUR_ID_SP_STATUS(jsonObj);
          }
            break;

          //指纹采集次数通知
          case 322: {
            CZUR_ID_FP_FREQUENCY(jsonObj);
          }
            break;

          //指纹特征数据通知
          case 324: {
            CZUR_ID_FP_FEATURE(jsonObj);

            //接收到指纹特征数据消息后，发送[停止采集指纹特征数据]指令，以便后续可以继续采集指纹特征数据
            var cmd = '{\"id\": 98}';
            ws_cmd.send(cmd);
          }
            break;

          //条码识别结果通知
          case 326: {
            CZUR_ID_BCR(jsonObj);
          }
            break;

          //设备移除状态通知
          case 328: {
            CZUR_ID_DEVICE_REMOVE(jsonObj);
          }
            break;
        }
      }
    },
    connect_cmd_svc() {
      if (cmd_svc_connect == true) {
        // alert("已连接指令服务器");
        return;
      }

      var url = "ws://localhost:" + cmd_svc_port + "/";
      if ('WebSocket' in window) {
        ws_cmd = new WebSocket(url);
      } else if ('MozWebSocket' in window) {
        ws_cmd = new MozWebSocket(url);
      } else {
        // alert("浏览器不支持WebSocket");
      }

      this.cmdWebSocketEvent();
    },
    CZUR_ID_GrabBase64() {
      //摄像头序号
      var index = this.cindex

      //DPI
      var dpi = 0;

      //色彩模式
      var color = 0;

      //圆角留白
      var round = 0;


      //方向调整
      var adjust = 0;


      //识别条码
      var bcr = 0;


      //空白页检测
      var bpd = 0;


      //JPG压缩质量
      var quality = 100;

      //副摄像头仅支持彩色、灰度\黑白以及 DPI、JPG 压缩质量、TIFF 压缩方式设置，
      //round、 adjust、 bcr、 bpd 参数必须设置为 0
      if (1 == index) {
        round = 0;
        adjust = 0;
        bcr = 0;
        bpd = 0;
      }

      var jsonMsg = {
        id: 68,
        index: index,
        dpi: dpi,
        color: color,
        round: round,
        adjust: adjust,
        bcr: bcr,
        bpd: bpd,
        quality: quality,
      };
      ws_cmd.send(JSON.stringify(jsonMsg));
    },
    CZUR_ID_OpenDevice(index) {
      //摄像头分辨率
      this.cindex = index
      var width, height;
      var jsonMsg = {
        id: 9,
        index: index
      };
      ws_cmd.send(JSON.stringify(jsonMsg));
    },
    CZUR_ID_Initialize() {
      var license = 'piGkaOebTe+FqXPJDXa0dgVleor1YkzU6PtwAqL+FR0pRAeny4RS4UoGhkl4qxE/HbYIeIJO7WgNNHXBWfuhtFQF8kjXF1lZ8KMIT6vo7Pg3YCm2QDWml2AacPj6sKXLBXzVXpl0epq44wB+VqORM/mj+99Iv5b7woTL/pnj8l+hgsygWl3F6XgPnswvH72Zi3n+zGU56YrPNBQ4HNXEd05YPGqszKRLq/VVSxoCSBHssUGlzAi2maV4kHyZxrQciprwBxbHRXZ0VHKX/Xw14/GErpOmuNMNwI3VzOvfT2A7WLJ5hGeIrMKxzUVaA6h4jIbUboh28gPdtowUHdY4cujJZOhXRAAHf4Vop7VEkm1sfI6Z+cbKMWcGX1jCCixZwkOF5xLrrfxUILchfwDAavsnmVUBK51Mkh21yo8mMCkHn6za/rTVOwy79N6T6TG6p46JKKBKjAQrVxv2bvI5XW53TXHslIEBvZi2pP7//3XYIG1RLwq3qzsjQB4GLleWHhkjwB+g7XoPyBZ11mgIrYPCKATCaa45lsDGlRIZUN+lf08G+r9togqUanwPl30E6ilfjkY6FoEni/HJJpWRypppXADdCf+PaA483BKtM+4jrNQFhvPJQBVYNUmZWVjq7zoL3B5CMp1imLz9jxrD5ur/KicTz2KHXQOAesQ1DMynIaccUAzC4n0uq3uZVeT2gP1qLY23vVgKEESPe81aRhgAj/kuebFPcIo8YMkCJJIKLo/rfTNpqkDOwIqK5dNFmAR0qYXbVVXgu7W5JVau1I34bo/UHzAhBY54Z2/q2SCZB+b47MkuLAaIHju6M6dSUctvFE3UuQQVy9bX9QA3ozb32mr0oZrhJBDkUQqo5qL9XbVTYi8nR4FYSUH/66pt0BhMcY0FDTu0IWZRtFupdfjgNfCgd5Ag13gyGvDPpxdkkMlTzgHPmaDKs1Ecqa1KJNIaWn1+HPGrVlgN8US+gcvHmQ1Scp+XK1B7ZSnEFyXyEf7PvyPZG6SbRXPQPJOnSaaJcncbyL1dGyoZVZvD2P9qqKfmem/tWulqui5ClkEA'
      var jsonMsg = {
        id: 1,
        license: license
      };
      console.log(JSON.stringify(jsonMsg))
      console.log(ws_cmd)
      ws_cmd.send(JSON.stringify(jsonMsg));
    },
    init() {
      m_cav_frame = document.getElementById("mframe");
      m_ctx_frame = m_cav_frame.getContext("2d");
      m_img_frame = new Image();

      s_cav_frame = document.getElementById("sframe");
      s_ctx_frame = s_cav_frame.getContext("2d");
      s_img_frame = new Image();

      //显示jpg(BASE64编码)图像数据
      j_cav_base64 = document.getElementById("base64img");
      j_ctx_base64 = j_cav_base64.getContext("2d");
      j_img_base64 = new Image();

      txtlog = document.getElementById("TextArea1");

      //记录主头处理方式
      m_process_type = 0;
      //记录副头处理方式，0(不处理)、1(手动框选裁剪)、2(人脸对比)
      s_process_type = 0;

      //标记当前是否按下鼠标左键
      is_down_m = false;
      //记录主头手动框选裁剪得矩形框
      m_left = 0.2 * m_cav_frame.width;
      m_top = 0.2 * m_cav_frame.height;
      m_right = 0.8 * m_cav_frame.width;
      m_bottom = 0.8 * m_cav_frame.height;

      //标记当前是否按下鼠标左键
      is_down_s = false;
      //记录副头需要绘制的矩形框坐标
      s_left = 0.2 * s_cav_frame.width;
      s_top = 0.2 * s_cav_frame.height;
      s_right = 0.8 * s_cav_frame.width;
      s_bottom = 0.8 * s_cav_frame.height;

    },
    //页面load消息
    onLoad() {
      return new Promise((resolve, reject) => {
        this.init()
        this.connect_cmd_svc()
        connect_mc_svc()
      })
    },
    close() {
      CZUR_ID_CloseDevice()
      ws_cmd.close()
      this.show = !this.show
    }
  },
  ready() {

    this.onLoad().then((res) => {
      // this.CZUR_ID_Initialize()
    }).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;
}

.showInfo {
  float: left;
  width: 800px;
  display: inline-block;
  margin-top: 20px;
  margin-left: 36px;
}

#TextArea1 {
  margin-left: 18px;
  border-radius: 4px;
  border: 1px solid #b5b5b5;
  height: 300px;
  width: 260px;
  resize: none;
  background-color: #f6f6f6;
}
</style>
