<template>
	<view class="box">

		<view class="infobox" v-if="showtrue" v-for="(item,index) in now_data" :key="index">
			<view class="shubanitemleft time">{{item.createtime}}</view>
			<view class="shubanitemleft num">{{item.papers}}</view>
			<view class="shubanitemleft des">{{item.description}}</view>
			<view class="shubanitemrow">
				<image src="/static/img/rowright.png"></image>
			</view>
		</view>
		<view class="infotou">
			<view class="shubaninfohead">
				<view class="shubaninfoleft">设备编号：{{number}}</view>
				<view class="shubaninforight">
					<image src="/static/img/fenxiang.png"></image>
					<button open-type="share">享</button>
				</view>
			</view>

			<view class="shucompany">
				<view class="shuimg">
					<image src="/static/img/company.png"></image>
				</view>
				<!-- <view class="companyname">所属公司：银河集团</view> -->
				<view class="companyname">所属公司：{{equipment.name}}</view>
			</view>
			<view class="shucompany weizhi">
				<view class="shuimg">
					<image src="/static/img/weizhi.png"></image>
				</view>
				<!-- <view class="companyname">所在位置：天津银河百荣公司</view> -->
				<view class="companyname">所在位置：{{equipment.address}}</view>
			</view>

		</view>
		<view class="remaintime">
			<view class="remainleft">剩余可用时间：{{shengyu_time}}</view>
			<view class="remainright">
				<image src="/static/img/row.png"></image>
			</view>
		</view>
		<view class="shubanbox">
			<view class="shubanhead">
				<view class="shubanitem">数板时间</view>
				<view class="shubanitem">仪器读数</view>
				<view class="shubanitem">业务描述</view>
			</view>

			<view class="shubanlist">

				<view class="shubanlistitem" @click="shubandetail(item)" v-for="(item,index) in equipment_log" :key="index">
					<view class="shubanitemleft time">{{item.createtime}}</view>
					<view class="shubanitemleft num">{{item.papers}}</view>
					<view class="shubanitemleft des">{{item.description}}</view>
					<view class="shubanitemrow">
						<image src="/static/img/rowright.png"></image>
					</view>
				</view>

			</view>
		</view>
		<view class="register" v-if="showketime">
			<view class="timewrap">
				<view class="keyongimg">
					<image src="/static/img/sun.png"></image>
				</view>
				<view class="keyongtime">可用时间不足，请前去缴费!</view>

				<view class='queding'>确定</view>
			</view>

		</view>
	</view>
</template>

<script>
	import app from "../../App.vue"
	export default {
		data() {
			return {
				showketime: false,
				showtrue: false,
				// 数板数据
				is_over: "",
				equipment: "",
				shengyu_time: "",
				equipment_log: "",
				// 获取当前时间
				now_time: "",
				// 获取最新的数板信息
				now_data: "",
				number: '',
				is_share: 0,
				page: 1
			}
		},
		methods: {
			shubandetail(e) {

				uni.navigateTo({
					url: '/pages/shubandetail/shubandetail?id=' + e.id + '&number=' + this.number
				})
			},
			// 获取当前时间
			get_nowtime() {
				let t = this;
				let timestamp = parseInt((new Date()).getTime() / 1000);
				console.log(timestamp); //1495302061441
				t.now_time = timestamp
			},
			// 获取最新的数板信息
			get_newdata() {
				let t = this;
				console.log('9999988888', t.number)
				let url = "api/equipment/getNewEquipment";
				let param = {
					number: t.number,
					// number:this.number,
					time: t.now_time
				};
				app.post(url, param, 'post').then(r => {
					console.log(r, "最新的数板消息");

					t.now_data = r.equipment_log;
					console.log('1234567', t.now_data)
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取数板信息
			get_shuban_infor() {
				let t = this;
				let url = "api/equipment/getEquipment";
				let param = {
					number: t.number,
					is_share: t.is_share,
					page: t.page
					// number:this.number
				};
				app.post(url, param, 'post').then(r => {
					console.log(r, "获取数板信息");
					t.is_over = r.is_over;
					t.equipment = r.equipment;
					t.shengyu_time = r.shengyu;
					t.equipment_log = t.equipment_log.concat(r.equipment_log);
					t.get();
				}).catch(err => {
					console.log(err)
				})
			},
			get() {
				console.log('999999999')
				let number = this.shengyu_time;
				// 				// 时间戳处理
				var totalSecond = number;
				var second = totalSecond;
				// 					// 秒数
				// 					var second = totalSecond;
				var day = Math.floor(second / 3600 / 24);
				var dayStr = day.toString();
				if (dayStr.length == 1) dayStr = dayStr;
				// 小时位
				var hr = Math.floor((second - day * 3600 * 24) / 3600);
				var hrStr = hr.toString();
				if (hrStr.length == 1) hrStr = hrStr;
				// 分钟位
				var min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60);
				var minStr = min.toString();
				if (minStr.length == 1) minStr = minStr;
				// 秒位
				var sec = second - day * 3600 * 24 - hr * 3600 - min * 60;
				var secStr = sec.toString();
				if (secStr.length == 1) secStr = secStr;
				this.shengyu_time = dayStr + '天' + hrStr + '小时' + minStr + "分钟"
				console.log('999999', this.shengyu_time)

			},

		},



		mounted() {
			let that = this
			// this.showtrue=true
			setTimeout(function() {
				that.showtrue = true
			}, 3000);

		},
		onLoad(options) {
			console.log('9999900000', options)
			this.number = options.num;
			if (options.type == 1) {
				this.is_share = 1
			} else {
				this.is_share = 0
			}

			// 获取当前时间
			this.get_nowtime()
		},
		onShow() {
			let that = this;
			this.page=1;
			this.equipment_log=[]
			// 获取数板信息
			this.get_shuban_infor();
			// 获取最新的数板消息
			// this.get_newdata()

			setInterval(function() {

				that.get_newdata()
			}, 2000)
		},
		//上拉触底事件
		onReachBottom: function() {
			let page=this.page;
			page++;
			this.page=page;
			this.get_shuban_infor()
		},
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内转发按钮
			}
			return {
				title: "钢聚人小程序",
				path: 'pages/shubanxinxi/shubanxinxi?share=' + 'true' + '&type=' + 1 + '&num=' + this.number
			}
		},
	}
