<template>
	<view class="content">
		<map 
		id="map" 
		:latitude="lat" 
		:longitude="lng" 
		scale="18" 
		show-compass 
		show-location 
		:markers="markers"
		style="width: 100%; height:500rpx;">
		</map>
		<!-- 网点信息及设备 -->
		<view class="details" v-if="stationData">
			<view class="details-address">
				<image src="/static/md-big-pic.png" class="store-pic"></image>
				<view class="store-info">
					<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>
			<!-- 设备列表 -->
			<view class="details-dev">
				<view class="details-dev-box" v-for="item in deviceData" :key="item.id">
					<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" :key="boxItem.id">
							<view class="item-pic-con">
								<text v-if="boxItem.flag==1" class="full-sign">已满</text>
								<u-image mode="aspectFit" height="80" width="80" :src="`/static/${boxItem.rubbishType}.png`" class="type-sign"></u-image>
							</view>
							<view class="dev-main">
								<view>
									{{ boxItem.rubbishTypeDictValue }}
								</view>
								<view class="rule-con">
									{{ getRule(boxItem.rubbishType).rubbishWeight }}g/
									<text class="goleNum">{{ getRule(boxItem.rubbishType).goleNum }}</text>
									<image src="/static/ledou.png" class="ld-pic"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="deviceData.length==0" icon-size="60" text="暂无设备" mode="list" margin-top="120"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import { stationDevice, getWaitToCleanDetailHeader } from '@/api/cleared.js'
	export default {
		data() {
			return {
				stationNo: '',  //  网点编号
				lat: '',
				lng: '',
				mapCtx: null, // 地图对象
				markers: [], // 标注点
				stationData: null,  //  网点信息
				deviceData: [],  //  设备信息
			};
		},
		onLoad(options) {
			this.stationNo = options.stationNo
			this.getStation()  //  网点信息
			this.getDevice()  //  设备信息
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		methods: {
			//  网点信息
			getStation(){
				getWaitToCleanDetailHeader({ stationNo: this.stationNo }).then(res => {
					if(res.status == 200){
						this.stationData = res.data
						this.markers = []
						this.markers.push({
							latitude: res.data.lat,
							longitude: res.data.lng,
							width: 30,
							height: 30,
							iconPath: "/static/store.png"
						})
						this.lng = res.data.lng
						this.lat = res.data.lat
					}else{
						this.stationData = null
						this.markers = []
						this.lng = ''
						this.lat = ''
					}
				})
			},
			//  设备信息
			getDevice(){
				stationDevice({ stationNo: this.stationNo }).then(res => {
					if(res.status == 200){
						this.deviceData = res.data
					}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{
			display: flex;
			align-items: center;
			padding: 20upx;
			background: #FFFFFF;
			border-radius: 15upx;
			box-shadow: 0upx 3upx 6upx #eee;
			margin-bottom: 20upx;
			.store-pic{
				width: 120rpx;
				height:120rpx;
				margin-right: 20rpx;
			}
			.store-info{
				>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 0;
					display: flex;
					flex-wrap: wrap;
					.dev-item{
						width: 50%;
						display: flex;
						align-items: center;
						> view{
							padding: 25upx 10upx 15upx 0;
							&:last-child{
								view{
									display: flex;
									align-items: center;
									.u-tag{
										margin-left: 10upx;
									}
								}
							}
						}
						.item-pic-con{
							position: relative;
							padding-left: 30rpx;
							.full-sign{
								font-size: 24rpx;
								padding: 4rpx 10rpx 14rpx;
								color: #fff;
								background: url('/static/full-bg.png') no-repeat;
								background-size: 100% 100%;
								transform: scale(0.8);
								position: absolute;
								left: 0;
								top: 0;
								width: 68rpx;
								height: 55rpx;
								z-index: 9;
							}
						}
						.dev-main{
							.rule-con{
								color: #666;
								font-size: 24upx;
								.goleNum{
									color: #eb0000;
									font-size: 26rpx;
									font-weight: bold;
									margin-left: 4rpx;
								}
								.ld-pic{
									width: 30rpx;
									height: 30rpx;
									margin-left: 6rpx;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
