<template>
	<view class="container">
		<input class="input-box" v-model="inputText" @input="input" type="text" placeholder="请输入内容"/>
		<view class="btn-box">
			<button class="btn-write" @click="writeData()">写信息</button>
			<button class="btn-read" @click="readData()">读信息</button>
		</view> 
	</view>
</template>

<script>
	import nfc from './ouu-nfc.js'
	export default {
		data() {
			return {
				inputText: 'testtesttesttesttestfdsf'
			}
		},
		onLoad() {
			nfc.listenNFCStatus();
		},
		methods: {
			input(e) {
				nfc.inputChanage(e.detail.value)
			},
			writeData() {
				nfc.writeData()
			},
			readData() {
				nfc.readData()
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 15px;
		box-sizing: border-box;
		.iframe {
			height: 100vh;
			width: 100vw;
			border: none;
			margin: 0;
		}
		.input-box {
			border: 1px solid #aaa;
			margin: 30px 0;
			padding: 10px;
			border-radius: 100px;
		}
		.btn-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.btn-write {
				width: 100%;
				height: 100px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20px;
			}
			.btn-read {
				width: 100%;
				margin-left: 20px;
				height: 100px;
				background-color: #1ee176;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20px;
			}
		}
	}

</style>