<template>
	<view class="box">
		<!-- <view class="remaintime">
			<view class="remainleft">剩余可用次数：{{shenyu}}</view>
			<view class="remainright">
				<image src="/static/img/row.png"></image>
			</view>
		</view> -->

		<view class="headbox">
			<view class="shengyu">
				<view class="remainleft">剩余可用时间：{{days}}天{{hours}}小时{{minutes}}分钟</view>
				<view class="remainright">
					<image src="/static/img/row.png"></image>
				</view>
			</view>
			<view class="shengyu cishushengyu">
				<view class="remainleft">剩余可用次数：{{times}}</view>
				<view class="remainright">
					<image src="/static/img/row.png"></image>
				</view>
			</view>

		</view>

		
		
		<view class="shuguanlist">
			<view class="shuguanhead">
				<view class="shuguanheaditem">数管时间</view>
				<view class="shuguanheaditem">图片编号</view>
				<view class="shuguanheaditem">图片</view>
				<view class="row"></view>

			</view>
			<view class="shuguanitem" @click="shuguandetail(item)" v-for="(item,index) in list" :key="index">
				<view class="sgitemleft time">{{item.createtime}}</view>
				<view class="sgitemleft num">{{item.image_id}}</view>
				<view class="sgitemleft pic">
					<image :src='item.files'></image>
				</view>
				<view class="rowright">
					<image src="/static/img/rowright.png"></image>
				</view>
			</view>

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

<script>
	import app from "../../App.vue"
	export default {
		data() {
			return {
				page: 1,
				list: "",
				// 剩余次数
				shenyu: "",
				times: "",
				days: '',
				hours: "",
				minutes: '',
				seconds: '',
			}
		},
		methods: {
			shuguandetail(item) {
				console.log('909090',item)
				uni.navigateTo({
					url: '/pages/shuguanshujudetail/shuguanshujudetail?id=' + item.id
				})
			},


			// 获取剩余可用次数
			get_shenyu() {
				let t = this;
				let param = {};
				let url = "api/shuguan/getShuguanRule";
				app.post(url, param, 'post').then(r => {
					console.log(r, "剩余可用次数")
					t.shenyu = r.shengyu,
						console.log(t.shenyu)
					t.daojishi()
					t.times = r.times

				}).catch(err => {
					console.log(err)
				})
			},
			// 获取数管列表数据
			get_shuguanlist() {
				let t = this;
				let url = "api/shuguan/getShuguanList";
				let param = {
					page: this.page
				};
				app.post(url, param, 'post').then(r => {
					console.log(r.list, "数据列表")
					t.list = t.list.concat(r.list)
				}).catch(err => {
					console.log(err)
				})
			},
			daojishi() {

				let t = this;
				console.log('9999999', t.shenyu)
				let number = t.shenyu;
				// console.log(number)
				// let number = res.over_time;
				// 时间戳处理
				var totalSecond = number;
				console.log(totalSecond)


				// 秒数
				var second = totalSecond;

				// 天数位
				var day = Math.floor(second / 3600 / 24);
				var dayStr = day.toString();
				if (dayStr.length == 1) dayStr = '0' + dayStr;
				// 小时位
				var hr = Math.floor((second - day * 3600 * 24) / 3600);
				var hrStr = hr.toString();
				if (hrStr.length == 1) hrStr = '0' + hrStr;
				// 分钟位
				var min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60);
				var minStr = min.toString();
				if (minStr.length == 1) minStr = '0' + minStr;
				// 秒位
				var sec = second - day * 3600 * 24 - hr * 3600 - min * 60;
				var secStr = sec.toString();
				if (secStr.length == 1) secStr = '0' + secStr;

				this.days = dayStr;
				this.hours = hrStr;
				this.minutes = minStr;
				this.seconds = secStr;
				console.log(this.days)


				totalSecond--;


			},

		},
		onLoad(options) {
			// 获取剩余可用次数
			this.get_shenyu();
			// 获取数管列表数据
			this.page=1;
			this.list=[];
			this.get_shuguanlist()
		},
		//上拉触底事件
		onReachBottom: function() {
			let page=this.page;
			page++;
			this.page=page;
			this.get_shuguanlist()
		},
	}
</script>

<style>
	.headbox {
		width: 686rpx;
		margin: 30rpx auto 0;
		background: #3E3A39;
		border-radius: 10rpx;
		padding: 30rpx 32rpx;
		box-sizing: border-box;
	}

	.shengyu {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* margin-top: 30rpx; */
	}

	.cishushengyu {
		margin-top: 20rpx;
	}

	.shangchuantu {
		width: 686rpx;
		background: #fff;
		margin: 0 auto;
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		margin: 28rpx auto 0;
		border-radius: 14rpx;

	}

	.tuup {
		display: flex;
		align-items: center;

	}

	.tuce {
		width: 160rpx;
		height: 160rpx;
		font-size: 0;
		margin-right: 28rpx;
	}

	.tuup {
		margin-top: 40rpx;
	}

	.shangtu {
		color: #0A0808;
		font-size: 30rpx;
		font-weight: bold;
	}

	.benword {
		width: 160rpx;
		color: #7F8389;
		font-size: 26rpx;
		text-align: center;
		margin-top: 22rpx;
	}

	.shangchaunword {
		color: #CE1500;
		font-size: 26rpx;
		margin-top: 30rpx;
	}

	.remaintime {
		margin-top: 30rpx;
	}

	.shuguanhead {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

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

	.shuguanlist {
		width: 686rpx;
		background: #fff;
		margin: 36rpx auto 0;
	}

	.shuguanhead {
		padding: 28rpx 0;
	}

	.shuguanitem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;
	}

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

	.time {
		width: 156rpx;
		color: #7F8389;
		font-size: 26rpx;
	}

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

	.pic {
		width: 96rpx;
		height: 96rpx;
		font-size: 0;
	}

	.row {
		width: 30rpx;
	}
</style>