<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" v-if="stationData">
			<view class="details-address">
				<view>{{ stationData.name }}</view>
				<view>{{ stationData.provinceName }}{{ stationData.cityName }}{{ stationData.districtName }}{{ stationData.address }}</view>
				<view>
					营业时间：
					<text v-for="(tItem, tInd) in stationData.deliveryTimeRuleItemList" :key="tInd">
						{{ tItem.openTime }} - {{ tItem.closeTime }}{{ tInd == stationData.deliveryTimeRuleItemList.length - 1 ? '' : '，' }}
					</text>
				</view>
			</view>
			<!-- 设备列表 -->
			<view class="details-dev">
				<view class="details-dev-box" v-for="item in deviceData">
					<view class="details-dev-title">设备编号：<text>{{ item.srcDeviceCode }}</text></view>
					<view class="details-dev-cons">
						<view class="dev-item" v-for="boxItem in item.deviceTypeBoxList">
							<view>
								<u-image height="80" width="80" :src="`/static/${boxItem.rubbishType}.png`"></u-image>
							</view>
							<view>
								<view>
									{{ boxItem.rubbishTypeDictValue }}
									<u-tag v-if="boxItem.flag==1" text="已满" size="mini" mode="dark" type="info" />
								</view>
								<text>{{ getRule(boxItem.rubbishType).rubbishWeight }}g/{{ getRule(boxItem.rubbishType).goleNum }}乐豆</text>
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="deviceData.length==0" text="暂无设备" mode="list" margin-top="120"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import { stationDetail, stationDevice } from '@/api/station.js'
	export default {
		data() {
			return {
				stationId: '',  //  网点id
				stationNo: '',  //  网点编号
				lat: '',
				lng: '',
				mapCtx: null, // 地图对象
				markers: [], // 标注点
				stationData: null,  //  网点信息
				deviceData: [],  //  设备信息
			};
		},
		onLoad(options) {
			this.stationId = options.id
			this.stationNo = options.stationNo
			//  获取经纬度
			this.getLocation()
			this.getStation()  //  网点信息
			this.getDevice()  //  设备信息
		},
		methods: {
			//  获取经纬度
			getLocation() {
				const _this = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_this.lng = res.longitude
						_this.lat = res.latitude
					},
					fail: function(error) {
						console.log(error)
						uni.showToast({ icon: 'none', title: '定位失败' })
					}
				})
			},
			//  网点信息
			getStation(){
				stationDetail({ id: this.stationId }).then(res => {
					if(res.status == 200){
						this.stationData = res.data
					}else{
						this.stationData = null
					}
				})
			},
			//  设备信息
			getDevice(){
				stationDevice({ stationNo: this.stationNo }).then(res => {
					if(res.status == 200){
						this.deviceData = res.data
						this.markers = []
						for(let i=0; i<res.data.length; i++){
							this.markers.push({
								latitude: res.data[i].lat,
								longitude: res.data[i].lng,
								width: 30,
								height: 30,
								iconPath: "/static/store.png"
							})
						}
					}else{
						this.deviceData = []
					}
				})
			},
			//  根据垃圾类型获取兑换规则
			getRule(type){
				let row = null
				if(this.stationData.goldExRuleItemList){
					row = this.stationData.goldExRuleItemList.find(item => item.rubbishType == type)
				}
				return { rubbishWeight: row.rubbishWeight || 0, goleNum: row.goleNum || 0 }
			}
		}
	}
</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>
