<template>
	<view class="page">
		<u-navbar title="设备列表" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff"
			title-size='36' height='50'></u-navbar>
		<view class="box">
			<view class="warp_box">
				<view class="swiper" :current='curtitidx' @change="swiperchange" @scrolltolower="onReachBottom">
					<view>
						<view class="swiper-item ">
							<view class="card_box" v-for="(item,index) in wateringList" :key="index">
								<view class="card" @click="btnxq(item.deviceId)">
									<view class="card_left">
										<view class="card_left_tit">
											{{item.deviceName}}
										</view>
										<view class="card_left_sta">
											<image
												src="https://api.ccttiot.com/smartmeter/img/static/uZSiz7XWpxcXEkl6sTwj"
												mode=""></image>
											<view class="sta_txt" v-if="item.status==3">
												维修中
											</view>
											<view class="sta_txt" v-if="item.status==2" style="color:greenyellow;">
												使用中
											</view>
											<view class="sta_txt" v-if="item.status==1" style="color:seagreen;">
												正常
											</view>
										</view>
										<view class="card_left_no">
											S/N码：{{item.deviceNo}}
										</view>
									</view>
									<view class="card_right">
										<image v-if="item.customPicture" :src="item.customPicture" mode=""></image>
										<image v-else :src="item.picture" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="" v-if="showflag" style="width: 100%;height: 200rpx;margin: auto;margin-top: 170rpx;text-align: center;">
						<image style="width: 200rpx;height: 200rpx;"
							src="https://api.ccttiot.com/smartmeter/img/static/uZFUpcz0YZZ4f4RjvGg2" mode=""></image>
						<view class="" style="font-size: 28rpx;color: #808080;margin-top: 30rpx;">暂无更多设备...</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curtitidx: 0,
				storeId: {},
				bgc: {
					backgroundColor: " #8883F0",
				},
				pagenum: 1,
				wateringList: [],
				pagesize: 10,
				isLoading: false,
				noMoreData: false,
				total: 0,
				showflag:false
			}
		},
		onLoad(option) {
			this.storeId = option.storeId
			this.getlist()
		},
		methods: {
			swiperchange(e) {
				this.curtitidx = e.detail.current
			},
			getlist() {
				// /app/device/listByStore/{storeId}?pageNum=1&pageSize=10
				this.$u.get(`/app/device/listByStore/${this.storeId}?pageNum=${this.pagenum}&pageSize=${this.pagesize}`)
					.then((res) => { 
						if (res.code == 200) {
							this.total = res.total
							if (this.total > 0) {
								this.showflag = false
							} else {
								this.showflag = true
							}
							if (res.rows.length > 0) {
								// 有数据，追加到列表  
								this.wateringList = this.wateringList.concat(res.rows)
								this.pagenum++
							} else {
								// 没有更多数据  
								this.noMoreData = true;
							}
							this.isLoading = false;
						}
					})
			},
			onReachBottom() {
				let sum = this.total / this.pagesize
				if (this.pagenum - 1 < sum) {
					this.getlist(); // 上拉加载更多  
				} else {
					uni.showToast({
						title: '没有更多设备了',
						icon: 'none',
						duration: 1000
					});
				}
			},
			btnxq(id) {
				// uni.navigateTo({
				// 	url: '/page_user/sbdetail?id=' + id
				// })
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title {
		padding-bottom: 22rpx;
	}

	/deep/ .u-icon__icon {
		padding-bottom: 22rpx;
	}
     page {
     	background: #F4F5F7;
     }
	.page {
		width: 750rpx;
		padding-bottom: 200rpx;
          
		.box {
			width: 750rpx;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-left: 40rpx;

			.swiper {
				.swiper-item {
					height: 100%;

					.card_box {
						margin-top: 34rpx;
						display: flex;
						flex-wrap: wrap;

						.card {
							display: flex;
							margin-top: 20rpx;
							width: 658rpx;
							height: 282rpx;
							background: #fff;
							box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(255, 255, 255, 0);
							border-radius: 24rpx 24rpx 24rpx 24rpx;

							.card_left {
								width: 310rpx;
								margin-top: 46rpx;
								margin-left: 50rpx;

								.card_left_tit {
									font-size: 44rpx;
									font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
									font-weight: 500;
									color: #8883F0;
								}

								.card_left_sta {

									margin-top: 15rpx;
									display: flex;
									flex-wrap: nowrap;
									align-items: center;

									image {
										width: 23.32rpx;
										height: 36.47rpx;

									}

									.sta_txt {
										margin-left: 15rpx;
										color: #262B37;
										font-size: 26rpx;
										font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
										font-weight: 400;
									}
								}

								.card_left_no {
									margin-top: 15rpx;
									font-size: 26rpx;
									font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
									font-weight: 400;
									color: #95989D;
								}
							}

							.card_right {
								margin-top: 30rpx;
								margin-left: auto;
								margin-right: 40rpx;

								image {
									width: 180rpx;
									height: 200rpx;
									border-radius: 20rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>