<template>
	<view class="dataAcquisition">  	
		<u-search class="margin-top-20" placeholder="请输入设备名称" shape="square" :show-action="false" bg-color="#fff" :height="40" v-model="query.deviceName" @search="getDeviceList" @clear="getDeviceList"></u-search>
		<!-- 设备数量统计 -->
		<view class="padding-20 flex fdc aic font-size-25 font-color-l3 ">
			<text class="font-style-italic margin-top-10">设备总数为{{total}}</text>
		</view>
		
		<!-- 设备列表 -->
		<view v-if="deviceList.length>0" class="deviceList">
			<view class="device" v-for="(item,index) in deviceList" :key="index" @click="jump(item)">
				<image class="img" :src="baseUrl+item.src" mode=""></image>
				<view class="info">
					<view class="deviceName">{{item.deviceName}}</view>
					<view class="number">设备编号:{{item.serialNumber}}</view>
				</view>
				<view class="flex aic font-size-24 width-120">
					<view class="width-20 height-20 border-radius-15 margin-right-10" :style="{backgroundColor:statusColor(item.status)}">
					</view> 
					{{item.status|statusName}}
				</view>
			</view>
		</view>
		
		<!-- 无数据控件 -->
		<u-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"/>
		
		<!-- 数据加载中控件 -->
		<u-loading-page :loading="loading" loading-text="加载中..." style="z-index:999"></u-loading-page>
		
		<!-- 快速返回顶部控件  top定义向下滚动多少距离显示（rpx），scrollTop向上返沪的距离，用onPageScroll获取已经滚动的距离 -->
		<u-back-top :scrollTop="scrollTop" top="50" icon="arrow-up"></u-back-top>
		
		<!-- loadmore控件 -->
		<u-loadmore :status="status" v-if="total>10"/>

	</view>
</template>

