<template>
	<view class="page">
		<view style="padding-top: 60px;">
			<uni-row :gutter="8">
				<uni-col :span="4" :offset="1">
					<uni-section title="RS485" titleColor="#fff"></uni-section>
				</uni-col>
				<uni-col :span="5">
					<uni-data-select
						placeholder="请选择串口"
					  	v-model="rs485PathKey"
					  	@change="rs485Pathchange"
					  	:localdata="list"
						:clear="false"
					></uni-data-select>
				</uni-col>
				<uni-col :span="5">
					<uni-data-select
						placeholder="请选择波特率"
						v-model="rs485Baudrate"
						:localdata="baudrateList"
						:clear="false"
					></uni-data-select>
				</uni-col>
				<uni-col :span="6">
					<view class="ant-btn ant-btn-lg" @click="rs485Connect" v-if="rs485State == false">
						<text>连接</text>
					</view>				
					<view style="color: red;" class="ant-btn ant-btn-lg" @click="rs485Disconnect" v-else>
						<text>断开</text>
					</view>
					<view style="margin-left: 10px;color:red;" class="ant-btn ant-btn-lg" @click="rs485Save">
						<text>保存</text>
					</view>				
				</uni-col>
			</uni-row>
			
			<uni-row :gutter="12" style="margin-top: 10px;">
				<uni-col :span="4" :offset="1">
					<uni-section title="指令" titleColor="#fff"></uni-section>
				</uni-col>
				<uni-col :span="8">
					<view class="uni-form-item uni-column">
						<input type="text" class="uni-input" v-model="cmd_485" placeholder="自定义指令" />
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="ant-btn ant-btn-lg" @click="send485Data">
						<text>发送</text>
					</view>	
				</uni-col>
			</uni-row>

			<uni-row :gutter="8" :style="{ 'marginTop': '20px' }">
				<uni-col :span="4" :offset="1">
					<uni-section title="RS232" titleColor="#fff"></uni-section>
				</uni-col>
				<uni-col :span="5">
					<uni-data-select
						placeholder="请选择串口"
					  	v-model="rs232PathKey"
					  	:localdata="list"
						@change="rs232Pathchange"
						:clear="false"
					></uni-data-select>
				</uni-col>
				<uni-col :span="5">
					<uni-data-select
						:clear="false"
						placeholder="请选择波特率"
						v-model="rs232Baudrate"
						:localdata="baudrateList"
					></uni-data-select>
				</uni-col>
				<uni-col :span="6">
					<view class="ant-btn ant-btn-lg" @click="rs232Connect" v-if="rs232State == false">
						<text>连接</text>
					</view>				
					<view style="color: red;" class="ant-btn ant-btn-lg" @click="rs232Disconnect" v-else>
						<text>断开</text>
					</view>
					<view style="margin-left: 10px;color:red;" class="ant-btn ant-btn-lg" @click="rs232Save">
						<text>保存</text>
					</view>				
				</uni-col>
			</uni-row>

			<uni-row :gutter="12" style="margin-top: 10px;">
				<uni-col :span="4" :offset="1">
					<uni-section title="指令" titleColor="#fff"></uni-section>
				</uni-col>
				<uni-col :span="8">
					<view class="uni-form-item uni-column">
						<input type="text" class="uni-input" v-model="cmd_232" placeholder="自定义指令" />
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="ant-btn ant-btn-lg" @click="send232Data">
						<text>发送</text>
					</view>	
				</uni-col>
			</uni-row>

			<uni-row :gutter="12" style="margin-top: 20px;">
				<uni-col :span="4" :offset="1">
					<uni-section title="控制" titleColor="#fff"></uni-section>
				</uni-col>
				<uni-col :span="16">
					<view class="ant-btn ant-btn-lg" @click="open(1)">
						<text>开风机</text>
					</view>	
					<view class="ant-btn ant-btn-lg" @click="open(2)">
						<text>开照明</text>
					</view>	
					<view class="ant-btn ant-btn-lg" @click="open(3)">
						<text>开真空</text>
					</view>	
					<view class="ant-btn ant-btn-lg" @click="open(4)">
						<text>开紫外</text>
					</view>	
					<view class="ant-btn ant-btn-lg" @click="open(5)">
						<text>开等离子</text>
					</view>	
				</uni-col>
			</uni-row>
			<uni-row :gutter="12">
				<uni-col :span="16" :offset="5">

					<view class="ant-btn ant-btn-lg" @click="close(1)">
						<text>关风机</text>
					</view>	
					<view class="ant-btn ant-btn-lg" @click="close(2)">
						<text>关照明</text>
					</view>	
					<view class="ant-btn ant-btn-lg" @click="close(3)">
						<text>关真空</text>
					</view>	
					<view class="ant-btn ant-btn-lg" @click="close(4)">
						<text>关紫外</text>
					</view>	
					<view class="ant-btn ant-btn-lg" @click="close(5)">
						<text>关等离子</text>
					</view>					
				</uni-col>
			</uni-row>

			<uni-row :gutter="12" style="margin-top: 20px;">
				<uni-col :span="4" :offset="1">
					<uni-section title="读取" titleColor="#fff"></uni-section>
				</uni-col>
				<uni-col :span="12">
					<view class="ant-btn ant-btn-lg" @click="temp">
						<text>温湿度</text>
					</view>	
					<view class="ant-btn ant-btn-lg" @click="pressure">
						<text>压差</text>
					</view>	
				</uni-col>
			</uni-row>


			<uni-row :style="{ 'marginTop': '40px' }">
				<uni-col :span="4" :offset="1">
					<uni-section title="接收数据" titleColor="#fff"></uni-section>
				</uni-col>
				<uni-col :span="10">
					<view class="receive-item"> 
						<view v-for="(item, index) in received" :key="index">
							{{ item }}
						</view>
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="ant-btn ant-btn-lg" @click="clearReceived">
						<text>清空</text>
					</view>	
				</uni-col>
			</uni-row>			
		</view>

	</view>
