<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="name">
					设备列表
				</view> -->
				<view class="swiper" :current='curtitidx' @change="swiperchange" @scrolltolower="onReachBottom">
						<view class="swiper-item ">
							<view class="card_box" v-for="(item,index) in wateringList" :key="index" @click="btnitem(item.deviceId)">
								<view class="card">
									<view class="card_left">
										<view class="card_left_tit">
											{{item.deviceName.length > 6 ? item.deviceName.slice(0, 6) + '...' : item.deviceName}}
										</view>
										<view class="card_left_sta">
											<image
												src="https://api.ccttiot.com/smartmeter/img/static/uZSiz7XWpxcXEkl6sTwj"
												mode="aspectFit"></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="aspectFit"></image>
										<image v-else :src="item.picture" mode="aspectFit"></image>
									</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="aspectFit"></image>
								<view class="" style="font-size: 28rpx;color: #808080;margin-top: 30rpx;">暂无更多设备...</view>
							</view>
						</view>
				</view>
			</view>
			
		</view>
		
		

		<u-select v-model="show" :list="list" title='添加方式' @confirm="confirm"></u-select>
          <view v-if="btnmsk" style="width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background-color: #000;opacity: .1;z-index: 999;"></view>
	</view>
</template>

<script>
	var xBlufi = require("@/page_components/blufi/xBlufi.js");
	export default {
		data() {
			return {
				btnmsk:false,
				list: [{
						value: '1',
						label: '扫码添加'
					},
					{
						value: '2',
						label: '搜索附近设备添加'
					}
				],
				show: false,
				storeId: '',
				listobj: {},
				deviceId: '',
				name: '',
				mac: '',
				macs:'',
				
				curtitidx: 0,
				pagenum: 1,
				wateringList: [],
				pagesize: 10,
				isLoading: false,
				noMoreData: false,
				total: 0,
				showflag: false
			}
		},
		onLoad(option) {
			this.storeId = option.storeId
		},
		onShow() {
			this.wateringList = []
			this.pagenum = 1
			this.getlist()
			this.getdetail()
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
		methods: {	
			btnitem(id){
				uni.navigateTo({
					url:'/pages/shebeione?id=' + id
				})
			},
			getlist() {
				this.$u.get(`/app/device/list?storeId=${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
			// 	})
			// },
			
			
			
			nav(){
				uni.navigateTo({
					url:'/page_fenbao/hehuoren/index?storeId=' + this.storeId,
				})
			}, 
			btnsh(){
				uni.navigateTo({
					url:'/page_fenbao/editshenhe?storeId=' + this.storeId
				})
			},
			getdetail() {
				this.$u.get("/app/store/mch/" + this.storeId).then(res => {
					if (res.code == 200) {
						this.listobj = res.data
					}
				})
			},

			btnpag(num) {
				if (num == 1) {
					uni.navigateTo({
						url: '/page_fenbao/statulist/myshop/shebeilist/index?storeId=' + this.storeId
					})
				} else if (num == 2) {
					if(this.listobj.status == 2){
						uni.showToast({
							title: '已有未审核店铺信息',
							icon: 'none',
							duration: 1000
						})
					}else{
						uni.navigateTo({
							url: '/page_fenbao/statulist/myshop/editshop/index?obj=' + JSON.stringify(this.listobj)
						})
					}
				} else if (num == 3) {
					let vm = this
					uni.showModal({
						title: '提示',
						content: '你确定要注销这个店铺吗？',
						success: function(res) {
							if (res.confirm) {
								this.btnmsk = true
								vm.$u.delete("/app/store/" + vm.storeId).then(res => {
									if (res.code == 200) {
										uni.showToast({
											title: '删除成功',
											icon: 'success',
											duration: 1000
										})
										setTimeout(() => {
											this.btnmsk = false
											uni.navigateBack()
										}, 1500)
									} else if (res.code == 500) {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 1000
										})
										this.btnmsk = false
									}
								})
							} else if (res.cancel) {
								console.log('用户点击了取消')
							}
						}
					})
				}else if(num == 4){
					uni.navigateTo({
						url:'/page_components/peizhi?obj=' + JSON.stringify(this.listobj)
					})
				}else if(num == 5){
					uni.navigateTo({
						url:'/page_geren/buyCard?storeId=' + item.storeId
					})
					// uni.showToast({
					// 	title: '功能暂未开放',
					// 	icon: 'none',
					// 	duration: 1000
					// })
				}
			},

			

		}
	}
</script>

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

	/deep/ .u-icon__icon {
		padding-bottom: 22rpx;
	}


	page {
		background: linear-gradient(180deg, #8883F0 0%, rgba(255, 255, 255, 0) 100%);
	}
	.warp_box{
		// width: 680rpx;
		height: 88vh;
		// background: #FFFFFF;
		// border-radius: 24rpx 24rpx 24rpx 24rpx;
		overflow: scroll;
		// margin-top: 18rpx;
		// padding: 36rpx 40rpx;
		padding-bottom: 50rpx;
		box-sizing: border-box;
		.name{
			font-weight: 600;
			font-size: 32rpx;
			color: #3D3D3D;
		}
	}
    .swiper {
    	.swiper-item {
    		height: 100%;
    
    		.card_box {
    			margin-top: 34rpx;
    			display: flex;
    			flex-wrap: wrap;
    
    			.card {
    				display: flex;
    				margin-top: 20rpx;
    				width: 658rpx;
    				height: 220rpx;
    				background: #fff;
    				box-shadow: 2rpx 0rpx 6rpx -1rpx #000;
    				border-radius: 24rpx 24rpx 24rpx 24rpx;
                    padding: 30rpx;
                    box-sizing: border-box;
                    justify-content: space-between;
    				.card_left {
    					width: 310rpx;
    					// margin-top: 46rpx;
    					// margin-left: 50rpx;
    
    					.card_left_tit {
    						font-size: 40rpx;
    						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: 180rpx;
    						border-radius: 20rpx;
    					}
    				}
    			}
    		}
    	}
    }
	.page {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
         .editxg{
			 width: 100%;
			 height: 90rpx;
			 line-height: 90rpx;
			 display: flex;
			 justify-content: space-between;
			 padding: 0 30rpx;
			 box-sizing: border-box;
			 background-color: #fff;
			 border-radius: 20rpx;
			 margin-top: 20rpx;
		 }
		.box {
			width: 750rpx;
			height: 1440rpx;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 22rpx 36rpx;
			box-sizing: border-box;

			.shopname {
				width: 680rpx;
				height: 102rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: auto;
				padding-left: 30rpx;
				padding-top: 30rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;
			}

			.shoplist {
				padding: 30rpx;
				box-sizing: border-box;
				width: 680rpx;
				height: 320rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 24rpx;

				.tit {
					font-weight: 600;
					font-size: 28rpx;
					color: #3D3D3D;
				}

				.jiben {
					margin-top: 16rpx;
					display: flex;
					justify-content: space-between;

					.qian {
						font-size: 26rpx;
						color: #808080;
						width: 40%;
					}

					.shen {
						font-size: 26rpx;
						color: #3D3D3D;
					}
				}
			}

			.icons {
				// padding-top: 30rpx;
				padding-left: 50rpx;
				padding-right: 50rpx;
				box-sizing: border-box;
				width: 680rpx;
				max-height: 360rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: auto;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;	
				margin-top: 26rpx;

				image {
					width: 96rpx;
					height: 96rpx;
					margin-top: 40rpx;
					margin-bottom: 40rpx;
				}
			}
		}
	}
</style>