<template>
	<view class="check">
		<view class="check-top">
			<u-input
			  placeholder="输入物联设备类型/设备编号进行搜索"
			  prefixIcon="search"
			  prefixIconStyle="font-size: 52rpx;color: #000"
			></u-input>
			<view class="check-top-icon" @click="navigateCheck('1')">
				<u-icon name="order" color="#2979ff" size="28"/>
			</view>
		</view>
		<view class="check-center-bg">
			<view class="check-center-info" v-for="item in list" :key="item.name">
				<view class="list-left">
					<view>{{item.name}}</view>
					<view>({{item.numberNo}})</view>
				</view>
				<view class="list-center">
					<u-icon name="photo" color="#2979ff" size="28"/>
					<view class="">
						{{item.status}}
					</view>
				</view>
				<view class="list-right">
					<text @click="navigateCheck('2')">图标</text>
					<text @click="navigateCheck('3')">图标</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
	data() {
	  return {
	  	list:[
	  	{name:'井盖1',status: '在线',numberNo:'112022010260'},
	  	{name:'井盖2',status: '离线',numberNo:'112022010260'},
		{name:'井盖1',status: '告警',numberNo:'112022010260'},
		{name:'井盖1',status: '正常',numberNo:'112022010260'},
		{name:'井盖1',status: '正常',numberNo:'112022010260'},
	  	],
	  }
	},
	methods:{
		navigateCheck(index){
			if(index === '1') {
				wx.navigateTo({
				  url: '/pages/reportList/reportList',
				});
			}else if (index === '2') {
				wx.navigateTo({
				  url: '/pages/checkInfo/checkInfo',
				});
			}else if (index === '3') {
				wx.navigateTo({
				  url: '/pages/checkTable/checkTable',
				});
			}
		},
	}
	}
</script>

<style scoped lang="scss">
	.check {
		padding: 10rpx;
		.check-top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.check-top-icon{
				cursor:pointer;
				margin: 0 20rpx;
			}
		}
		.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;
		}
		.list-center {
			display: flex;
			align-items: center;
		}
		.list-right{
			width: 160rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>