<template>
	<view class="check">
		<view class="check-top">
			<u-input
				customStyle="border:none"
			  placeholder="输入设备编号进行搜索"
			  prefixIcon="search"
			  prefixIconStyle="font-size: 52rpx;color: #000"
			  v-model="params.keywords"
			  @change="inputChage"
			></u-input>
			<view class="check-top-icon" @click="navigateCheck('1','0')">
				
			</view>
		</view>
		<view class="check-center-bg">
			<view class="check-center-info" v-for="item in list" :key="item.id">
				<view class="list-left">
					<view>{{item.deviceTypeName}}</view>
					<view>({{item.devcode}})</view>
				</view>
				<view class="list-center">
					<view :class="item.icon">
						
					</view>
					<view :style="{color: item.color}">
						{{item.onlineStateName}}
					</view>
				</view>
				<view class="list-right">
					<text @click="navigateCheck('2',item)" class="equipment-data" />
					<text @click="navigateCheck('3', item.deviceType)" class="equipment-info" />
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {getPageList, getbaseConfig, getLogin} from '@/api/check.js'
	export default {
	data() {
	  return {
		  // 查询条件
	    params : {
		  keywords: '',
		  deviceType: '',
		  isOnline: '',
		  offset: 1,
		  limit: 20,
		  sort: 'id',
		  order: 'asc',
	  },
	  	list:[],// 数据
	  }
	},
  async onShow() {
	   const {sid,publicKey} = await getbaseConfig()
	   const params = {
		   kaptcha: '',
		   password: 'PymwEyC+/MSD6Ji0SSyrtCMFrXaC6YT80+oGnozwMglaMl/m+MnzgyJjCCh+Abt9qZSgruBBLX54UR2GJLv7hpn8wgJcbwBqAiDqEEN/8I3/AbaUrLcyaFZpLKsmIh5rFIGOcZIgKai3rnzlwmfK2YbtYab/DGlW7ZES/ZKJ+Q4=',
		   sid: sid,
		   username: 'admin',
	   }
	   const {token} = await getLogin(params)
	   await uni.setStorageSync("token",token);
	   this.getList()
	},
	methods:{
	 async getList() { // 获取到数据
			const res = await getPageList(this.params)
			this.list = res.rows.map(item => {
				if( item.onlineStateName === '在线') {
				  item.color = 'green'
				  item.icon = 'line'
				}else if (item.onlineStateName === '离线') {
				   item.color = 'grey'
				   item.icon = 'offline'
				}else {
				  item.color = 'red'
				  item.icon = 'report'
				}
				return item
			})
		},
		inputChage() { // 输入框发生改变
			this.getList()
		},
		navigateCheck(index,type){ // 跳转
		if( typeof(type) === 'object' ) {
			uni.setStorageSync('checkrow',type)
		}
			if(index === '1') {
				wx.navigateTo({
				  url: '/pages/reportList/reportList',
				});
			}else if (index === '2') {
				wx.navigateTo({
				  url: '/pagesA/checkInfo/checkInfo',
				});
			}else if (index === '3') {
				wx.navigateTo({
				  url: `/pages/checkTable/checkTable?type=${type}`,
				});
			}
		},
	}
	}
</script>

<style scoped lang="scss">
	.check {
		padding: 10rpx;
		padding-top: 20rpx;
		.check-top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.check-top-icon{
				width: 70rpx;
				height: 70rpx;
				margin: 0 20rpx;
				background: url(@/static/checkIcon/report-log.png) no-repeat center / cover;
			}
		}
		.check-center-bg {
			padding: 20rpx 10rpx;
			background-color: #fff;
			border-radius: 20rpx;
		}
		.check-center-info{
			margin-top: 20rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx #ccc solid;
			
		}
		.list-left{
			text-align: center;
			width: 300rpx;
		}
		.list-center {
			// display: flex;
			// align-items: center;
		}
		.list-right{
			width: 160rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
	.line {
		width: 60rpx;
		height: 60rpx;
		background: url(@/static/checkIcon/line.png) no-repeat center / cover;
	}
	.report {
		width: 60rpx;
		height: 60rpx;
		background: url(@/static/checkIcon/report.png)no-repeat center / cover;
	}
	.offline {
		width: 60rpx;
		height: 60rpx;
		background: url(@/static/checkIcon/offline.png)no-repeat center / cover;
	}
	.equipment-data {
		width: 70rpx;
		height: 70rpx;
		background: url(@/static/checkIcon/equipment-data.png)no-repeat center / cover;
	}
	.equipment-info {
		width: 70rpx;
		height: 70rpx;
		background: url(@/static/checkIcon/equipment-info.png)no-repeat center / cover;
	}
</style>