<template>
	<view class="device-list-index">
		<project-drop-down @change="change"></project-drop-down>
		<view class="device-list">
			<view class="device-item-box" v-for="(item,index) in monitorList" :key="index"
				@click="$navigateTo('/pages/monitor/monitor')">
				<view class="item-box">
					<view class="item-icon">
						<uni-icons :type="item.iconName" custom-prefix="iconfont" :size="item.iconSize" color="#c3c3c3">
						</uni-icons>
					</view>
					<view class="item-label">{{item.name}}</view>
					<view class="item-sub-label">
						<view class="label">{{item.positionName}}</view>
						<view class="line"></view>
						<view class="label" v-if="item.state === 1">{{item.isOpen ? item.describe : '在线'}}</view>
						<view class="label" v-else>离线</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import projectDropDown from '@/components/common/projectDropDown.vue'
	import monitorList from '@/uitls/monitorList.js';
	export default {
		data() {
			return {
				monitorList: []
			}
		},
		onShow() {
			this.monitorList = monitorList;
		},
		methods: {
			change(e) {
				if (e.name === 'room') {
					if (e.value === 'all') return this.monitorList = monitorList;
					this.monitorList = monitorList.filter(node => node.positionName === e.label);
				}
			}
		},
		components: {
			projectDropDown
		},
	}
</script>

<style lang="scss">

</style>