<template>
	<view class="content">
		<u-sticky>
			<view class="map">
				<map class="map" id="map" :longitude="locationInfo.locationLongitude"
					:latitude="locationInfo.locaitonLatitude" scale="14" :show-location="true" :markers="markers"></map>
			</view>
		</u-sticky>
		<!-- <cover-view class="controls">控件</cover-view> -->
		<view style="display: flex;justify-content: space-between;">
			<view class="title-left">
				<view class="icon"></view>
				<view class="name">设备列表</view>
			</view>
			<view class="right-navigation">
				<u-button type="primary" text="查看路线" size="small" @click="daoGym" :plain="true"
					shape="circle"></u-button>
			</view>
		</view>
		<view class="list">
			<view class="one-device" @click="deviceClick(item.id)" v-for="item,index in equipmentList" :key="index">
				<view class="left">
					<image class="left-img" :src="item.equipmentPic"></image>
					<!-- <view class="distance">{{item.distance/1000}}km</view> -->
				</view>
				<view class="right">
					<view class="right-title">{{item.equipmentName}}</view>
					<!-- <view class="right-num">设备数量：</view> -->
					<view class="right-address">
						{{item.equipmentLocationName + item.equipmentPostion}}
					</view>
					<!-- <view class="right-navigation">
						<u-button type="primary" text="查看路线" size="small" @click="daoGym" :plain="true"
							shape="circle"></u-button>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markers: [],
				locationInfo: {},
				equipmentList: []
			}
		},
		onLoad(option) {
			this.getEquipmentLocationById(option.equipmentLocationId)
		},
		methods: {
			deviceClick(id){
				uni.navigateTo({
					url:'/devicePackage/pages/deviceDetail?id=' + id
				})
			},
			async getEquipmentLocationById(id) {
				// 获取位置详情
				const locationInfo = await this.$myRequest({
					url: '/system/location/' + id,
				})
				if (locationInfo.data.code == 200) {
					this.locationInfo = locationInfo.data.data
				}
				uni.setNavigationBarTitle({
					title: locationInfo.data.data.locationName
				})

				// 显示mark
				this.markers = [{
					id: 1000,
					label: {
						content: locationInfo.data.data.locationName,
						color: '#FFF',
						fontSize: '18',
						x: -35,
						bgColor: '#3c9cff',
						padding: 5,
						borderRadius: 5
					},
					latitude: locationInfo.data.data.locaitonLatitude,
					longitude: locationInfo.data.data.locationLongitude,
					iconPath: '/static/images/point.png',
					width: '30',
					height: '35'
				}]
				console.log('79',this.markers)
				// 获取设备列表 by	LocationId
				const res = await this.$myRequest({
					url: '/system/equipment/list?equipmentLocationId=' + id,
				})
				if (res.data.code == 200) {
					// 添加接口url 多图片取第一个作为缩略图
					try {
						for (let i = 0; i < res.data.rows.length; i++) {
							let pic = res.data.rows[i].equipmentPic.split(",");
							pic[0] = this.baseUrl + pic[0]
							res.data.rows[i].equipmentPic = pic[0]
						}
					} catch (e) {
						//TODO handle the exception
					}

					this.equipmentList = res.data.rows
					console.log(res.data.rows);
				}
			},
			// 打开微信小程序内置导航界面
			daoGym() {
				let plugin = requirePlugin('routePlan');
				let key = 'WGVBZ-DXXEX-JHX4E-7XKVU-LDSOJ-54BKJ'; //使用在腾讯位置服务申请的key
				let referer = 'sdf'; //调用插件的app的名称
				let endPoint = JSON.stringify({ //终点
					'name': this.locationInfo.locationName,
					'latitude': this.locationInfo.locaitonLatitude,
					'longitude': this.locationInfo.locationLongitude
				});
				wx.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		width: 100%;
		position: relative;

		.title-left {
			display: flex;
			margin: 20rpx;

			.icon {
				width: 6px;
				height: 38rpx;
				line-height: 22px;
				border-radius: 50px;
				background-color: rgba(40, 124, 206, 1);
				text-align: center;
				margin: 8rpx 10rpx 0rpx 0rpx;
			}

			.name {
				color: rgba(16, 16, 16, 1);
				font-size: 40rpx;
				text-align: left;
				font-weight: 600;
			}
		}

		.map {
			height: 600rpx;
			width: 100%;
		}

		.controls {
			position: absolute;
			right: 10rpx;
			top: 300rpx;
			width: 50rpx;
			height: 50rpx;
			background-color: #fff;
		}

		.map_bottom {
			height: 300rpx;

			.map_text {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0px;
				margin: 20rpx 0;
				background: #fff;
				padding: 0 15px;
				width: 600rpx;
				display: flex;
				flex-direction: column;

				.row1 {
					display: flex;
					align-items: center;

					text {
						margin: 5px 0;
						display: block;
						font-size: 16px;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
					}

					.h1 {
						margin: 15px 0;
						font-size: 18px;
					}

					.h2 {
						margin-left: 15rpx;
						font-size: 14px;
						color: grey;
					}
				}
			}
		}

		.list {
			margin: 20rpx;
		

			.one-device {
				padding: 20rpx;
				margin-bottom: 24rpx;
				line-height: 40rpx;
				border-radius: 10rpx;
				background-color: rgba(255, 255, 255, 1);
				text-align: center;
				box-shadow: 0px 2px 8px 1px rgba(228, 228, 228, 100);
				display: flex;
				justify-content: space-between;
				position: relative;

				.left {
					position: relative;
					width: 268rpx;
					height: 182rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;

					.left-img {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}

					.distance {
						position: absolute;
						bottom: 0rpx;
						width: 258rpx;
						height: 24px;
						line-height: 20px;
						border-radius: 0rpx 0rpx 10rpx 10rpx;
						background-color: rgba(16, 16, 16, 0.51);
						color: rgba(16, 16, 16, 1);
						font-size: 14px;
						text-align: center;
						color: #fff;
					}
				}

				.right {
					width: 61%;

					.right-title {
						color: rgba(16, 16, 16, 1);
						font-size: 30rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						text-align: left;
						font-weight: 700;
					}

					.right-num {
						color: rgba(16, 16, 16, 1);
						font-size: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-align: left;
						margin-top: 10rpx;
						margin-bottom: 10rpx;
					}

					.right-address {
						color: rgba(113, 113, 113, 1);
						font-size: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text-align: left;
						margin-top: 20rpx;

					}

					
				}

				.tuijian {
					position: absolute;
					top: 0;
					right: 0;
					width: 96rpx;
					height: 96rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.right-navigation {
			color: rgba(113, 113, 113, 1);
			width: 120rpx;
			font-size: 24rpx;
			float: right;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			text-align: left;
			// margin-top: 20rpx;
			margin:auto 10px;
		}
	}
</style>