</template>

<script>
// #ifdef APP
// import { SerialPortHelper } from "@/uni_modules/android-serialport";
// #endif
import storage from "@/utils/storage.js"
import cmd from '@/utils/cmd.js'
export default {
	data() {
		return {
			RS485: undefined,
			received: [
				// "01 03 04 00 08 4C 31 8E E5"
			],
			// 串口列表
			list: [],
			baudrateList: [
				{ value: 4800, text: '4800' },
				{ value: 9600, text: '9600' },
				{ value: 19200, text: '19200' },
				{ value: 38400, text: '38400' },
				{ value: 57600, text: '57600' },
				{ value: 115200, text: '115200' },
			],
			rs485State: false,
			rs485Path: '',
			rs485PathKey: '',
			rs485Baudrate: '',

			RS232: undefined,
			rs232State: false,
			rs232Path: '',
			rs232PathKey: '',
			rs232Baudrate: '',

			cmd_485: '010300000002C40B',
			cmd_232: ''
		}
	},

	onLoad() {
		this.RS485 = getApp().globalData.RS485
		this.RS232 = getApp().globalData.RS232
		// console.log('this.RS485', this.RS485.isOpen())
		this.getDevice()
		// uni.$emit('debug', { disconnect: true })
	},
	onUnload() {
		if (this.rs232State) {
			this.rs232Disconnect()
		}
		if (this.rs485State) {
			this.rs485Disconnect()
		}
	},
	
	methods: {
		getDevice() {
			// this.RS485 = new SerialPortHelper();
			const list = this.RS485.getAllDevices() // 获取串口列表
			if (list.length) {
				this.list = list.map((i,key) => {
					return {
						value: key,
						text: i
					}
				})
			}
			let rs485Conf = storage.get('rs485')
			// console.log('rs485Conf', rs485Conf)
			if (rs485Conf) {
				let cur = this.list.find(i => i.text == rs485Conf.path)
				if (cur) {
					this.rs485PathKey = cur.value
					this.rs485Path = rs485Conf.path
					this.rs485Baudrate = rs485Conf.baudrate

					this.rs485Connect()
				}
			}
			let rs232Conf = storage.get('rs232')
			// console.log('rs232Conf', rs232Conf)
			if (rs232Conf) {
				let cur = this.list.find(i => i.text == rs232Conf.path)
				if (cur) {
					this.rs232PathKey = cur.value
					this.rs232Path = rs232Conf.path
					this.rs232Baudrate = rs232Conf.baudrate

					this.rs232Connect()
				}
			}
		},
		rs485Pathchange(e) {
			this.rs485Path = this.list[e].text
		},
		rs232Pathchange(e) {
			this.rs232Path = this.list[e].text
		},
		rs485Save() {
			storage.set('rs485', { path: this.rs485Path, baudrate: this.rs485Baudrate })
			uni.showToast({
				title: '保存成功',
				icon: 'none'
			})			
		},
		rs485Connect() {
			// "/dev/ttyUSB2"
			this.RS485.setPath(this.rs485Path);
			this.RS485.setBaudrate(this.rs485Baudrate); 
			this.rs485State = this.RS485.open(); 
			if(this.rs485State){ 
				this.RS485.startAutoReadData((res) =>{
					console.log(this.RS485.byte2HexString(res))
					this.received.unshift(this.RS485.byte2HexString(res))
				}) 
			}
		},
		rs485Disconnect() { 
			this.RS485.stopReadPortData()
			this.RS485.close()
			this.rs485State = this.RS485.isOpen()
		},
		rs232Connect() { 
			// this.RS232 = new SerialPortHelper();
			this.RS232.setPath(this.rs232Path);
			this.RS232.setBaudrate(this.rs232Baudrate); 
			this.rs232State = this.RS232.open(); 
			if(this.rs232State){ 
				this.RS232.startAutoReadData((res) =>{ 	
					this.received.unshift(this.RS232.byte2HexString(res))
				})
			}
		},
		rs232Disconnect() { 
			this.RS232.stopReadPortData()
			this.RS232.close()
			this.rs232State = this.RS232.isOpen()
		},
		rs232Save() {
			storage.set('rs232', { path: this.rs232Path, baudrate: this.rs232Baudrate })
			uni.showToast({
				title: '保存成功',
				icon: 'none'
			})	
		},
		send485Data() {
			this.RS485.sendDataString(this.cmd_485);
		},
		send232Data() {
			this.RS232.sendDataString(this.cmd_232);
		},
		clearReceived() {
			this.received = []
		},
		open(key) {
			// 读按键状态 5AA5FF
			switch(key) {
				case 1:
					this.RS232.sendDataString('5AA5EE0101');
					break;
				case 2:
					this.RS232.sendDataString('5AA5EE0201');
					break;
				case 3:
					this.RS232.sendDataString('5AA5EE0301');
					break;
				case 4:
					this.RS232.sendDataString('5AA5EE0401');
					break;
				case 5:
					this.RS232.sendDataString('5AA5EE0501');
					break;
				default:
					break;
			}
		},
		close(key) {
			switch(key) {
				case 1:
					this.RS232.sendDataString('5AA5EE0100');
					break;
				case 2:
					this.RS232.sendDataString('5AA5EE0200');
					break;
				case 3:
					this.RS232.sendDataString('5AA5EE0300');
					break;
				case 4:
					this.RS232.sendDataString('5AA5EE0400');
					break;
				case 5:
					this.RS232.sendDataString('5AA5EE0500');
					break;
				default:
					break;
			}
		},
		temp() {
			this.RS485.sendDataString('020300000002C438')
		},
		pressure() {
			this.RS485.sendDataString('01030001000295CB')
		}
		
	}
}
</script>

<style scoped>
.page{
	color: #fff;
	text-align: left;
}
:deep(.uni-select){
	min-height: 40px;
	color: rgba(0, 0, 0, .85);
}
.uni-input{
	height: 40px;
	border: 1px solid #d9d9d9;
	background-color: #fff;
	color: rgba(0, 0, 0, .85);
	text-align: left;
	padding: 0 6px;
	white-space: 6px;
}
:deep(.uni-section){
	background-color: transparent;
}
.page :deep(.uni-section .uni-section-header__content){
	line-height: 20px;
	font-weight: 800;
	text-align: right;
}
:deep(.uni-section .uni-section-header){
	padding: 10px;
}
.ant-btn:hover,
.ant-btn:focus,
.ant-btn:active{
  color: rgba(0, 0, 0, 0.85);
}

.receive-item{
	padding-left: 10px;
	height: 400px;
	overflow-y: auto;
}
</style>