<script>
import setting from '@/setting.js'
import sysTopics from '@/utils/sysTopics.js';
export default{
	data() {
		return {
			//navbar标题
			title:'数据采集',
			//加载状态
			loading:true,
			status:'loadmore',
			//返回的数据总条数
			total:0,
			//设备类标
			deviceList:[],
			//actionShett打开状态
			show:false,
			//地块列表
			landList:[],
			query:{
				pageNum:1,
				pageSize:10,
				productId:null,
				deviceName:''
			},
			scrollTop:0,
			baseUrl:uni.$u.http.config.baseURL,
			//因为公用页面，这边根据传过来的产品ID过滤设备列表
			productId:null
		}
	},
	filters:{
		statusName(val) {
			switch (val) {
				case 1:
					return "未激活"
					break;
				case 2:
					return "禁用"
					break;
				case 3:
					return "在线"
					break;
				case 4:
					return "离线"
					break;
				default:
					break;
			}
		}
	},
	onLoad(option) {
		//根据传过来的产品ID过滤设备列表，同时设置导航的标题
		if(JSON.stringify(option)!='{}'){
			this.query.productId=option.productId
			this.title=option.title;
		}
		//设置导航栏标题
		uni.setNavigationBarTitle({
			title:this.title
		})
		//加载设备数据
		this.getDeviceList()
		//连接mqtt
		this.connectMqtt();
	},
	async onPullDownRefresh(){
		//重置pageNum
		this.query.pageNum=1
		//查询设备数据
		await this.getDeviceList()
		//停止下拉刷新
		uni.stopPullDownRefresh()
	},
	//触底
	onReachBottom(){
		this.status="loading"
		this.pullUp()
	},
	//滚动
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	methods:{
		//获取设备列表
		async getDeviceList(){
			const res = await uni.$u.http.get('/iot/device/list', {params: {...this.query,baseId:uni.getStorageSync('baseId')}})
			this.deviceList=res.rows.map(item=>({
				//是否摄像头
				isCamera:item.isCamera,
				//设备名称
				deviceName:item.deviceName,
				//设备ID
				deviceId:item.deviceId,
				//产品ID
				productId:item.productId,
				//产品名称呢个
				productName:item.productName,
				//转换产品的图片
				src:item.imgUrl.split(",").length>1?item.imgUrl.split(",")[1]:item.imgUrl.split(",")[0],
				//设备状态值
				status:item.status,
				//设备信号
				rssi:item.rssi,
				//设备序列号，摄像头序列号为20位
				serialNumber:item.serialNumber,
				//是否支持设备影子
				isShadow:item.isShadow
			}))
			this.total=res.total;
			//快速返回顶部
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 100,
			});
			//加载状态设置为false
			this.loading=false
		},
		//上拉加载
		async pullUp(){
			//计算共计多少页，total返回的是总条数，不是每页的条数
			let totalPages = Math.ceil(this.total/10)
			if(this.query.pageNum<totalPages){
				this.query.pageNum++
				const res = await uni.$u.http.get('/iot/device/list', {params: this.query})
				this.deviceList=this.deviceList.concat(res.rows.map(item=>({
					//是否摄像头
					isCamera:item.isCamera,
					//设备名称
					deviceName:item.deviceName,
					//设备ID
					deviceId:item.deviceId,
					//产品ID
					productId:item.productId,
					//产品名称呢个
					productName:item.productName,
					//转换产品的图片
					src:item.imgUrl.split(",").length>1?item.imgUrl.split(",")[1]:item.imgUrl.split(",")[0],
					//设备状态值
					status:item.status,
					//设备信号
					rssi:item.rssi,
					//设备序列号，摄像头序列号为20位
					serialNumber:item.serialNumber,
					//是否支持设备影子
					isShadow:item.isShadow
				})));
				this.total=res.total;
				this.status="loadmore"
			}else{
				this.status="nomore"
			}
		},
		//页面跳转
		jump(data){
			// console.log(data)
			if(data.isCamera=='1'){
				// #ifndef MP-WEIXIN
				uni.$u.route({
					url: 'pages/videoMonitor/videoPlay',
					params: {
						deviceId:data.deviceId,
						deviceName:data.deviceName
					}
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.$u.route({
					url: setting.mpVideoMode == 'webView'?'pages/videoMonitor/webview':'pages/videoMonitor/videoPlay',
					params: {
						deviceId:data.deviceId,
						deviceName:data.deviceName
					}
				})
				// #endif
			}else{
				uni.$u.route({
					url: 'pages/dataAcquisition/deviceDetail',
					params: {
						...data,
						src:this.baseUrl+data.src
					}
				})
			}
			
		},
		//mqtt连接和订阅
		async connectMqtt() {
			if (this.$mqttTool.client == null) {
				await this.$mqttTool.connect();
			}
			this.mqttSubscribe();
			this.mqttCallback();
		},
		//mqtt订阅主题
		mqttSubscribe() {
			const { device } = this;
			//设备状态主题
			let topicStatus ='/+' +  '/+'  + sysTopics.statusFetch;
			let topics = [];
			topics.push(topicStatus);
			this.$mqttTool.subscribe(topics);
		},
		//mqtt回调
		mqttCallback() {
			this.$mqttTool.client.on('message', (topic, message, buffer) => {
				let _topic = topic.split('/');
				let _message = JSON.parse(message.toString());
				if(_topic[1] && _topic[2] && _message.status){
					this.deviceList.forEach(item=>{
						//判断设备列表中的序列号和主题中的序列号是相等
						if(item.serialNumber == _topic[2]){
							item.status = _message.status;
						}
					})
				}
			});
		},
	    //因为过滤器不支持style，这边使用方法来根据status翻译颜色值
		statusColor(val){
			switch (val) {
				case 1:
					return "#e6a23c"
					break;
				case 2:
					return "#F56C6C"
					break;
				case 3:
					return "#2b7"
					break;
				case 4:
					return "#808080"
					break;
				default:
					break;
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.dataAcquisition{
	padding:0 30rpx 30rpx 30rpx;
	box-sizing: border-box;
	/*#ifdef H5*/
	height: calc(100vh - 44px);
	/*#endif*/
	// overflow: inherit;
	// position: relative;
	.select ::v-deep{
		height:120rpx;
		display: flex;
		align-items: center;
		background-color: #f3f4f6;
		// margin-bottom: 10rpx;
		position: sticky;
		top: 0;
		.u-input .u-input__content__field-wrapper__field{
			height: 80rpx;
			padding: 6px 9px;
			box-sizing: border-box;
		}
	}
	.deviceList{
		.device{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			border-radius: 16rpx;		
			background-color: #fff;
			padding: 30rpx 20rpx;
			.img{
				width: 70rpx;
				height: 70rpx;
				border-radius: 20rpx;
				margin-right: 16rpx;
			}
			.info{
				width: 70%;
				margin-right: 16rpx;
				.deviceName{
					width: 100%;
					overflow:hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: 900;
				}
				.number{
					width: 100%;
					font-size: 26rpx;
					overflow:hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					padding:10rpx 0;
					color: #666;
				}
			}
		}
	}
	.areaList{
		.search{
			width: 90%;
			margin: 20rpx auto;
		}
		.selected{
			height: 35vh;
			overflow: auto;
			.item{
				padding: 0 50rpx;
				display: flex;
				justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;
				position: relative;
				&::after{
					display: block;
					content: '';
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
				}
			}
		}
	}
}
</style>