</script>

<style>
	.infotou {
		background: #fff;
		padding: 34rpx 32rpx;
		box-sizing: border-box;
	}

	.shubaninfohead {
		display: flex;
		align-items: center;
		justify-content: space-between;


	}

	image {
		width: 100%;
		height: 100%;
	}

	.shubaninforight {
		width: 31rpx;
		height: 31rpx;
		font-size: 0;
		position: relative;
	}

	.shubaninforight button {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.shubaninfoleft {
		color: #0A0808;
		font-size: 36rpx;
		font-weight: bold;
	}

	.shucompany {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.shuimg {
		width: 30rpx;
		height: 30rpx;
		font-size: 0;
	}

	.companyname {
		color: #7F8389;
		font-size: 28rpx;
		margin-left: 30rpx;
	}

	.weizhi {
		margin-top: 18rpx;
	}

	.remaintime {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 686rpx;
		height: 100rpx;
		background: rgba(62, 58, 57, 1);
		box-shadow: 0rpx 4rpx 18rpx rgba(0, 0, 0, 0.04);
		opacity: 1;
		border-radius: 10rpx;
		margin: 24rpx auto 0;
		padding: 0 18rpx 0 32rpx;

	}

	.remainleft {
		color: #fff;
		font-size: 28rpx;
	}

	.remainright {
		width: 48rpx;
		height: 48rpx;
		font-size: 0;
	}

	.shubanbox {
		padding: 28rpx 22rpx 28rpx 32rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.shubanhead {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 28rpx 0;

	}

	.shubanitem {
		color: #0A0808;
		font-size: 28rpx;
	}

	.shubanlistitem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 36rpx;
	}

	.shubanlistitem:first-child {
		margin-top: 18rpx;
	}

	.shubanitemrow {
		width: 48rpx;
		height: 48rpx;
		font-size: 0;
		margin-left: 20rpx;
	}

	.shubanitemleft {
		color: #7F8389;
		font-size: 26rpx;

	}

	.des {
		width: 176rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-left: 20rpx;
		text-align: center;
	}

	.time {
		width: 156rpx;
		margin-left: 30rpx;

	}

	.num {
		width: 100rpx;
		text-align: center;
		margin-left: 78rpx;
	}

	.timewrap {
		width: 492rpx;
		height: 588rpx;
		background: rgba(255, 255, 255, 1);
		opacity: 1;
		border-radius: 14rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		right: 50%;
		transform: translate(-50%, -50%)
	}

	.keyongimg {
		width: 186rpx;
		height: 166rpx;
		font-size: 0;
		margin: 54rpx auto 0;
	}

	.remaintime {
		color: #0A0808;
		font-size: 30rpx;
	}

	.queding {
		width: 382rpx;
		height: 100rpx;
		background: rgba(243, 152, 0, 1);
		box-shadow: 0rpx 4rpx 18rpx rgba(0, 0, 0, 0.04);
		opacity: 1;
		border-radius: 10rpx;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 100rpx;
		margin: 98rpx auto 0;
		text-align: center;

	}

	.keyongtime {
		color: #0A0808;
		font-size: 30rpx;
		text-align: center;
		margin-top: 60rpx;
	}

	/* .infobox {
		width: 100rpx;
		height: 100rpx;
		background: #fff;
		pos-bottom: absolute;

	}
 */
	.infobox {
		width: 750rpx;
		height: 150rpx;
		display: flex;
		opacity: 1;
		align-items: center;
		justify-content: space-between;
		/* height: 100rpx; */
		background: #fff;
		position: absolute;
		top: -184rpx;
		animation: myfirst 1s;
		-moz-animation: myfirst 1s;
		/* Firefox */
		-webkit-animation: myfirst 1s;
		/* Safari and Chrome */
		-o-animation: myfirst 1s;
		/* Opera */
	}

	@keyframes myfirst {
		from {
			top: -110rpx;
		}

		to {
			top: 0;
		}
	}
</style>