<template>
	<view class="container">
		
		<tui-list-view>
			<block>
				<tui-list-cell :lineLeft="false">
					<view class="tui-item-box">
						<view class="tui-msg-box">
							<view class="tui-msg-item">
								<view class="tui-msg-name">{{terminal_name}}</view>
								<view class="tui-msg-content">{{address}}</view>
							</view>
						</view>
						<view class="tui-msg-right">
							<button class="button-item" @click="clickButtonBack()">返回</button>
						</view>
					</view>
				</tui-list-cell>
				<view style="height:20rpx"></view>
				<tui-list-cell :lineLeft="false">
					<view class="tui-item-box">
						<view class="tui-msg-box">
							<view class="tui-msg-item">
								<view class="tui-msg-name">{{name}} - {{terminal_name}}</view>
							</view>
						</view>
						<view class="tui-msg-right">
							<view class="tui-msg-right" @tap="basicMessage(1)">基本信息</view>
						</view>
					</view>
					<view>
						<view class="tui-block-up">
							<view class="tui-block-text" id="buttonOpen">{{openStatus}}</view>
						</view>
						<view class="tui-block-down">
							<view class="tui-block-text-close" @tap="aeratorClose()" id="buttonClose">{{closeStatus}}</view>
						</view>
					</view> 
				</tui-list-cell>
				<view style="height:20rpx;"></view>
				<tui-list-cell :lineLeft="false">
					<view>
						<button class="button-item-down" style="margin-left: 40rpx;" @click="timing()">定时</button>
					</view>
				</tui-list-cell>
				<view style="height:20rpx;"></view>
				<tui-list-cell :lineLeft="false">
					<view>
						<view class="tui-msg-left-1">
							<switch class="tui-switch" color="#5A7BF4" checked="true"></switch>
							定时
						</view>
						<view class="tui-msg-right-1">
							每天10:00:00 开
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :lineLeft="false">
					<view>
						<view class="tui-msg-left-1">
							<switch class="tui-switch" color="#5A7BF4" checked="true"></switch>
							定时
						</view>
						<view class="tui-msg-right-1">
							每天11:00:00 关
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :lineLeft="false">
					<view>
						<view class="tui-msg-left-1">
							<switch class="tui-switch" color="#5A7BF4" checked="true"></switch>
							定时
						</view>
						<view class="tui-msg-right-1">
							每天11:20:00 开
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :lineLeft="false">
					<view>
						<view class="tui-msg-left-1">
							<switch class="tui-switch" color="#5A7BF4" checked="true"></switch>
							定时
						</view>
						<view class="tui-msg-right-1">
							每天12:20:00 关
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :lineLeft="false">
					<view>
						<view class="tui-msg-left-1">
							<switch class="tui-switch" color="#5A7BF4" checked="true"></switch>
							定时
						</view>
						<view class="tui-msg-right-1">
							每天12:40:00 开
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :lineLeft="false">
					<view>
						<view class="tui-msg-left-1">
							<switch class="tui-switch" color="#5A7BF4" checked="true"></switch>
							定时
						</view>
						<view class="tui-msg-right-1">
							每天15:00:00 关
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :lineLeft="false">
					<view>
						<view class="tui-msg-left-1">
							<switch class="tui-switch" color="#5A7BF4" checked="true"></switch>
							定时
						</view>
						<view class="tui-msg-right-1">
							每天15:20:00 开
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :lineLeft="false">
					<view>
						<view class="tui-msg-left-1">
							<switch class="tui-switch" color="#5A7BF4" checked="true"></switch>
							定时
						</view>
						<view class="tui-msg-right-1">
							每天17:30:00 关
						</view>
					</view>
				</tui-list-cell>
			</block>
		</tui-list-view>
		<tui-datetime ref="dateTime" :type="type" :startYear="startYear" :endYear="endYear" :cancelColor="cancelColor" :color="color"
		 :setDateTime="setDateTime" :unitTop="unitTop" :radius="radius" @confirm="change"></tui-datetime>
	</view>
</template>

