<template>
	<view class="content">
		<view class="nav">
			<view>
				<u-navbar autoBack placeholder bgColor="" leftIconColor="white">
					<view class="navSlot" slot="center">
						<!-- <u-icon name="arrow-left" size="19"></u-icon> -->
					</view>
				</u-navbar>
			</view>
			<view class="area">
				<u-swiper class="banner" :list="details.pictureList" @click="click" height="480"></u-swiper>
			</view>
		</view>
		<view class="card">
			<view class="powerStaionInfo">
				<view>{{details.storeName}}</view>
				<view class="powerType">24小时 | 免费停车 </view>
			</view>
			<view class="bgDistancePowerStation">
				<view class="distancePowerStation">
					<view style="display: flex; justify-content: space-between; flex: 1;">
						<view class="distanceInfo">
							<view class="title">距您当前</view>
							<view class="distanceNum">{{details.distance}}km</view>
						</view>
						<view>
							<image class="img" src="../../static/tabar/ic_go.png" @click="openLocation(details)">
							</image>
						</view>

					</view>

				</view>
				<view style="display: flex; ">
					<view class="address">{{details.detailedAddress}}</view>
					<view>
						<image style="width: 8rpx; height: 16rpx; padding-left: 10rpx; padding-bottom: 8rpx;"
							src="../../static/tabar/ic_left.png"></image>
					</view>
				</view>
			</view>

			<view class="editInfo" @click="addPowerStation">
				编辑信息
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				value1: "",
				show: false,
				inventoryShow: false,

				curent: 1,
				details: {}
			}
		},

		onLoad(op) {
			console.log(op)
			this.id = op.id
			this.storeGoodsDetails()
		},

		methods: {
			
			addPowerStation() {
					uni.navigateTo({
						url: '/pages/addPowerStation/addPowerStation?id=' + this.id + '&type=' + 'edit'
					})
			},
			
			openLocation(item) {
				console.log(item);
				uni.openLocation({
					latitude: this.details.lat * 1,
					longitude: this.details.lon * 1,
					name: this.details.storeName,
					address: this.details.detailedAddress,
					success: (res) => {
						console.log(res);
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			//电站详情
			storeGoodsDetails() {
				this.$http.get('/api/store/power/details', {
					id: this.id,
					lon: "1",
					lat: "1"
				}).then(res => {
					console.log(res)
					this.details = res.data
				})
			},
			editStoreGoods() {
				this.$http.get('/api/store/storeGoods/editStoreGoods', {
					id: this.id
				}).then(res => {
					console.log(res)
					this.details = res.data
				})
			},

			startHistor() {

			},
			startHisGarage() {

			},
			isShow() {
				this.show = true;
			},
			getItem(e) {
				this.curent = e
			},
			inventoryEdit() {
				this.inventoryShow = true;
			},


		}
	}
</script>

<style lang="scss">
	.editInfo {
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		color: white;
		line-height: 100rpx;
		width: 702rpx;
		height: 100rpx;
		bottom: 1%;
		text-align: center;
		position: absolute;
		bottom: 30%;
		margin: 50% auto 0;
	}

	.bgDistancePowerStation {
		margin-top: 20rpx;
		background: #FFF4F0;
		border-radius: 9rpx 9rpx 9rpx 9rpx;
		padding: 24rpx;
		.address {
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333
		}
	}

	.distancePowerStation {
		justify-content: space-between;
		display: flex;
		.distanceInfo {
			display: flex;
			.distanceNum {
				padding-top: 10rpx;
				padding-left: 10rpx;
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
		}
		.img {
			width: 52rpx;
			height: 52rpx;
		}
	}

	.powerType {
		padding-top: 22rpx;
		font-family: Microsoft YaHei, Microsoft YaHei;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}


	.card {
		width: 100%;
		box-sizing: border-box;
		height: 100vh;
		background: #FAFBFF;
		padding: 24rpx;
		border-top-right-radius: 40px;
		border-top-left-radius: 40px;
		position: absolute;
		z-index: 18;
		top: 440rpx;

		.powerStaionInfo {
			padding-top: 20rpx;
		}


	}


	.nav {
		width: 100%;
		height: 500rpx;
		z-index: 2;
		position: relative;
		background-size: 100%;
	}

	.area {

		position: relative;
	}

	.banner {
		position: absolute;
		top: -50px;
		left: 0;
		width: 100%;
		z-index: 3;
	}

	.navSlot .title {
		color: white !important;
	}
</style>