<style lang='scss' scoped>
.deviceDetail{
	width: 100%;
	&-info{
		padding: 30rpx $paddingLR;
		&-header-right{
			display: flex;
			.icon-ctn{
				display: flex;
				align-items: center;
			}
		}
	}
	&-info-content{
		display: flex;
		padding-top: 30rpx;
	}
	&-info-text{
		width: calc(100% - 200rpx);
		padding-left: 30rpx;
		font-size: $uni-font-size-sm;
		&-row{
			display: flex;
			width: 100%;
			padding-bottom: 14rpx;
			&-label{
				width: 130rpx;
				color: #777;
				text-align: right;
			}
			&-value{
				width: calc(100% - 130rpx);
			}
		}
	}
	&-info-runRecord{
		width: 90%;
		height: 70rpx;
		margin: 0 auto;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1C9AFF;
		border: 1px solid #1C9AFF;
	}
	&-line{
		width: 100%;
		height: 4rpx;
		background-color: #EFEFEF;
	}
	&-relation-device-info{
		display: flex;
		justify-content: space-between;
		padding: $paddingTB $paddingLR;
		align-items: center;
		.icon{
			width: 50rpx;
			height: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #1C9AFF;
			border-radius: 50%;
		}
	}
	&-camera,&-smoke{
		&-header{
			display: flex;
			justify-content: space-between;
			padding: $paddingTB $paddingLR;
			background-color: #F0EDF1;
		}
		&-box{
			padding: 30rpx $paddingLR;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #eee;
			&:last-child{
				border-bottom: none;
			}
			&-row{
				padding-bottom: 10rpx;
				&-label{
					width: 60rpx;
					color: #999;
				}
			}
		}
	
	}
}
</style>
<template>
	<view class="deviceDetail">
		<view class="deviceDetail-info">
			<view class="deviceDetail-info-header flex-between">
				<view class="deviceDetail-info-header-left">
					<text>烟雾探测报警器</text>
					<u-tag class="ml20" text="正常" size="mini" type="success" />
				</view>
				<view class="deviceDetail-info-header-right">
					<view class="icon-ctn">
						<tuiIcon name="dianchidianya" color="#30A3DF"></tuiIcon>
						<text class="pl10">3.0V</text>
					</view>
					<view class="icon-ctn ml30">
						<tuiIcon name="zuxinh" color="#30A3DF"></tuiIcon>
						<text class="pl10">离线</text>
					</view>
				</view>
			</view>
			<view class="deviceDetail-info-content">
				<u-image src="http://static.drgyen.com/app/hc-app-power/images/car.png" width="200" height="200"></u-image>
				<view class="deviceDetail-info-text">
					<view class="deviceDetail-info-text-row">
						<view class="deviceDetail-info-text-row-label">运营商：</view>
						<view class="deviceDetail-info-text-row-value">德润HC-IOT</view>
					</view>
					<view class="deviceDetail-info-text-row">
						<view class="deviceDetail-info-text-row-label">编号：</view>
						<view class="deviceDetail-info-text-row-value">20200000000000000</view>
					</view>
					<view class="deviceDetail-info-text-row">
						<view class="deviceDetail-info-text-row-label">位置：</view>
						<view class="deviceDetail-info-text-row-value">德润科技18楼101北区</view>
					</view>
					<view class="deviceDetail-info-text-row">
						<view class="deviceDetail-info-text-row-label">详情地址：</view>
						<view class="deviceDetail-info-text-row-value">福建省福州市闽侯县上街镇</view>
					</view>
				</view>
			</view>
			<view class="deviceDetail-info-runRecord" @click="goRuningRecord">运行记录</view>
		</view>
		<view class="deviceDetail-line"></view>
		<view class="deviceDetail-relation-device-info">
			<view class="title">关联设备信息</view>
			<view class="icon">
				<u-icon name="plus" color="#fff"></u-icon>
			</view>
		</view>
		<view class="deviceDetail-camera">
			<view class="deviceDetail-camera-header">
				<text>摄像头</text>
				<text>2个</text>
			</view>
			<view class="deviceDetail-camera-list">
				<view class="deviceDetail-camera-box" v-for="(item,index) in 2" :key="index">
					<view class="deviceDetail-camera-box-info">
						<view class="deviceDetail-camera-box-row">
							<text class="deviceDetail-camera-box-row-label">名称：</text>
							<text class="deviceDetail-camera-box-row-value">北区</text>
						</view>
						<view class="deviceDetail-camera-box-row">
							<text class="deviceDetail-camera-box-row-label">地址：</text>
							<text class="deviceDetail-camera-box-row-value">中青大厦18楼101北区</text>
						</view>
					</view>
					<view class="deviceDetail-camera-box-status" :style="{color:getDeviceStatusColorFn(1)}">火警</view>
				</view>
			</view>
		</view>
		<view class="deviceDetail-smoke">
			<view class="deviceDetail-smoke-header">
				<text>烟雾</text>
				<text>2个</text>
			</view>
			<view class="deviceDetail-smoke-list">
				<view class="deviceDetail-smoke-box" v-for="(item,index) in 2" :key="index">
					<view class="deviceDetail-smoke-box-info">
						<view class="deviceDetail-smoke-box-row">
							<text class="deviceDetail-smoke-box-row-label">名称：</text>
							<text class="deviceDetail-smoke-box-row-value">北区</text>
						</view>
						<view class="deviceDetail-smoke-box-row">
							<text class="deviceDetail-smoke-box-row-label">地址：</text>
							<text class="deviceDetail-smoke-box-row-value">中青大厦18楼101北区</text>
						</view>
					</view>
					<view class="deviceDetail-smoke-box-status" :style="{color:getDeviceStatusColorFn(1)}">火警</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		onLoad() {},
		methods: {
			goRuningRecord(){
				uni.navigateTo({
					url:"./runingRecord"
				})
			},
			getDeviceStatusColorFn(status){
				switch (status){
					case 1:
						return "green"
						break;
					case 2:
						return "#ccc"
						break;
					case 3:
						return "#2292EF"
						break;
					case 4:
						return "#F59B24"
						break;
					default:
						break;
				}
			}
		}
	}
</script>