<script>
	import myapp from '@/common/js/myapp.js'
	export default {
		data() {
			return {
				type: 1,
				startYear: 1980,
				endYear: 2030,
				cancelColor: '#888',
				color: '#5677fc',
				setDateTime: '',
				result: '',
				unitTop: false,
				radius: false,
				openStatus: '',
				closeStatus: '',
				terminal_name: '',
				address: '',
				name: '',
				aerator_id: ''
			}
		},
		onShow: function() {			
			// 检验是否登录
			let user = myapp.checkLogin()
			let that = this;
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
			let curParam = routes[routes.length - 1].options; //获取路由参数
			this.aerator_id = curParam.id;
			// 获取选中曝气机基本信息
			myapp.request('/?c=aerator&a=getSelectAeratorTerminalInfo',function(res) {
				that.terminal_name = res.data.data.terminal_name
				that.address = res.data.data.address
				that.name = res.data.data.name
				if(res.data.data.status == 1){
					that.openStatus= '已开启',
					that.closeStatus= '关闭'
				}else{
					that.openStatus= '已关闭',
					that.closeStatus= '开启'
				}
			},{aerator_id:curParam.id})
		},
		methods: {
			clickButtonBack: function() {
				uni.navigateTo({
					url:'/packagePage/pages/aerator/aerator'
				})
			},
			basicMessage: function() {
				let aerator_id = this.aerator_id
				uni.navigateTo({
					url:'/packagePage/pages/aerator_list/aerator_list?id='+aerator_id
				})
			},
			aeratorClose: function() {
				if(this.closeStatus == '关闭') {
					this.openStatus = '已关闭';
					this.closeStatus = '开启'
				} else if(this.closeStatus == '开启') {
					this.openStatus = '已开启';
					this.closeStatus = '关闭'
				}
				// 远程调用曝气机程序
				let that = this;
				uni.request({
					url: 'https://gate.api.opmonitor.com/?c=aerator&a=getAeratorRlyOn',
					header: {
						'Content-type': 'application/json'
					},
					method: 'GET',
					data: {aerator_id:that.aerator_id},
					success: function(res){
						console.info(res)
					},
					fail: () => {
						console.info('小程序调用功能失败，请检查！')
					}
				})
			},
			countDownButton: function() {
				this.cancelColor = '#888';
				this.color = '#5677fc';
				this.setDateTime = '';
				this.startYear = 1980;
				this.endYear = 2030;
				this.unitTop = false;
				this.radius = false;
				this.type = 5;
				this.cancelColor = '#555';
				this.color = '#e41f19';
				this.$refs.dateTime.show();
			},
			change: function(e) {
				console.log(e);
				this.result = e.result;
			},
			timing: function() {
				this.cancelColor = '#888';
				this.color = '#5677fc';
				this.setDateTime = '';
				this.startYear = 1980;
				this.endYear = 2030;
				this.unitTop = false;
				this.radius = false;
				this.type = 4;
				this.$refs.dateTime.show();
			}
		}
	}
</script>

<style>
	@import '../../../static/style/thorui.css';
	
	page {
		background-color: #F5F6FA;
	}	
	
	.textleft, .textright {
		color: #949494;
		font-size: 20rpx;
		margin-bottom: 20rpx;
	}
	.textleft {
		float:left;
	}
	.textright {
		float:right;
	}
	
	.textleftright {
		border-top:3px solid #F5F6FA;
	}
	
	.tui-default {
		padding: 30rpx 10rpx 40rpx 10rpx;
	}
	
	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
	}
	
	.tui-msg-box {
		display: flex;
		align-items: center;
	}
	
	.tui-msg-item {
		max-width: 500rpx;
		min-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
		flex-shrink: 0;
	}	
	
	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 1;
		color: #000000;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 24rpx;
		line-height: 1;
		color: #7e818c;
	}
	
	.tui-msg-right {
		height: 88rpx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		margin-right:30rpx;
	}
	
	.tui-msg-left-1 {
		display: inline-block;
	}
	
	.tui-msg-right-1 {
		display: inline-block;
		margin-left: 55%;
	}
	
	.button-item {
		font-size: 30rpx;
		width: 160rpx;
		height: 76rpx;
		background-color: #87878c;
		color: white;
	}
	
	.button-item-down {
		font-size: 24rpx;
		width: 160rpx;
		height: 66rpx;
		background-color: #A4ADB3;
		color: white;
		margin-left: 0rpx;
		margin-right: 0rpx;
		display: inline-block;
	}
	
	.tui-msg-right {
		font-size: 26rpx;
		color: #A4A2B3;
	}
	
	.tui-block-up {
		width: 400rpx;
		height: 350rpx;
		background-color: #C1C7EC;
		border-top-left-radius: 7%;
		border-top-right-radius: 7%;
		margin-left: 25%;
	}
	
	.tui-block-down {
		width: 400rpx;
		height: 100rpx;
		background-color: #5767CF;
		border-bottom-left-radius: 7%;
		border-bottom-right-radius: 7%;
		margin-left: 25%;
	}
	
	.tui-block-text {
		font-size: 24rpx;
		color: #5787DC;
		padding-top:50%;
		text-align: center;
	}
	
	.tui-block-text-close {
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		padding-top: 7%;
	}
	
	.tui-switch {
		width: 30rpx !important;
		height: 30rpx !important;
		transform: scale(0.8);
		transform-origin: 100% center;
	}
</style>
