<template>
	<div>
		<div style="text-align: center;font-size: 30px;margin-top: 5%;">指纹采集</div>
		<div v-if="isdiable" style="text-align: center;margin-top: 5%;" type="primary">
			<el-button type="primary" @click="DetectFinger()">开始采集</el-button>
		</div>
		<div v-if="!isdiable" style="text-align: center;margin-top: 5%;" type="primary">
			<el-button type="primary" @click="onload()">重新采集</el-button>
		</div>
		<div v-for="item in list">{{item}} </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				ipAddress: '',
				text: '',
				loading: '',
				list: [],
				isdiable:true,//是否重新采集
				fingerStatus:fingerStatus //判断手指是否按下，0表示未按下
			}
		},
		methods: {
			//连接
			contect() {
				plguin_connect()
			},
			//检测设备
			Init() {
				FM_Init_OnClick()
			},
			//检测手指
			DetectFinger() {
				if (contectStatus == '0') {
					FM_DetectFinger_OnClick()
					setTimeout(() => {
						this.fingerStatus = fingerStatus
					}, 500)

					console.log("finger", this.fingerStatus)
				} else {
					this.Init()
					this.$message("设备未连接，请重新尝试")
				}

			},
			//提取特征
			Extract() {
				FM_Extract_OnClick()
			},
			//合成模板
			Enroll() {
				FM_Enroll_OnClick()
			},
			//获取本机IP地址
			getIp() {
				this.rq.post("/api/?ie=utf-8").then(res => {
					var str = res.data
					var targetStr = str.substring(str.indexOf('{'), str.lastIndexOf('}') + 1);
					Ip = "ws://" + JSON.parse(targetStr).cip + ":9618"
					console.log(Ip)
				})
			},
			//重新采集
			onload(){
				select=0
				this.isdiable=true
			},
			//loading
			openFullScreen() {
				this.loading = this.$loading({
					lock: true,
					text: this.text,
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
			}

		},
		created() {
			this.getIp()
			this.text = '设备连接中'
			this.openFullScreen()
			setTimeout(() => {
				this.contect()
				setTimeout(() => {
					this.Init()
					this.loading.close()
				}, 500)
			}, 500)
		},
		watch: {
			//监听手指是否按下
			fingerStatus: function(news, olds) {
				console.log("watch", news)
				if (this.fingerStatus == 1 && news == 1) {
					this.Extract()
					this.fingerStatus = 2
					if (select == 2) {
						this.Enroll()
						setTimeout(() => {
							this.list.push(strFTP)
							this.isdiable=false
						}, 500)
						console.log(this.list)
					}
					return
				}
				if (news == 0) {
					this.$message("请按压手指")
					this.fingerStatus = 2
				}
			}
		}
	}
	var Ip
	var select = 0 //第几枚指纹
	var contectStatus; //判断设备是否连接，0表示已连接
	var fingerStatus; //判断手指是否按下，0表示未按下
	var index; //手指序号
	var strBmp; //bmp图像
	var strFTP; //模板 一般存于数据库
	var strFTR1; //特征1
	var strFTR2; //特征1
	var strFTR3; //特征3

	var WS_RET_ERR_OK = "0"; //操作成功
	var WS_RET_ERR_PARAM = "-1"; //参数错误
	var WS_RET_ERR_MEMORY = "-2"; //内存分配失败，没有分配到足够的内存
	var WS_RET_ERR_FUN = "-3"; //功能未实现
	var WS_RET_ERR_DEVICE = "-4"; //设备不存在
	var WS_RET_ERR_INIT = "-5"; //设备未初始化
	var WS_RET_ERR_UNKOWN = "-6"; //非法错误号
	var WS_RET_ERR_EXTRACT = "-7"; //提取特征失败或合成模板失败
	var WS_RET_ERR_ELSE = "-9"; //其它错误

	var WS_FM_Init = "FM_Init";
	//{"reqcode":"FM_Init"}
	//{"repcode":"FM_Init","result":"xx"}
	var WS_FM_Deinit = "FM_Deinit";
	//{"reqcode":"FM_Deinit"}
	//{"repcode":"FM_Deinit","result":"xx"}
	var WS_FM_GetDevVerison = "FM_GetDevVerison";
	//{"reqcode":"FM_GetDevVerison"}
	//{"reqcode":"FM_GetDevVerison","result":"xx":"version":"string"}
	var WS_FM_GetSdkVerison = "FM_GetSdkVerison";
	//{"reqcode":"FM_GetSdkVerison"}
	//{"reqcode":"FM_GetSdkVerison","result":"xx":"version":"string"}
	var WS_FM_DetectFinger = "FM_DetectFinger";
	//{"reqcode":"FM_DetectFinger"}
	//{"reqcode":"FM_DetectFinger","result":"xx"}
	var WS_FM_Extract = "FM_Extract";
	//{"reqcode":"FM_Extract","index":"(1~6)"}
	//{"reqcode":"FM_Extract","result":"xx","feature":"base64"}
	var WS_FM_Enroll = "FM_Enroll";

	var WS_FPM_FeatureMatch = "FM_DetectFinger"
	//{"reqcode":"FM_Enroll"}
	//{"reqcode":"FM_Extract","result":"xx","feature":"base64"}


	//--------------------------------------------------------------//
	// 清空显示页面
	//--------------------------------------------------------------//


	function ClearPage_OnClick() {
		// document.getElementById('mb').value = "";;
		//       document.getElementById("output").textContent ="";
	}
	//--------------------------------------------------------------//
	// FPM_Init
	//--------------------------------------------------------------//
	function FM_Init_OnClick() {
		ClearPage_OnClick();
		var obj = {
			"reqcode": WS_FM_Init
		};
		var str = JSON.stringify(obj);
		plguin_send(str);
	}
	//--------------------------------------------------------------//
	// FM_Deinit
	//--------------------------------------------------------------//
	function FM_Deinit_OnClick() {
		ClearPage_OnClick();
		var obj = {
			"reqcode": WS_FM_Deinit
		};
		var str = JSON.stringify(obj);
		plguin_send(str);
	}
	//--------------------------------------------------------------//
	// FM_GetSdkVerison
	//--------------------------------------------------------------//
	function FM_GetSdkVerison_OnClick() {
		ClearPage_OnClick();
		var obj = {
			"reqcode": WS_FM_GetSdkVerison
		};
		var str = JSON.stringify(obj);
		plguin_send(str);
	}
	//--------------------------------------------------------------//
	// FM_GetDevVerison
	//--------------------------------------------------------------//
	function FM_GetDevVerison_OnClick() {
		ClearPage_OnClick();
		var obj = {
			"reqcode": WS_FM_GetDevVerison
		}
		var str = JSON.stringify(obj);
		plguin_send(str);
	}

	//--------------------------------------------------------------//
	// FPM_FeatureExtract
	//--------------------------------------------------------------//
	function FM_Extract_OnClick() {
		// ClearPage_OnClick();
		var obj = {
			"reqcode": WS_FM_Extract,
			"index": select + 1 + ""
		};
		var str = JSON.stringify(obj);
		plguin_send(str);
	}
	//--------------------------------------------------------------//
	// FM_Enroll
	//--------------------------------------------------------------//
	function FM_Enroll_OnClick() {
		var obj = {
			"reqcode": WS_FM_Enroll
		}
		var str = JSON.stringify(obj);
		plguin_send(str);
	}
	//--------------------------------------------------------------//
	// FPM_FeatureMatch
	//--------------------------------------------------------------//
	function FM_DetectFinger_OnClick() {
		var obj = {
			"reqcode": WS_FM_DetectFinger
		}
		var str = JSON.stringify(obj);
		plguin_send(str);

	}

	function errAlert(iret) {
		if (iret === WS_RET_ERR_OK) {
			alert("操作成功");
		} else if (iret === WS_RET_ERR_PARAM) {
			alert("参数错误");
		} else if (iret === WS_RET_ERR_MEMORY) {
			alert("内存分配失败，没有分配到足够的内存");
		} else if (iret === WS_RET_ERR_FUN) {
			alert("功能未实现");
		} else if (iret === WS_RET_ERR_DEVICE) {
			alert("设备不存在");
		} else if (iret === WS_RET_ERR_EXTRACT) {
			alert("提取特征失败或合成模板失败");
		} else if (iret === WS_RET_ERR_INIT) {
			alert("设备未初始化");
		} else if (iret === WS_RET_ERR_UNKOWN) {
			alert("非法错误号");
		} else if (iret === WS_RET_ERR_ELSE) {
			alert("其它错误");
		}
	}


	var mb = null;
	//显示信息  
	var log = function(s) {
		if (document.readyState !== "complete") {
			log.buffer.push(s);
		} else {
			// document.getElementById("output").textContent += (s + "\n");  
			// document.getElementById("outputdiv").scrollTop = document.getElementById("outputdiv").scrollHeight;  
		}
	}
	log.buffer = [];
	//显示连接状态  
	function setConnected(status) {
		// document.getElementById("socketstatus").innerHTML = status;  
	}
	var ws = null;

	//连接  
	function plguin_connect() {
		if (ws != null) {
			console.log("现已连接");
			return;
		}
		var url = Ip;
		if ('WebSocket' in window) {
			ws = new WebSocket(url);
			console.log(ws)
		} else if ('MozWebSocket' in window) {
			ws = new MozWebSocket(url);
		} else {
			log("unsupported WebSocket");
			return;
		}
		ws.onopen = function() {
			log("open");
			setConnected("已连接");
			//设置发信息送类型为：ArrayBuffer  
			ws.binaryType = "arraybuffer";
		}
		ws.onmessage = function(e) {
			log("[recv]:" + e.data.toString());
			var s = e.data.toString();
			var obj = JSON.parse(s);

			//检测设备
			if (obj.repcode == WS_FM_Init) {
				console.log(obj)
				contectStatus = obj.result
			}
			//关闭设备
			else if (obj.repcode == WS_FM_Deinit) {
				// console.log(222)
				errAlert(obj.result);
			}
			//插件版本
			else if (obj.repcode == WS_FM_GetDevVerison) {
				//
				var info = "Ver:" + obj.version;
				alert(info);
			}
			//设备版本
			else if (obj.repcode == WS_FM_GetSdkVerison) {
				//
				alert(obj.version);
			}

			//提取手指特征
			else if (obj.repcode == WS_FM_Extract) {
				if (obj.result == WS_RET_ERR_OK) {
					if (0 == select) {
						console.log(obj)
						alert("指纹采集成功，请松开手指后在按下")
					}
					if (1 == select) {
						console.log(obj)
						console.log("第二次数据")
						alert("指纹采集成功，请松开手指后在按下")
					}
					if (2 == select) {
						console.log(obj)
						console.log("第三次数据")
						alert("指纹采集成功")
					}
					select++

				} else
					errAlert(obj.result);
			} else if (obj.repcode == WS_FM_Enroll) {
				strFTP = obj.template
				errAlert(obj.result);
				if (obj.result == WS_RET_ERR_OK) {
					console.log(obj)
				}
			} else if (obj.repcode == WS_FPM_FeatureMatch) {
				fingerStatus = obj.result
				console.log(fingerStatus)
				// errAlert(obj.result);
			} else {
				log("Unkown");
			}
		}
		ws.onclose = function(e) {
			log("closed");
			ws = null;
		}
		ws.onerror = function(e) {
			log("error");
			ws = null;
		}
	}

	//断开连接  
	function plguin_close() {
		if (ws != null) {
			ws.close();
			ws = null;
			setConnected("已断开");
		}
	}

	function plguin_send(s) {
		log("[send]:" + s);
		if (ws != null) {
			ws.send(s);
		} else {
			log("[send]: ws null");
		}
	}

</script>

<style>
</style>
