<template>
	<view class="adminIndex">
		<navigation-bar-view ref="nav"></navigation-bar-view>

		<view class="group">
			<view class="label" @click="toSetting">
				<view class="line"></view>
				<text>当前设备</text>
				<view class="more">
					<text>设置</text>
					<image class="arrow" src="../../static/images/icon-arrow-right-grey.png"></image>
				</view>
		<!-- 		<view class="more" style="color: #007AFF;" @click="uploadVersion" v-if="!version">
					<text>有新版本</text>
				</view> -->
			</view>
			<view class="value">
				<text>{{body.stationName}}(</text>
				<text v-if="body.status == 1">在线</text>
				<text v-if="body.status == 2">下线</text>
				<text>)</text>
			</view>
		</view>
		<view class="group">
			<view class="label" @click="toOrderList">
				<view class="line"></view>
				<text>订单统计</text>
				<view class="more">
					<text>查看</text>
					<image class="arrow" src="../../static/images/icon-arrow-right-grey.png"></image>
				</view>
			</view>
			<view class="value order">
				<view class="item">
					<view class="title">今日订单数</view>
					<view class="amount">{{data.todayNum}}</view>
				</view>
				<view class="item">
					<view class="title">今日订单金额</view>
					<view class="amount">￥{{data.todayAmount}}</view>
				</view>
				<view class="item">
					<view class="title">今日使用人数</view>
					<view class="amount">{{data.personNum}}</view>
				</view>
			</view>
		</view>
		<view class="group">
			<view class="label" @click="toPortList">
				<view class="line"></view>
				<text>设备统计</text>
				<view class="more">
					<text>查看</text>
					<image class="arrow" src="../../static/images/icon-arrow-right-grey.png"></image>
				</view>
			</view>
			<view class="value order">
				<view class="item">
					<view class="title">使用中</view>
					<view class="amount">{{data.useCount}}</view>
				</view>
				<view class="item">
					<view class="title">空闲中</view>
					<view class="amount">{{data.freeCount}}</view>
				</view>
				<view class="item">
					<view class="title">冻结中</view>
					<view class="amount">{{data.frozenCount}}</view>
				</view>
				<view class="item">
					<view class="title">禁用中</view>
					<view class="amount">{{data.disableCount}}</view>
				</view>
			</view>
		</view>
		<view class="btns">
			<view class="btn full" @click="knockOut">一键清箱</view>
		</view>
		<view class="btns">
			<view class="btn" @click="openDoor">一键开门</view>
			<view style="width: 4vw;"></view>
			<view class="btn" @click="closeDoor">一键关门</view>
		</view>
	</view>
</template>

