<template>
	<view class="container">
		<view class="liebiaos"  v-if="List.length != 0">
			<scroll-view :style="{height:scorllheight + 'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view class="item_jklist" v-for="(item,index) in List" :key="index">
					<view class="itembox_top">
						<view class="top_box">
							<image src="../../static/sxt.png" mode=""></image>
							<view class="title">
								{{item.stationName}}
							</view>
						</view>
					</view>
					<view class="bot_box">
							<view class="bot_left" v-for="(it,i) in item.depUrlArr" :key="i"  @click="todetail(it,i,item)">
								<view class="botleft_bot">
									<view class="">
										{{item.depDesArr[i]}}
									</view>
								</view>
								<view class="botleft_top">
									<image src="../../static/mrt.png" mode=""></image>
								</view>
							</view>
					</view>
				</view>
				<view class="load">
					<uni-load-more :status="loadStatus"></uni-load-more>
				</view>
			</scroll-view>
		</view>
		<view class="zwsj" v-else>
			<view class="inzwsj">
				<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image>
				<view class="zwsjtext">
					暂无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/api/api"
	import configService from '@/common/service/config.service.js';
	export default {
		data(){
			return{
				height:0,
				scorllheight:0,
				baseUrl:configService.apiUrl,
				allNum: '',
				isLastpage: '',
				intervalId: null,
				loadStatus:'more',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
				show:false,
				show1:false,
				top:0,
				List:[],
				pageNo:1,
				pageSize:4,
				token:'',
				sxtlist:[]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					var pxToRpxScale  = 750 / res.windowWidth
					var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
					var navigationHeight = 44 * pxToRpxScale
					this.height = res.windowHeight  * pxToRpxScale//将px 转换rpx
					console.log(this.height,ktxStatusHeight,navigationHeight)
					this.scorllheight = this.height
				}
			});
			this.getList()
			this.getToken()
		},
		onShow() {
			uni.getSystemInfo({
				success: res => {
					var pxToRpxScale  = 750 / res.windowWidth
					var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
					var navigationHeight = 44 * pxToRpxScale
					this.height = res.windowHeight  * pxToRpxScale//将px 转换rpx
					console.log(this.height,ktxStatusHeight,navigationHeight)
					this.scorllheight = this.height
				}
			});
		},
		methods:{
			getToken(){
				this.$http.post('/applet/ysyun/getYsToken').then(res =>{
					this.token = res.data.data.ysToken
				})
			},
			getList(){
				let params = {}
				params.pageNo = this.pageNo
				params.pageSize = this.pageSize
				uni.showLoading({
					title: '加载中'
				});
				this.List = []
				this.$http.get('/applet/survDeviceDeploy/list',{params:params}).then(res =>{
					if(res.data.code == 0){
						var data = res.data.data
						this.List = this.List.concat(data)
						if(data.length != 0){
							this.allNum = Number(data.length)/Number(this.pageSize)+'';
							console.log(this.allNum,'总页数')
							if(this.allNum.indexOf('.') == -1) {
								this.allNum = this.allNum;
								console.log(this.allNum,'if')
							} else {
								this.allNum = parseInt(Number(this.allNum)+1);
								console.log(this.allNum,'else')
							}
							console.log(this.pageNo,this.allNum,'156156')
							if(this.pageNo == this.allNum) {
								this.isLastpage = true;
								 this.loadStatus='nomore'
								console.log(this.isLastpage,'true','nomore')
							} else {
								this.isLastpage = false;
								// this.isLoadMore=true
								this.loadStatus = 'more'
								console.log(this.isLastpage,'false')
							}
						}else{
							this.isLastpage = true;
							this.loadStatus='nomore'
						}
					}
					uni.hideLoading();
					this.isRefresher= false
				})
			},
			lower() {
				console.log("最后一页了，取消下拉功能");
				// 最后一页了，取消下拉功能
				if (this.isLastpage) {
					return
				}
				clearInterval(this.intervalId);
				var num = 1;
				this.intervalId = setInterval(() => {
					num = num+1;
				},1000)
					console.log(this.intervalId,num)
				this.pageNo = this.pageNo + 1;
				let params = {}
				params.pageNo = this.pageNo
				params.pageSize = this.pageSize
				this.$http.get('/applet/survDeviceDeploy/list',{params:params}).then(res =>{
					if(res.data.code == 0){
						var data = res.data.data
						this.List = this.List.concat(data)
						if(data.length != 0){
							if(this.pageNo == this.allNum) {
								this.isLastpage = true;
								 this.loadStatus='nomore'
								console.log(this.isLastpage,'true')
							} else {
								this.isLastpage = false;
								// this.isLoadMore=true
								this.loadStatus = 'more'
								console.log(this.isLastpage,'false')
							}
						}else{
							this.isLastpage = true;
							this.loadStatus='nomore'
						}
					}
				})
			},
			todetail(it,i,val){
				let item = it.split('-')
        // utils_config.config.h5LinkIp
        var obj = {
          url: "https://m.ilhzn.cn/#/pages/cameraView/ysyCamera",
          deployDes: val.stationName+'-'+val.depDesArr[i],
          ysToken: this.token,
          deviceIotUrl: item[0]
        };
        const queryString = Object.keys(obj).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join("&");
        const webviewUrl = `/packDetail1/pages/device/index4?${queryString}`;
        uni.navigateTo({
          url: webviewUrl
        });
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: #fff;
	}
	.container{
		height: 100%;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	.bgimg{
		width: 100%;
		height: 2135rpx;
	}
	.item_jklist{
		padding: 0rpx 20rpx 0rpx;
		background-color: #ffffff;
		margin-bottom: 15rpx;
	}
	.item_jklist{
		margin-bottom: 0;
	}
	.itembox_top{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		padding: 20rpx 0;
		color: #8b95ea;
	}
	.top_box{
		display: flex;
		align-items: center;
	}
	.top_box image{
		width: 38rpx;
		height: 40rpx;
		margin-right: 14rpx;
	}
	.bot_box{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.bot_left{
		width: 48%;
		border: 4rpx solid #f0f0f0;
		border-radius: 4rpx;
		// margin-top: 30rpx;
		// box-shadow: 5px 5px 5px #0000001a;
	}
	// .bot_left:first-child{
	// 	margin-top: 12rpx;
	// }
	// .bot_left:nth-child(2){
	// 	margin-top: 12rpx;
	// }
	.botleft_top{
		width: 100%;
		height: 214rpx;
	}
	.botleft_top image{
		width: 100%;
		height: 100%;
	}
	.botleft_bot{
		padding: 16rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #414141;
		border-bottom: 2rpx solid #f0f0f0;
	}
	.botleft_bot image{
		width: 36rpx;
		height: 40rpx;
		margin-right: 18rpx;
	}
	.item_jklist1{
		margin-top: 20rpx;
	}
	.bot_box1{
		height: 464rpx;
		border-top-left-radius: 28rpx;
		border-top-right-radius: 28rpx;
		box-shadow: 5px 5px 5px #0000001a;
	}
	.botleft_top1{
		width: 100%;
		height: 100%;
		border-top-left-radius: 28rpx;
		border-top-right-radius: 28rpx;
	}
	.botleft_top1 image{
		width: 100%;
		height: 100%;
		border-top-left-radius: 28rpx;
		border-top-right-radius: 28rpx;
	}
	.load{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #c6c6c6;
	}
	.zwsj{
		width: 100%;
		height: 100%;
		display: flex;
		padding: 60% 170rpx 0;
	}
	.inzwsj{
		width: 100%;
	}
	.zwsjimg{
		width: 100%;
		height: 224rpx;
		margin-bottom: 37rpx;
	}
	.zwsjtext{
		width: 100%;
		font-size: 26rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #999999;
		line-height: 31rpx;
		text-align: center;
	}
</style>
