<template>
	<view class="content">
		<map 
		id="map" 
		:latitude="lat" 
		:longitude="lng" 
		scale="18" 
		show-compass 
		show-location 
		:markers="markers"
		style="width: 100%; height:30%;">
		</map>
		<!-- 网点信息及设备 -->
		<view class="details">
			<view class="details-address">
				<view>华金基座A座</view>
				<view>西安市未央路北二环真光路A座12号</view>
				<view>营业时间：9:00 - 12:00</view>
			</view>
			<!-- 设备列表 -->
			<view class="details-dev">
				<view class="details-dev-box" v-for="item in 3">
					<view class="details-dev-title">设备编号：<text>SDFLSJLSAFJLJSLFJLKF</text></view>
					<view class="details-dev-cons">
						<view class="dev-item">
							<view>
								<u-image height="80" width="80" src="/static/yw.png"></u-image>
							</view>
							<view>
								<view>废旧衣物</view>
								<text>100g/1乐豆</text>
							</view>
						</view>
						<view class="dev-item">
							<view>
								<u-image height="80" width="80" src="/static/zhizhang.png"></u-image>
							</view>
							<view>
								<view>废旧纸张 <u-tag text="已满" size="mini" mode="dark" type="info" /></view>
								<text>100g/1乐豆</text>
							</view>
						</view>
						<view class="dev-item">
							<view>
								<u-image height="80" width="80" src="/static/jinshou.png"></u-image>
							</view>
							<view>
								<view>废旧金属</view>
								<text>100g/1乐豆</text>
							</view>
						</view>
						<view class="dev-item">
							<view>
								<u-image height="80" width="80" src="/static/dhai.png"></u-image>
							</view>
							<view>
								<view>有害垃圾</view>
								<text>100g/1乐豆</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lat: '',
				lng: '',
				mapCtx: null, // 地图对象
				markers: [], // 标注点
			};
		},
		onLoad() {
			this.lng = '101.760521'
			this.lat = '36.636193'
			this.markers = [
				{
					latitude: this.lat,
					longitude: this.lng,
					width: 30,
					height: 30,
					iconPath: "/static/store.png"
				}
			]
		}
	}
</script>

<style lang="scss">
.content{
	width: 100%;
	padding: 0;
	.details{
		margin: 20upx;
		.details-address{
			padding: 20upx;
			background: #FFFFFF;
			border-radius: 15upx;
			box-shadow: 0upx 3upx 6upx #eee;
			margin-bottom: 20upx;
			>view{
				font-size: 24upx;
				padding: 5upx 0;
				color: #666;
				&:first-child{
					font-weight: bold;
					font-size: 30upx;
					color: #333;
				}
			}
		}
		.details-dev{
			.details-dev-box{
				padding: 20upx 20upx 5upx;
				background: #FFFFFF;
				border-radius: 15upx;
				box-shadow: 0upx 3upx 6upx #eee;
				margin-bottom: 20upx;
				.details-dev-title{
					border-bottom: 1px solid #F8F8F8;
					padding: 10upx 0 20upx;
					text{
						color: #666;
					}
				}
				.details-dev-cons{
					padding: 10upx;
					display: flex;
					flex-wrap: wrap;
					.dev-item{
						width: 50%;
						display: flex;
						align-items: center;
						> view{
							padding: 15upx 10upx;
							&:last-child{
								text{
									color: #666;
									font-size: 24upx;
								}
								view{
									display: flex;
									align-items: center;
									.u-tag{
										margin-left: 10upx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
