<template>
	<view class="nfc">
		<textarea class="txtarea" disabled :value="readData" placeholder="这是读取到的nfc的数据" />
		<button class="btn" @tap="read()">读取NFC</button>
		<textarea class="txtarea" v-model="writeTxt" maxlength="124" placeholder="这是输入写入的nfc的数据" />
		<button class="btn" @tap="write()">写入NFC</button>
		<button class="btn" @tap="changeNFCState()">切换NFC状态</button>
		<button class="btn" @tap="destroy()">销毁</button>
		<button class="btn" @tap="onStart()">再次开启</button>
	</view>
</template>

<script>
	import NFCTool, {
		NFC_STATUS_ENUM
	} from '@/utils/nfcTool.js'
	// let nfcTool;
	// import {
	// 	getBytes
	// } from './util'
	export default {
		data() {
			return {
				title: '',
				nfcTool: {},
				writeTxt: 'NFC数据->巡更点1',
				readData: ''
			}
		},
		onLoad() {
			// this.testNFC()
			console.log(NFC_STATUS_ENUM)
			this.start();
			console.log('onLoad')
		},
		onShow() {
			console.log('onShow')
		},
		onHide() {
			console.log('onHide')
		},
		onUnload: function() {
			console.log('onHide')
		},
		methods: {
			NFCToolCallBack({
				status,
				tip,
				data
			}) {
				console.log('NFCToolCallBack', status, tip, data)
				switch (status) {
					case NFC_STATUS_ENUM.READ_SUCCESS:
						this.readData = data?.text;
						break;
					case NFC_STATUS_ENUM.WRITE_SUCCESS:
						// this.readData = data?.payload;
						break;
					default:
						break;
				}
			},
			read() {
				// 调用 js 文件里面的方法
				this.nfcTool?.readData()
			},
			write() {
				// 调用 js 文件里面的方法
				this.nfcTool?.writeTag(this.writeTxt)
			},
			changeNFCState() {
				// 调用 js 文件里面的方法
				this.nfcTool?.changeNFCState()
			},
			start() {
				this.nfcTool = new NFCTool(this.NFCToolCallBack);
				console.log(this.nfcTool)
			},
			onStart() {
				// 调用 js 文件里面的方法
				this.nfcTool?.startDiscovery()
			},
			/**
			 * 注销 NFCAdapter
			 */
			destroy() {
				// 调用 js 文件里面的方法
				// this.nfcTool = null;
				this.nfcTool?.stopDiscovery()
				console.log(this.nfcTool)
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>