<template>
	<view class="nav">
		<u-navbar autoBack bgColor="" leftIconColor="#FFFFFF">
			<view class="navSlot" slot="center">
				<!-- <u-icon name="arrow-left" size="19"></u-icon> -->
				<view class="title">油站详情</view>
			</view>
		</u-navbar>
		<u-swiper height="509rpx" :list="detailsData.pictureList"></u-swiper>
		<view class="area">
			<view class="details">
				<view>{{detailsData.storeName}}</view>
				<view>
					<!-- <image class="img" src="../../static/tabar/ic_go.png"></image> -->
				</view>
			</view>
			<view class="addresflex">
				<view class="postion">距您当前</view>
				<view class="distance">{{detailsData.distance}}km</view>
			</view>
			<view class="address">{{detailsData.detailedAddress}}</view>
		</view>
		<view class="gasolineInfo" v-if="detailsData.oilInfoList&&detailsData.oilInfoList.length">
			<view class="gxflex">
				<view class="item" :class="{active:curent == index}" v-for="(item,index) in detailsData.oilInfoList"
					:key="index" @click="getItem(index)">
					{{item.oliName}}
				</view>
			</view>
			<view class="platformPrice">
				<view>平台价格</view>
				<view class="price">￥{{detailsData.oilInfoList[curent].platformPrice}}/L</view>
			</view>
			<view class="platformPrice">
				<view>油站价格</view>
				<view>￥{{detailsData.oilInfoList[curent].oilPrices}}/L</view>
			</view>
			<view class="platformPrice">
				<view>国标价格</view>
				<view>￥{{detailsData.oilInfoList[curent].internationalPrices}}/L</view>
			</view>
		</view>
		<view style="padding-left: 24rpx; padding-right: 24rpx;">
			<view class="editInfo" @click="addGasStation">
				编辑信息
			</view>
		</view>

	</view>



</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id: 1,
					name: '92#'
				}, {
					id: 2,
					name: '95#'
				}, {
					id: 3,
					name: '98#'
				}],
				curent: 0,
				detailsData: {},
				oilInfoData: {},
				longitude:'',
				latitude:'',
			}
		},

		onLoad(op) {
			this.id = op.id
		},

		onShow() {
			// this.getDetails()
			this.getLocation()
		},

		methods: {
			addGasStation(id, type) {
				uni.navigateTo({
					url: '/pages/addGasStation/addGasStation?id=' + this.id + '&type=' + 'edit'
				})
			},
			
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.longitude = res.longitude
						this.latitude = res.latitude
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.getDetails()
					},
					fail: (err) => {
						console.log(err);
						uni.showModal({
							title: '提示',
							content: '请打开手机定位权限',
							success: (res) => {
								console.log(res);
								this.getDetails()
							}
						})
						console.log(err);
					},
					complete:(err)=>{
						console.log(err);
					}
				});
			},
			

			getDetails() {
				this.$http.get('/api/store/oil/details', {
					id: this.id,
					lon: this.longitude || '1',
					lat: this.latitude || '1'
				}).then(res => {
					console.log(res.data);
					this.detailsData = res.data
					this.oilInfoData = res.data.oilInfoList.length ? res.data.oilInfoList[0] : ''
				})
			},

			startHistor() {

			},
			startHisGarage() {

			},
			getItem(e) {
				this.curent = e
			}
		}
	}
</script>

<style lang="scss">
	.editInfo {
		width: 702rpx;
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-weight: 800;
		font-size: 32rpx;
		padding: 29rpx 0rpx 29rpx 0rpx;
		text-align: center;
		color: white;
		position: fixed;
		bottom: 1%;
	}

	.active {
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 1rpx solid #FF4502;
		color: #DF4D28 !important;
	}

	.gasolineInfo {
		margin-top: 59rpx;
		padding: 14rpx, 66rpx, 14rpx 66rpx;
		padding: 50rpx;
		background: linear-gradient(180deg, #FFF4F0 0%, #FFFFFF 100%);

		.platformPrice {
			margin-top: 37rpx;
			justify-content: space-between;
			display: flex;
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;

			.price {
				font-weight: 800;
				font-size: 36rpx;
				color: #FF4502;
			}
		}
	}

	.item {
		display: block;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		color: #999999;
		text-align: center;
		font-weight: bold;
		width: 20%;
		padding: 10upx;
	}

	.area {
		position: relative;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -30rpx;

		.address {
			padding-left: 20rpx;
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}

		.addresflex {
			padding: 20rpx;
			display: flex;

			.postion {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}

			.distance {
				padding-left: 10rpx;
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
		}

		.details {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;

			.img {
				width: 52rpx;
				height: 52rpx;
			}
		}
	}

	.hreadImg {
		width: 120rpx;
		height: 120rpx;
	}

	.navSlot .title {
		color: white !important;
	}

	.nav {
		width: 100%;
		z-index: 2;
		position: relative;
		background-size: 100%;
		// background-image: url('/static/bg/bg_gas.png');
	}

	.gxflex {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
</style>