<script>
	import navigationBarView from '../../components/navigationBarView.vue';
	export default {
		components: {
			navigationBarView
		},
		data() {
			return {
				body: {},
				data: {},
				version: '',
			}
		},
		onLoad() {
			this.getData();
		},
		
		onShow() {
			this.getVersion();
		},

		methods: {
			getVersion() {
				let sn = uni.getStorageSync('sn');
				this.$api.getCurrentVersion({
					deviceSn: sn
				}).then(res => {
					if (this.$config.version != res.version) {
						this.version = res.url;
					} else {
						this.version = ''
					}
				})
			},

			uploadVersion() {
				uni.showLoading({
					title: '更新中……'
				})
				console.log('ssaaa', this.version);
				const downloadTask = uni.downloadFile({ //执行下载
					url: this.version, //下载地址
					success: downloadResult => { //下载成功
						uni.hideLoading();
						if (downloadResult.statusCode == 200) {
							uni.showModal({
								title: '',
								content: '更新成功，确定现在重启吗？',
								confirmText: '重启',
								confirmColor: '#EE8F57',
								success: function(res) {
									if (res.confirm == true) {
										plus.runtime.install( //安装
											downloadResult.tempFilePath, {
												force: true
											},
											function(res) {
												utils.showToast('更新成功，重启中');
												plus.runtime.restart();
											}
										);
									}
								}
							});
						}
					},
					fail: err => {
						console.log('下载错误', err);
					}
				});

				downloadTask.onProgressUpdate((res) => {
					console.log('下载进度' + res.progress);
					console.log('已经下载的数据长度' + res.totalBytesWritten);
					console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);

					// 测试条件，取消下载任务。
					// if (res.progress == 100) {
					// 	downloadTask.abort();
					// }
				});
			},

			getData() {
				let sn = uni.getStorageSync('sn');
				this.$api.managerStatistics({
					deviceSn: sn
				}).then(res => {
					this.body = res.device;
					res.todayAmount = res.todayAmount.toFixed(2)
					this.data = res;
				})
			},

			// 一键清箱
			knockOut() {
				const _ = this;
				uni.showModal({
					title: '提示',
					content: '请确认是否一键清箱？',
					success: r => {
						if (r.confirm) {
							let sn = uni.getStorageSync('sn');
							_.$api.managerTranslateSys({
								deviceSn: sn,
								port: 0
							}).then(res => {
								uni.showToast({
									title: '一键清箱成功'
								})
								_.getData()
							})
						}
					}
				})
			},

			// 一键开箱
			openDoor() {
				const _ = this;
				uni.showModal({
					title: '提示',
					content: '请确认是否一键开箱？',
					success: r => {
						if (r.confirm) {
							let sn = uni.getStorageSync('sn');
							_.$api.managerOperationSys({
								deviceSn: sn,
								witch: 1,
								port: 0
							}).then(res => {
								uni.showToast({
									title: '一键开箱成功'
								})
								_.getData()
							})
						}
					}
				})
			},

			// 一键开箱
			closeDoor() {
				const _ = this;
				uni.showModal({
					title: '提示',
					content: '请确认是否一键关箱？',
					success: r => {
						if (r.confirm) {
							let sn = uni.getStorageSync('sn');
							_.$api.managerOperationSys({
								deviceSn: sn,
								witch: 0,
								port: 0
							}).then(res => {
								uni.showToast({
									title: '一键关箱成功'
								})
								_.getData()
							})
						}
					}
				})
			},

			toOrderList() {
				uni.navigateTo({
					url: '/pages/order/list'
				})
			},

			toPortList() {
				uni.navigateTo({
					url: '/pages/admin/port'
				})
			},
			
			toSetting() {
				uni.navigateTo({
					url: '/pages/admin/setting'
				})
			}
		}
	}
</script>

<style lang="scss">
	.adminIndex {
		min-height: 100vh;
		background-color: #f8f8f8;

		.group {
			border-radius: 2.7vw;
			margin: 2.7vw 4vw 0;
			background: #FFFFFF;
			padding: 0 4.1vw 4.9vw;

			.label {
				display: flex;
				align-items: center;
				height: 13.2vw;
				font-size: 4vw;
				font-weight: bold;
				border-bottom: 2rpx solid #F8F8F8;

				.line {
					width: 1.1vw;
					height: 4vw;
					border-radius: 1.1vw;
					background-color: #FDD302;
					margin-right: 2.1vw;
				}

				text {
					flex: 1;
				}

				.more {
					display: flex;
					align-items: center;
					font-weight: 300;
					font-size: 3.7vw;
					color: #333333;

					.arrow {
						width: 2vw;
						height: 3.6vw;
						margin-left: 2vw;
					}
				}
			}

			.value {
				color: #222222;
				font-size: 4.5vw;
				margin-top: 4.9vw;
				font-weight: 600;

				&.order {
					display: flex;
					align-items: center;

					.item {
						flex: 1;
						text-align: center;

						.title {
							margin-bottom: 3.2vw;
							font-weight: 300;
							color: #999999;
							font-size: 3.2vw;
							line-height: 3.2vw;
						}

						.amount {
							font-family: DIN Alternate;
							font-weight: bold;
							color: #444444;
							font-size: 4.8vw;
							line-height: 4.8vw;
						}
					}
				}
			}
		}

		.btns {
			display: flex;
			margin: 5.3vw 4vw 0;

			.btn {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 4vw;
				height: 11.5vw;
				border-radius: 11.5vw;
				background: linear-gradient(to right, #FEE704, #FDD001);

				&.full {
					background: linear-gradient(to right, #44F62C, #00CB75);
					// color: #FFFFFF;
				}
			}
		}
	}
</style>
