<template>
	<view class="oil-detail">
		<u-navbar title="油站详情" leftIconColor='#ffffff' leftIconSize='38rpx' autoBack="true" :fixed="true"
			:bgColor="bgColor" :titleStyle="{color: '#ffffff'}">
		</u-navbar>
		<view class="content">
			<view class="top-bg">
				<image class="image-content" :src="shopDetail.storeLogo"></image>
			</view>
			<view class="content-detail">
				<view class="shop-desc">
					<view class="common-card mg-bot-34">
						<view class="u-f u-f-jcsb u-f-aic mg-bot-20">
							<text class="fs36 light-black fw600 one-line-ellipsis">{{shopDetail.storeName}}</text>
							<image class="go-map" @click.stop="skipCityMap(shopDetail)"
								src="../../static/common/plane.png" mode=""></image>
						</view>
						<view class="u-f u-f-aic u-f-jcfs">
							<text class="green-btn">{{shopDetail.storeStatus==0?"营业中":"停业"}}</text>
							<text class="fs28 fw400 light-black mg-right-10">周一至周日</text>
							<text class="fs28 fw400 light-black">全天</text>
						</view>
						<view class="u-f u-f-aic u-f-jcfs mg-bot-20 mg-top-20">
							<view class="main-color mg-right-22">
								<text class="fs24">￥</text>
								<text class="fs28 fw600">{{shopDetail.platformPrice}}/L</text>
							</view>
							<view class="fs24 mg-right-20">
								<text class="light-gray mg-right-8">国标价</text>
								<text class="main-color">￥{{shopDetail.nationalPrice}}/L</text>
							</view>
							<view class="fs24">
								<text class="light-gray mg-right-8">油站价</text>
								<text class="main-color">￥{{shopDetail.gasStationPrice}}/L</text>
							</view>
						</view>
						<view class="fs28 light-gray one-line-ellipsis">
							<text class="mg-right-10">距您当前</text>
							<text class="light-black mg-right-20">{{shopDetail.distance}}km</text>
							<text>{{shopDetail.detailedAddress}}</text>
						</view>
					</view>

					<view class="mg-bot-16">
						<common-title :msg="'加油团购'"></common-title>
					</view>

					<view class="common-card mg-bot-20" v-for="(item,index) in groupPurchaseList" :key="index"
						@click="">
						<view class="car-info-item u-f u-f-jcsb">
							<view class="left u-f u-f-jcfs" style="width: 80%;" @click="goToOilQuanDetail(item)">
								<view class="image-wrap mg-right-14 u-f u-f-fdc u-f-aic u-f-jcc fs38 border-radius-9">
									<image :src="item.goodsImage" class="border-radius-9" mode="scaleToFill"
										style="width: 100%;height: 100%;"></image>
								</view>
								<view class="name u-f u-f-fdc u-f-jcsb">
									<text class="car-name fs26 fw400 two-line-ellipsis">{{item.goodsName}}</text>
									<view class="price">
										<text class="fs22">￥</text>
										<text class="fs30 fw600">{{item.goodsPrice}}</text>
									</view>
								</view>
							</view>
							<view class="right u-f u-f-fdc u-f-jcsb">
								<view @click="createBill(item)"><text class="bug fs24">抢购</text></view>
								<view class="total-sell fs26 fw400">总售 {{item.totalSales}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import commonTitle from "../.././components/common-title/common-title.vue"
	import {
		getCusNavBarInfo
	} from "../.././common/customizeNavBarInfo.js"
	export default {
		components: {
			commonTitle
		},
		data() {
			return {
				paddingTop: 0,
				options: "",
				shopDetail: "",
				pageSize: 10,
				pageNum: 1,
				groupPurchaseList: [],
				bgColor: 'rgba(0,0,0,0)'
			}
		},
		onLoad(opt) {
			this.options = opt
		},
		onShow() {
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = customizeNavBarHeight + 'px'
			this.getRefuelStoreDetailsData()
			this.getRefuelGoodsListData()
		},
		methods: {
			async createBill(item) {
				let data = {
					"lon": this.User.curcity.lng,
					"lat": this.User.curcity.lat,
					"storeId": item.storeId,
					"type": 1, // 1-商品 2-会员权益 3-团购商品 4-积分商品 5-优惠券 6-投诉
					"goodsId": item.goodsId,
					"goodsNum": 1
				}

				// 创建订单
				let res = await this.$http.post('/api/client/order/createOrder', data, {
					token: true,
					checkToekn: true
				})
				let resData = res.data.data
				let key = resData.key
				let orderId = resData.orderId
				let storeId = resData.storeId

				this.User.navigate({
					url: '/pagesD/quick-buy-oil/quick-buy-oil?id=' + key + '&orderId=' + orderId +
						'&storeId=' + storeId
				}, "navigateTo", true)
			},
			enterShopCar() {
				uni.navigateTo({
					url: '/pagesC/shop-car/shop-car'
				})
			},
			handleClickInput() {
				uni.navigateBack({
					delta: 1
				})
			},
			getRefuelGoodsListData() {
				this.$http.post('/api/client/index/refuelGoodsList', {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					storeId: this.options.id,
					typeId: this.options.typeId,
				}).then((res) => {
					this.groupPurchaseList = res.data.data.rows
				})
			},
			getRefuelStoreDetailsData() {
				this.$http.post('/api/client/index/refuelStoreDetails', {
					lon: this.options.lon.trim(),
					lat: this.options.lat.trim(),
					storeId: this.options.id.trim(),
				}).then((res) => {
					this.shopDetail = res.data.data
				})
			},
			skipCityMap(data) {
				console.log(data, "打开地图");
				uni.openLocation({
					// 
					latitude: Number(data.lat),
					longitude: Number(data.lon),
					name: data.storeName,
					address: data.detailedAddress,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
			},
			goToOilQuanDetail(item) {
				let url = '/pagesF/oil-quan-detail/oil-quan-detail?storeId=' + item.storeId + '&goodsId=' + item.goodsId
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
</style>

<style lang="scss" scoped>
	.oil-detail {
		.back-wrap {
			.white-back-icon {
				width: 30rpx;
				height: 30rpx;
				background: url(../.././static/shop/white-left-arrow.png) no-repeat center center;
				background-size: 50%;
			}
		}

		.content {
			position: relative;

			.top-fixed {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				background-color: green;
				z-index: 3;
				overflow: hidden;
			}

			.top-bg {
				width: 100%;
				height: 509rpx;

				.image-content {
					width: 100%;
					height: 100%;
				}
			}

			.content-detail {
				position: relative;
				margin-top: -50rpx;
				padding: 26rpx 24rpx 24rpx 34rpx;
				background-color: #F9F9F9;
				border-radius: 40rpx 40rpx 0 0;

				.common-card {
					padding: 20rpx;
					border-radius: 18rpx;
					background-color: #ffffff;

					.car-info-item {
						.left {
							.image-wrap {
								width: 135rpx;
								height: 135rpx;
								background-color: #999999;
							}

							.name {
								.car-name {
									color: #333333;
								}

								.price {
									color: #FF4502;
								}
							}
						}

						.right {
							view {
								.bug {
									padding: 10rpx 24rpx;
									background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
									border-radius: 26rpx 26rpx 26rpx 26rpx;
									color: #ffffff;
								}
							}

							.total-sell {
								color: #999999;
							}
						}
					}

					view {
						view {
							.share-icon {
								width: 30rpx;
								height: 30rpx;
								// background: url(../.././static/maintenance/share.png) no-repeat center center;
								background-size: 100%;
							}
						}
					}

					.youhuiquan {
						padding: 18rpx 20rpx;
						background: #FFF4F0;
						border-radius: 9rpx 9rpx 9rpx 9rpx;
					}

					.ue-user {
						.avatar {
							width: 78rpx;
							height: 78rpx;
						}

						.user-desc {
							.evaluate-wrap {
								.evaluate {
									.star-icon {
										width: 32rpx;
										height: 32rpx;
										// background: url(../.././static/common/star.png) no-repeat center center;
										background-size: 100%;
									}

									.star-num {
										color: #F2CB51;
									}
								}
							}
						}
					}

					.ue-content {
						.image-list {
							.image-item {
								width: calc(25% - 12rpx);

								image {
									width: 100%;
								}
							}
						}
					}

					.good-detail {
						.big-title {
							.left {
								width: 165rpx;
								height: 4rpx;
								// background: url(../.././static/maintenance/left_rect.png) no-repeat center center;
								background-size: 100%;
							}

							.right {
								width: 165rpx;
								height: 4rpx;
								// background: url(../.././static/maintenance/right_rect.png) no-repeat center center;
								background-size: 100%;
							}
						}

						.gantanhao {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}
			}
		}

		.fix-bot {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 10rpx 24rpx;
			background-color: #ffffff;
		}
	}

	.big-gray-right-arrow {
		width: 26rpx;
		height: 26rpx;
		// background: url(../.././static/maintenance/black_right-arrow.png) no-repeat center center;
		background-size: 50%;
	}

	.send-icon {
		width: 56rpx;
		height: 56rpx;
		// background: url(../.././static/maintenance/send.png) no-repeat center center;
		background-size: 100%;
	}

	.small-gray-right-arrow {
		width: 16rpx;
		height: 16rpx;
		// background: url(../.././static/common/gray_right_arrow.png) no-repeat center center;
		background-size: 100%;
	}

	.collect {
		width: 40rpx;
		height: 40rpx;
		// background: url(../.././static/maintenance/collect.png) no-repeat center center;
		background-size: 100%;
	}

	.serve-person {
		width: 40rpx;
		height: 40rpx;
		// background: url(../.././static/maintenance/say.png) no-repeat center center;
		background-size: 100%;
	}

	.default-line-btn {
		color: #333333;
		font-size: 22rpx;
		border-radius: 40rpx;
		padding: 30rpx 46rpx;
		text-align: center;
		background-color: transparent;
		border: 1rpx solid #707070;
	}

	.main-btn {
		color: #ffffff;
		font-size: 22rpx;
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		padding: 30rpx 100rpx;
	}

	.go-map {
		width: 52rpx;
		height: 52rpx;
		// background: url(../.././static/common/go_map.png) no-repeat center center;
		background-size: 100%;
	}

	.green-btn {
		padding: 6rpx 8rpx;
		color: #ffffff;
		font-size: 18rpx;
		background: #008636;
		border-radius: 5rpx;
		margin-right: 4rpx;
	}
</style>