<style lang='scss' scoped>
.equipmentStatus{
	width: 100%;
	background-color: #F9F9F9;
	:not(not) {
		box-sizing: border-box;
	}
	&-header{
		/* position: fixed;
		left: 0;
		top: 0;
		width: 100%; */
		z-index: 999;
		background-color: #fff;
	}
	&-search-ctn{
		padding: $paddingTB $paddingLR;
		display: flex;
	}
	&-search{
		width: calc(100% - 180rpx);
	}
	&-search-picker{
		width: 180rpx;
		padding-left: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	&-facility-list{
		/* margin-top: 184rpx; */
		background-color: #F9F9F9;
	}
	&-facility-box{
		padding: 20rpx;
		margin: 20rpx;
		background-color: #fff;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
		margin-bottom: 30rpx;
		font-size: 26rpx;
		&-title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #eee;
		}
		
	}
	.row{
		padding-bottom: 10rpx;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		.row-label{
			width: 140rpx;
		}
		&-label{
			color: $uni-text-color-grey;
			width: 110rpx;
		}
		&-value{
			font-weight: 550;
		}
	}
	.status{
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		color: #666;
		
	}
	.item-btn-box{
		text-align: center;
	}
	.btn-list{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 140rpx;
		padding: 20rpx 20rpx;
		background: #fff;
		.btn-box{
			background: #0066cc;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 36rpx;
			height: 100rpx;
			border-radius: 50rpx;
		}
	}
}

</style>
<template>
	<view class="equipmentStatus">
		<view class="equipmentStatus-facility-list">
			<mescroll-body ref="mescrollRef" top="0" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="equipmentStatus-facility-box" v-for="(item,index) in deviceList" :key="index">
					<view class="equipmentStatus-facility-box-content">
						<view class="row">
							<view class="row-label">设备号：</view>
							<view class="row-value ellipsis">{{item.deviceKey || "-"}}</view>
						</view>
						<view class="row">
							<view class="row-label">设备名：</view>
							<view class="row-value">{{item.deviceName || "-"}}</view>
						</view>
						<view class="row">
							<view class="row-label">设备型号：</view>
							<view class="row-value">{{item.modelName || "-"}}</view>
						</view>
						<view class="row">
							<view class="row-label">设备类型：</view>
							<view class="row-value">{{item.deviceTypeName || "-"}}</view>
						</view>
						<view class="row">
							<view class="row-label">创建时间：</view>
							<view class="row-value ellipsis">{{item.createTime || "-"}}</view>
						</view>
						<view class="item-btn-box" >
							<u-button type="primary" @click="addDevice(item)">添加该设备</u-button>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		data() {
			return {
				labelCode:"",
				deviceList:[], // 设备列表
				adminFlag:true, // 管理员权限
				projectRole:'',
				projectId:'',
				tagType:'',
				ancestors:'',
			}
		},
		mixins:[MescrollMixin],
		onLoad(e) {
			this.projectId = e.projectId;
			this.tagType = e.tagType;
			this.labelCode = e.labelCode;
			this.ancestors = e.ancestors;
		},
		onShow() {
			this.mescroll.resetUpScroll()
		},
		methods: {
			addDevice(device){
				console.log("当前设备",device)
				uni.showModal({
					title: '提示',
					content:'确认要添加设备(' + device.deviceName + ')吗？',
					confirmText:'确认',
					cancelText:'取消',
					success: (res) => {
						if (res.confirm) {
							let arr = this.ancestors.split(',');
							arr.shift()
							arr.shift()
							arr.push(this.labelCode);
							this.$post("/iot/label/bind", {
								labelCodes: arr,
								deviceKey: device.deviceKey,
							}).then((res)=>{
								console.log("res",res)
								if(res.code == 200){
									this.$refs.uToast.show({
										title: '添加成功',
										type: 'success',
									})
									this.mescroll.resetUpScroll();
									uni.navigateBack({delta: 1})
								}else{
									this.$refs.uToast.show({
										title: res.msg,
										type: 'error',
									})
								}
							}).catch((err)=>{
								this.$refs.uToast.show({
									title: err.msg,
									type: 'error',
								})
							})
						}else if (res.cancel) {
							
						}
					}
				});
			},
			goAddDevice(){
				console.log("添加设备")
				// uni.navigateTo({
				// 	url: `../../home/wisdomElectricity/electricityDetail?deviceId=${item.deviceId}`
				// })
			},
			/*上拉加载的回调*/
			upCallback(page) {
				console.log(page,"page");
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let obj = {
					projectId: this.projectId,
					labelType: this.tagType,
					deviceType: 'GATEWAY_CONTROLLER'
				}
				this.$get("/iot/label/unAssign-list",obj).then((res)=>{
					// console.log(res,"ressssssssssss");
					if (res.data && res.data.length>0) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = res.data; 
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length; 
						//设置列表数据
						if(pageNum == 1) this.deviceList = []; //如果是第一页需手动置空列表
						this.deviceList = this.deviceList.concat(curPageData); //追加新数据
						this.mescroll.endBySize(curPageLen, res.total); // 推荐
						// this.mescroll.endByPage(curPageLen, res.data.total)
						// this.mescroll.endSuccess(curPageData.length);
					} else{
						this.deviceList = [];
						this.mescroll.endErr();
						this.mescroll.showEmpty();
						// this.mescroll.endUpScroll(true);
					}
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				}).finally(()=>{
					// this.dropdownIsOpen = false;
				})
			},
			
		}
	}
</script>
