<template>
	<view>
		<image mode="widthFix" class="width100" :src="storeList.gasLogoSmall"></image>
		<view class="height100p titlecon backcorfff">
			<view class="height75 paddtop25 width90">
				<view class="flleft width80p">
					<view class="width100 text1 font18 fontwig6 fcor333">{{storeList.gasName}}</view>
					<view class="width100 font14 fcor666 mart5">{{storeList.gasAddress}}</view>
				</view>
				<view class="flright reimg fotct width20" v-if="storeList.distance" @click="seeloaction">
					<image mode="widthFix" :src="imagewxUrl+imgadres"></image>
					<view class="fcor089">{{storeList.distance}}km</view>
				</view>
			</view>
			<view class="fcor999 font14 width90 mart0">
				营业时间 : 00:00-23:59
			</view>
		</view>
		<!-- 标价 -->
		<view class="width90 relbj">
			<view class="height60">
				<view class="flleft mart10 bjcss font16 fontwig6" @click="showPopup(1)">
					{{oilNo}}
					<image mode="widthFix" :src="imagewxUrl+imgadres2"></image>
				</view>
				<view class="margle10 font15 fcoreb5 flleft mart20  borRit">
					<view class="fontspec fotct ">平台价</view>
					<view class="fontwig6 font20"><text class="font14">￥</text>{{priceVip}}</view>
				</view>
				<view class="margle10 font15 fcor666 flleft mart20  borRit">
					<view class="fontspec fotct ">油站价</view>
					<view class="fontwig6 font20"><text class="font14">￥</text>{{priceGun}}</view>
				</view>
				<view class="margle10 font15 fcor666 flleft mart20 ">
					<view class="fontspec fotct ">国标价</view>
					<view class="fontwig6 font20"><text class="font14">￥</text>{{priceOfficial}}</view>
				</view>
			</view>
		</view>
		<view class="line10 mart15"></view>
		<!-- 我要加油 -->
		<view class="width90 mart15 font16 fcor666">我要加油</view>
		<view class="width90 relbj mart15">
			<view class="width50 flleft fotct" @click="showPopup(1)">
				<view class="width100 fcor999 font14 mart10">选择油号</view>
				<view class="width100 mart10">
					<image mode="widthFix" style="width: 20px;" :src="imagewxUrl+imgadres1"></image>
					<text class="font20 fcor333 fontwig6 margle">{{oilNo}}</text>
					<image mode="widthFix" class="margle" style="width: 10px; " :src="imagewxUrl+imgadres2">
					</image>
				</view>
			</view>
			<view class="width50 flright fotct" @click="showPopup(2)">
				<view class="width100 fcor999 font14 mart10">选择油枪</view>
				<view class="width100 mart10 ">
					<image mode="widthFix" style="width: 20px;" :src="imagewxUrl+imgadres3"></image>
					<text class="font20 fcor333 fontwig6 margle">{{gunNo}}号</text>
					<image mode="widthFix" class="margle" style="width: 10px; " :src="imagewxUrl+imgadres2">
					</image>
				</view>
			</view>
		</view>
		<view class="line10 mart15"></view>
		<!--加油金额-->
		<view class="width90 mart15 font16 fcor666">加油金额</view>
		<view class="width90 height40 mart10" style="border: 1px solid #f2f2f2;">
			<view class="width8 flleft">￥</view>
			<input type="digit" class="font16 width60 flleft height40" placeholder="输入金额(保留2位小数)" v-model="inputMoney"
				@input="Listeningfocus" />
			<view class="width30 height40 flright font14 fcor999 fotct"
				style="border-left: 1px solid #f2f2f2;line-height: 40px;">
				约{{oilLiters}}L
			</view>
		</view>

		<view class="list width90">
			<view class="box" v-for="(amount,index) in amountList" :key="index" @click="select(amount)"
				:class="{'on':amount.codeValue == inputMoney}">
				<view class="heTitle fcor333 paddtop10" :class="{'colorfe80':amount.codeValue == inputMoney}">
					{{amount.codeValue}}元
				</view>
				<view class="width100 font12 fcor333 mart5" :class="{'colorfe80':amount.codeValue == inputMoney}">
					最高优惠¥{{amount.codeName}}</view>
			</view>
		</view>

		<!-- 详情描述-->
		<view class="line10 mart15"></view>
		<!-- 	<view class="width90 height40 mart10">
			<view class="flleft width50 font15 fcor666">加油升数:<text class="fcoreb5 margle">
					{{oilLiters}}L</text></view>
			<view class="flright width50 font15 fcor666">油站直降:<text class="fcoreb5 margle">
					¥{{pricePreferences}}</text>
			</view>
		</view> -->
		<view class="width90 height40">
			<view class="flleft width50 font15 fcor666">平台补贴:
				<text class="fcoreb5 margle">¥{{oilSubsidy}}</text>
			</view>
			<view class="flright width50 font15 fcor666">平台折扣:
				<text class="fcoreb5 margle" v-if="discount != 1">{{(discount * 100).toFixed(2)}}折</text>
				<text class="fcoreb5 margle" v-else>无</text>
			</view>
		</view>
		<view class="width90 height40">
			<view class="flleft width50 font15 fcor666">每升优惠:<text class="fcoreb5 margle">
					¥{{litersPreferences}}</text></view>
			<view class="flright width50 font15 fcor666">本次优惠:<text class="fcoreb5 margle">
					¥{{totalPreferences}}</text></view>
		</view>
		<view class="line10 mart15"></view>

		<view class=" width100" style="height: 51px;"></view>
		<!-- 底部按钮 -->
		<view class="footer">
			<view class="flleft padleft15 font15 fcoreb5">
				合计: ￥<text class="font24">{{totalPrice}}</text><text class="font12 fcor666"
					v-if="priceVip != priceOfficial">优惠约:￥{{discountPrice}}</text>
			</view>

			<!-- #ifdef MP -->
			<button class="reBtn flright" v-if="user.phone == null" @click="jumpPhone">去支付</button>
			<button class="reBtn flright" v-else @click="postionIng">去支付</button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<!-- <button class="reBtn flright" v-if="user.phone == null" @click="jumpH5Bding">去支付</button> -->
			<button class="reBtn flright" @click="postionIng">去支付</button>
			<!-- #endif -->
		</view>
		<!-- 底部弹窗 -->
		<wybPopup ref="popup" type="bottom" height="500" width="500" radius="6" :showCloseIcon="true">
			<view class="fotct font18 fontwig6 fcor333 mart10 height30" v-if="typeId == 1">选择油号</view>
			<view class="fotct font18 fontwig6 fcor333 mart10 height30" v-if="typeId == 2">选择油枪</view>
			<view class="font15 fcor666 width90 mart10 height22" v-if="typeId == 1">汽油油号</view>
			<view class="font15 fcor666 width90 mart10 height22" v-if="typeId == 2">汽油油枪</view>
			<view v-if="typeId == 1">
				<view :class="swiper.oilNoName ==  oilNo?'activeRefuel':'refuel'" v-for="(swiper,index) in detailList"
					:key="index" @click="changeValue(swiper)">
					{{swiper.oilNoName}}
				</view>
			</view>

			<view v-if="typeId == 2">
				<view :class="item.gunNo ==  gunNo?'activeRefuel':'refuel'" v-for="(item,index) in gunnumber"
					:key="index" @click="changeValue2(item)">
					{{item.gunNo}}
				</view>
			</view>
		</wybPopup>
		<!-- <view class="height30"></view> -->

		<wybPopup ref="popups" type="center" height="850" width="600" bgColor="" radius="20" :showCloseIcon="false">
			<!-- <image class="popImg" :src="imagewxUrl+imgadres3" @click="jumpWeb"></image> -->
			<!-- <view class="width100 backcorfff" style="height: 400px;"> -->
			<view class="form re">
				<view class="username">
					<view class="get-code" style="color: #676767;" @click.stop="getCode()">{{getCodeText}}</view>
					<input placeholder="请输入手机号" v-model="phoneNumber" placeholder-style="color: #676767;" />
				</view>
				<view class="code">
					<input placeholder="请输入验证码" v-model="code" placeholder-style="color: #676767;" />
				</view>
				<view class="width90 fcoreb5 font14 fotct" v-if="showtoastdes">提示: {{showtoastdes}}</view>
				<view class="btn" style="margin-top: 10px;" @tap="doReg">立即登录</view>

			</view>
			<!-- </view> -->
		</wybPopup>

	</view>
</template>

<script>
	import {
		getGasDetailByStoreKey,
		getDictionaryByCodeTypeOl,
		oilPriceDiscountCompute,
		recentGasStation,
		sendSmsCodeByHw,
		phone,
		getDictionaryByCodeType
	} from '../../../Utils/Api.js';
	import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';
	let app = getApp();
	export default {
		components: {
			wybPopup
		},
		data() {
			return {
				imagewxUrl: app.globalData.imageWxImg,
				imgadres: 'dhl.png',
				imgadres2: 'xiala.png',
				imgadres1: 'yhl.png',
				imgadres3: 'yql.png',
				detailList: [],
				gunnumber: [],
				user: '',
				amountList: [
					// {
					// 	id: '1',
					// 	price: '200'
					// },
					// {
					// 	id: '2',
					// 	price: '300'
					// },
					// {
					// 	id: '3',
					// 	price: '400'
					// },
					// {
					// 	id: '4',
					// 	price: '500'
					// }
				],
				store_key: '',
				storeList: '',
				oilNo: '',
				priceVip: '',
				priceOfficial: '',
				priceGun: '',
				gunNo: '',
				typeId: '',
				counId: '',
				inputMoney: '',
				gasOilNo: '',
				litre: '',
				totalPrice: '0.00',
				discountPrice: '0.00',
				gasGunList: [],
				oilType: '',
				distance: 9999, //距离限制
				xzMoney: '300', //金额限制
				isTyAgent: false, //是否是代理商
				oilLiters: '0', //加油升数	
				discount: '0', //平台折扣
				oilSubsidy: '0', //加油补贴
				litersPreferences: '0', //每升优惠
				pricePreferences: '0', //优惠价格
				totalPreferences: '0', //本次优惠
				locationRef: null, // 用于接收定位对象

				//一键登陆
				phoneNumber: "",
				code: '',
				getCodeText: '获取验证码',
				getCodeBtnColor: "#ffffff",
				getCodeisWaiting: false,
				showtoastdes: '' // 未登陆错误
			}
		},
		onLoad(options) {
			let that = this;
			// #ifdef MP
			that.store_key = options.id;
			// #endif
			// #ifdef H5
			uni.getStorage({
				key: 'store_key',
				success(e) {
					if (e.data) {
						that.store_key = e.data;
					}
				}
			})
			// #endif
			that.counId = options.desId;
			that.oilNo = options.oilNo;
			if (app.globalData.accountId) {
				that.isTyAgent = true;
			}

			if (app.globalData.gasKey && app.globalData.accountType == '000000&gasKey') {
				that.store_key = app.globalData.gasKey;
			} else {
				app.globalData.staffCode = '';
			}
			// #ifdef H5
			if (app.globalData.accountType && app.globalData.accountType == '000000#/') {
				that.recentGasStation();
			} else {
				that.getGasDetailByStoreKey();
			}
			// #endif
			// #ifdef MP
			that.getGasDetailByStoreKey();
			// #endif
			that.getDictionaryByCodeTypeOl();
			that.getDictionaryByCodeTypeMoney();
			that.getDictionaryByCodeType();
		},
		onShow() {
			this.user = app.globalData.userInfo;
		},
		onUnload() {
			if (app.globalData.accountType && app.globalData.accountType == '000000#/') {
				uni.removeStorage({
					key: 'accountType'
				})
				app.globalData.accountType = '';
			}
		},
		methods: {
			//价格
			//查询油品
			getDictionaryByCodeType() {
				let datas = {
					codeType: 'REFUEL_PRICE'
				}
				getDictionaryByCodeType(datas).then(res => {
					if (res.return_code == '000000') {
						this.amountList = res.return_data;
					}
				})
			},
			//一键加油登陆
			//跳转协议
			getDocument(item) {
				uni.navigateTo({
					url: '../userLogin/agreement/agreement?id=' + item
				})
			},
			Timer() {},
			getCode() {
				uni.hideKeyboard()

				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				uni.showLoading({
					title: '发送中...'
				})
				let params = {
					phone: this.phoneNumber,
					HWMSG: 3
				}
				sendSmsCodeByHw(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.getCodeisWaiting = true;
						this.getCodeBtnColor = "rgba(255,255,255,0.5)"
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						});
						this.setTimer();
					}
				})
			},
			setTimer() {
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return;
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;

				}, 1000)
			},
			doReg() {
				uni.hideKeyboard();
				//模板示例部分验证规则
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				if (!this.code) {
					uni.showToast({
						title: '请填写验证码',
						icon: "none"
					});
					return false;
				}
				uni.showLoading({
					title: '提交中...'
				})
				let userid = '';
				if (app.globalData.accountId == '000009&key' || app.globalData.accountId == '0000010&key') {
					userid = app.globalData.staffCode;
				}
				let params = {
					popularizeUserId: userid,
					phone: this.phoneNumber,
					type: "SMS",
					platform: "H5",
					smsCode: this.code
				}
				phone(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						app.globalData.userInfo = res.return_data
							.object
							.highUser;
						app.globalData.token = res.return_data.uniqueCode;
						this.user = res.return_data
							.object
							.highUser;
						uni.setStorage({
							key: "user",
							data: res.return_data
								.object
								.highUser
						})
						uni.setStorage({
							key: "token",
							data: res.return_data.uniqueCode
						})
						this.$refs.popups.hide();
						this.postionIng();
					} else {
						this.showtoastdes = res.return_msg;
						uni.showToast({
							title: res.return_msg,
							icon: "none",
							duration: 2000
						});
					}
				})
			},
			//一件加油


			//前往导航
			seeloaction() {
				// #ifdef H5
				window.open(
					`//uri.amap.com/navigation?from=${app.globalData.longitude},${app.globalData.latitude},我的位置&to=${this.storeList.gasAddressLongitude},${this.storeList.gasAddressLatitude},${this.storeList.gasAddress}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=1`
				)
				// #endif
				// #ifdef MP
				uni.openLocation({
					latitude: Number(this.storeList.gasAddressLatitude), //目的地的定位
					longitude: Number(this.storeList.gasAddressLongitude), //目的地的定位
					name: this.storeList.gasName,
					address: this.storeList.gasAddress
				})
				// #endif
			},
			//显示弹出
			showPopup(item) {
				this.typeId = item;
				this.$refs.popup.show();
			},
			showPopuplogin() {
				this.$refs.popups.show();
			},
			//一键加油
			recentGasStation() {
				this.gunnumber = [];
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					latitude: app.globalData.latitude,
					longitude: app.globalData.longitude,
					isTyAgent: this.isTyAgent
				}
				recentGasStation(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.storeList = res.return_data;
						// if (!this.oilNo) {
						// 	this.oilNo = res.return_data.oilPriceList[0].oilNoName;
						// 	this.priceVip = res.return_data.oilPriceList[0].priceVip;
						// 	this.priceGun = res.return_data.oilPriceList[0].priceGun;
						// 	this.priceOfficial = res.return_data.oilPriceList[0].priceOfficial;
						// 	this.detailList = res.return_data.oilPriceList;
						// 	this.oilType = res.return_data.oilPriceList[0].oilType;
						// 	this.gasGunList = res.return_data.gasGunList;
						// 	this.counId = res.return_data.goodsId;
						// 	for (var i = 0; i < res.return_data.gasGunList.length; i++) {
						// 		if (this.oilNo == res.return_data.gasGunList[i].oilNoName) {
						// 			this.gunnumber.push(res.return_data.gasGunList[i])
						// 			// this.gunNo = res.return_data.gasGunList[i].gunNo;
						// 			this.gasOilNo = res.return_data.gasGunList[i].oilNo;
						// 		}
						// 	}
						// }
						
						if (!this.oilNo || this.oilNo == undefined) {
							this.oilNo = res.return_data.oilPriceList[0].oilNoName;
							this.priceVip = res.return_data.oilPriceList[0].priceVip;
							this.priceGun = res.return_data.oilPriceList[0].priceGun;
							this.priceOfficial = res.return_data.oilPriceList[0].priceOfficial;
							this.oilType = res.return_data.oilPriceList[0].oilType;
						} else {
							let oillist = res.return_data.oilPriceList;
							for (var i = 0; i < oillist.length; i++) {
								if (this.oilNo == oillist[i].oilNoName) {
									this.priceVip = oillist[i].priceVip;
									this.priceGun = oillist[i].priceGun;
									this.priceOfficial = oillist[i].priceOfficial;
									this.oilType = oillist[i].oilType;
								}
							}
						}
						
						this.detailList = res.return_data.oilPriceList;
						this.counId = res.return_data.goodsId;
						this.gasGunList = res.return_data.gasGunList;
						for (var i = 0; i < res.return_data.gasGunList.length; i++) {
							if (this.oilNo == res.return_data.gasGunList[i].oilNoName) {
								this.gunnumber.push(res.return_data.gasGunList[i])
								// this.gunNo = res.return_data.gasGunList[i].gunNo;
								this.gasOilNo = res.return_data.gasGunList[i].oilNo;
							}
						}
					} else {
						uni.showToast({
							title: res.return_msg,
							icon: "none",
							duration: 2000
						});
					}
				})
			},
			//查询详情
			getGasDetailByStoreKey() {
				this.gunnumber = [];
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
					storeKey: this.store_key,
					latitude: app.globalData.latitude,
					longitude: app.globalData.longitude,
					isTyAgent: this.isTyAgent
				}
				getGasDetailByStoreKey(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.storeList = res.return_data;
						if (!this.oilNo || this.oilNo == undefined) {
							this.oilNo = res.return_data.oilPriceList[0].oilNoName;
							this.priceVip = res.return_data.oilPriceList[0].priceVip;
							this.priceGun = res.return_data.oilPriceList[0].priceGun;
							this.priceOfficial = res.return_data.oilPriceList[0].priceOfficial;
							this.oilType = res.return_data.oilPriceList[0].oilType;
						} else {
							let oillist = res.return_data.oilPriceList;
							for (var i = 0; i < oillist.length; i++) {
								if (this.oilNo == oillist[i].oilNoName) {
									this.priceVip = oillist[i].priceVip;
									this.priceGun = oillist[i].priceGun;
									this.priceOfficial = oillist[i].priceOfficial;
									this.oilType = oillist[i].oilType;
								}
							}
						}

						this.detailList = res.return_data.oilPriceList;
						this.counId = res.return_data.goodsId;
						this.gasGunList = res.return_data.gasGunList;
						for (var i = 0; i < res.return_data.gasGunList.length; i++) {
							if (this.oilNo == res.return_data.gasGunList[i].oilNoName) {
								this.gunnumber.push(res.return_data.gasGunList[i])
								// this.gunNo = res.return_data.gasGunList[i].gunNo;
								this.gasOilNo = res.return_data.gasGunList[i].oilNo;
							}
						}

					} else {
						uni.showToast({
							title: res.return_msg,
							icon: "none",
							duration: 2000,
							success() {
								setTimeout(() => {
									uni.navigateBack({})
								}, 2000)
							}
						});
					}
				})
			},
			//距离限制
			getDictionaryByCodeTypeOl() {
				let datas = {
					codeType: 'MILEAGE_LIMIT'
				}
				getDictionaryByCodeTypeOl(datas).then(res => {
					if (res.return_code == '000000') {
						this.distance = res.return_data.codeValue;
					}
				})
			},
			//加油金额限制
			getDictionaryByCodeTypeMoney() {
				let datas = {
					codeType: 'TY_PRICE_LIMIT'
				}
				getDictionaryByCodeTypeOl(datas).then(res => {
					if (res.return_code == '000000') {
						this.xzMoney = res.return_data.codeValue;
					}
				})
			},
			//选择油号
			changeValue(item) {
				this.gunnumber = [];
				this.oilNo = item.oilNoName;
				this.gunNo = '';
				for (var i = 0; i < this.gasGunList.length; i++) {
					if (this.oilNo == this.gasGunList[i].oilNoName) {
						this.gunnumber.push(this.gasGunList[i])
						// this.gunNo = this.gasGunList[i].gunNo;
						this.gasOilNo = this.gasGunList[i].oilNo;
					}
				}
				this.oilType = item.oilType;
				this.gasOilNo = item.oilNo;
				this.priceVip = item.priceVip;
				this.priceOfficial = item.priceOfficial;
				this.priceGun = item.priceGun;
				this.totalPrice = '0.00';
				this.discountPrice = '0.00';
				this.inputMoney = '';
				this.oilLiters = '0';
				this.discount = '0';
				this.oilSubsidy = '0';
				this.litersPreferences = '0';
				this.pricePreferences = '0';
				this.totalPreferences = '0';
				this.$refs.popup.hide();
			},
			//选择油枪
			changeValue2(item) {
				this.gunNo = item.gunNo;
				this.$refs.popup.hide();
			},
			select(amount) {
				this.inputMoney = amount.codeValue;
				this.oilPriceDiscountCompute();
			},
			// H5获取手机号
			jumpH5Bding() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			//失去焦点算价格和油升
			Listeningfocus() {
				var a = /^[0-9]+(\.[0-9]{1})?$/;
				var b = /^[0-9]+(.[0-9]{1})?$/;
				var c = /^([1-9][0-9]*)+(\.[0-9]{1,2})?$/;
				if (this.inputMoney == '') {
					uni.showToast({
						title: '请输入正确加油金额',
						icon: "none",
						duration: 2000
					});
					this.totalPrice = '0.00';
					this.discountPrice = '0.00';
					this.litre = '';
					this.inputMoney = '';
					this.oilLiters = '0';
					this.discount = '0';
					this.oilSubsidy = '0';
					this.litersPreferences = '0';
					this.pricePreferences = '0';
					this.totalPreferences = '0';
					return;
				}
				if (parseInt(this.inputMoney) > parseInt(this.xzMoney)) {
					uni.showToast({
						title: '加油金额不能超过' + this.xzMoney + '元',
						icon: "none",
						duration: 2000
					});
					this.totalPrice = '0.00';
					this.discountPrice = '0.00';
					this.litre = '';
					this.inputMoney = '';
					this.oilLiters = '0';
					this.discount = '0';
					this.oilSubsidy = '0';
					this.litersPreferences = '0';
					this.pricePreferences = '0';
					this.totalPreferences = '0';
					return;
				}
				this.oilPriceDiscountCompute();
			},
			//计算价格
			oilPriceDiscountCompute() {
				let datas = {
					"price": this.inputMoney,
					"goodsId": this.counId,
					"oilNo": this.gasOilNo,
					"isTyAgent": this.isTyAgent
				}
				oilPriceDiscountCompute(datas).then(res => {
					if (res.return_code == '000000') {
						this.totalPrice = res.return_data.payPrice;
						this.oilLiters = res.return_data.oilLiters;
						this.discount = res.return_data.discount;
						this.oilSubsidy = res.return_data.preferentialMargin;
						this.litersPreferences = res.return_data.litersPreferences;
						this.pricePreferences = res.return_data.gasStationDrop;
						this.totalPreferences = res.return_data.totalPreferences;
						if (this.priceVip != this.priceOfficial) {
							// let gbprice = parseFloat(this.litre * this.priceOfficial).toFixed(2);
							// this.discountPrice = parseFloat(gbprice - this.totalPrice).toFixed(2);
							this.discountPrice = parseFloat(this.inputMoney - this.totalPrice).toFixed(2);
						}
					} else {
						this.totalPrice = '0';
						this.oilLiters = '0';
						this.discount = '0';
						this.oilSubsidy = '0';
						this.litersPreferences = '0';
						this.pricePreferences = '0';
						this.totalPreferences = '0';
					}
				})
			},
			//跳转手机授权
			jumpPhone() {
				uni.navigateTo({
					url: '../../userLogin/userLogin'
				})
			},
			// 保留小数点后两位的，不会四舍五入
			numFilter(tempVal) {
				// 截取当前数据到小数点后三位
				// let tempVal = parseFloat(value).toFixed(3)
				let realVal = tempVal.substring(0, tempVal.length - 2)
				return realVal
			},
			/**
			 * 定位
			 */
			postionIng() {
				let that = this;

				// #ifdef H5
				if (app.globalData.accountType && app.globalData.accountType == '000000#/' && !that.user.phone) {
					that.showPopuplogin();
					return;
				}
				// #endif

				var c = /^([1-9][0-9]*)+(\.[0-9]{1,2})?$/;
				if (that.inputMoney == '' || that.inputMoney < 10 || !(c.test(this.inputMoney))) {
					uni.showToast({
						title: '请输入正确金额',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (this.gunNo == '') {
					uni.showToast({
						title: '请选择枪号',
						icon: "none",
						duration: 2000
					});
					return;
				}

				// #ifdef H5
				// let data = {
				// 	key: "7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB" //腾讯地图申请的密钥
				// };
				// let url = "https://apis.map.qq.com/ws/location/v1/ip"; //这个就是地理位置信息的接口
				// data.output = "jsonp";
				// this.$jsonp(url, data)
				// 	.then(res => {
				// app.globalData.latitude = res.result.location.lat;
				// app.globalData.longitude = res.result.location.lng;
				// if (app.globalData.accountType && app.globalData.accountType == '000000#/') {
				// 	that.recentGasStation();
				// } else {
				// 	that.getGasDetailByStoreKey();
				// }
				// setTimeout(() => {
				// 	that.toPay();
				// }, 500);
				// }).catch(error => {
				// 	if (app.globalData.accountType && app.globalData.accountType == '000000#/') {
				// 		that.recentGasStation();
				// 	} else {
				// 		that.getGasDetailByStoreKey();
				// 	}
				// 	setTimeout(() => {
				// 		that.toPay();
				// 	}, 500);
				// });

				// var geolocation = new qq.maps.Geolocation('7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB', "嗨森逛");
				// // 回调的第一次参数为成功后具体的位置信息
				// geolocation.getLocation(
				// 	res => {
				// 		app.globalData.latitude = res.lat;
				// 		app.globalData.longitude = res.lng;
				// 		if (app.globalData.accountType && app.globalData.accountType == '000000#/') {
				// 			that.recentGasStation();
				// 		} else {
				// 			that.getGasDetailByStoreKey();
				// 		}
				// 		setTimeout(() => {
				that.toPay();
				// 		}, 500);
				// 	},
				// 	err => {
				// 		if (app.globalData.accountType && app.globalData.accountType == '000000#/') {
				// 			that.recentGasStation();
				// 		} else {
				// 			that.getGasDetailByStoreKey();
				// 		}
				// 		setTimeout(() => {
				// 			that.toPay();
				// 		}, 500);
				// 	}
				// );

				// #endif
				// #ifdef MP
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						app.globalData.latitude = res.latitude;
						app.globalData.longitude = res.longitude;
						that.getGasDetailByStoreKey();
						setTimeout(() => {
							that.toPay();
						}, 500);
					},
					fail: (err) => {
						uni.showToast({
							title: '请打开设置里面的位置信息',
							icon: "none",
							duration: 2000
						});
					}
				})
				// #endif
			},
			// 获取精准定位
			getLocation() {
				uni.showLoading({
					title: '加载中'
				})
				let that = this;
				that.locationRef.getLocation() // 调用 getLocation 方法获取精准定位
					.then(res => {
						uni.hideLoading();
						// res 就是返回的数据
						app.globalData.latitude = res.lat;
						app.globalData.longitude = res.lng;
						if (app.globalData.accountType && app.globalData.accountType == '000000#/') {
							that.recentGasStation();
						} else {
							that.getGasDetailByStoreKey();
						}
						setTimeout(() => {
							that.toPay();
						}, 500);
					})
			},
			//去支付
			toPay() {
				if (this.storeList.distance > this.distance && this.storeList.distance != null) {
					uni.showToast({
						title: '请在' + this.distance + '公里内进行下单',
						icon: "none",
						duration: 3000
					});
					return;
				}
				if (this.inputMoney == '' || this.inputMoney < 10) {
					uni.showToast({
						title: '请输入正确金额',
						icon: "none",
						duration: 2000
					});
					return;
				}
				// uni.showLoading({
				// 	title: '提交订单中...'
				// })
				let goods = {
					"identificationCode": app.globalData.identificationCode,
					"isTyAgent": this.isTyAgent,
					"gasStaffCode": app.globalData.staffCode,
					"gasimg": this.storeList.gasLogoSmall,
					"gasname": this.storeList.gasName,
					"gasaddress": this.storeList.gasAddress,
					"highChildOrderList": [{
						"goodsType": 3,
						"goodsId": this.counId,
						"saleCount": 1,
						"goodsPrice": this.inputMoney,
						"gasGunNo": this.gunNo,
						"gasOilNo": this.gasOilNo,
						"gasOilType": this.oilType,
						"gasPriceGun": this.priceOfficial,
						"gasPriceVip": this.priceVip

					}]
				}
				app.globalData.pelletoilList = goods;
				uni.navigateTo({
					url: '/pages/goods/refuel-confirm/refuel-confirm'
				})
			},
		}
	}
</script>

<style lang="scss">
	.form {
		width: 100%;
		border-radius: 8px;
		font-size: 30upx;
		position: absolute;
		background-color: #FFFFFF;
		top: 50px;

		.username,
		.password,
		.code {
			width: calc(100% - 90upx);
			height: 90upx;
			display: flex;
			align-items: center;
			background-color: rgba($color: #ffffff, $alpha: 0.1);
			border-bottom: 1px solid #f6f6f6;
			padding: 0 45upx;
			margin-bottom: 80upx;
			margin-top: 40px;

			input {
				width: 60%;
				height: 50upx;
				font-size: 16px;
				color: #333333;
				font-weight: blod;
				padding-left: 10px;
			}
		}

		.btn {
			color: #FFFFFF;
			background-color: #0083f5;
			width: 80%;
			margin-left: 10%;
			margin-top: 80rpx;
			margin-bottom: 50rpx;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 45rpx;
			font-size: 28rpx;
		}
	}

	.re {
		.username {
			position: relative;

			.get-code {
				position: absolute;
				height: 90upx;
				display: flex;
				align-items: center;
				justify-content: center;
				right: 0;
				padding: 0 40upx;
				z-index: 3;

				&:after {
					content: " ";
					width: 1upx;
					height: 50upx;
					// background-color: #333333;
					position: absolute;
					z-index: 3;
					margin-right: 100%;
					left: 0;
					top: 20upx;
				}
			}
		}

		.res {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100upx;
			color: rgba($color: #ffffff, $alpha: 0.8);
		}
	}

	.titlecon {
		border-radius: 10px 10px 0 0;
		position: relative;
		top: -30px;
	}

	.refuel {
		padding: 6px 15px;
		border-radius: 5px;
		background-color: #f6f6f6;
		color: #666666;
		margin-right: 3%;
		margin-left: 3%;
		margin-top: 15px;
		display: inline-block;
		font-size: 16px;
		width: 10%;
		text-align: center;
	}

	.activeRefuel {
		padding: 6px 15px;
		border-radius: 5px;
		border: 1px solid #089bf5;
		color: #089bf5;
		margin-right: 3%;
		margin-left: 3%;
		margin-top: 15px;
		display: inline-block;
		font-size: 16px;
		width: 10%;
		text-align: center;
	}

	.reimg {
		image {
			width: 20px;
		}
	}

	.relab {
		padding: 5px;
		border-radius: 5px;
		margin-left: 10px;
		color: #089bf5;
		background-color: #e5f2fe;
	}

	.relbj {
		height: 80px;
		box-shadow: 0 0 8px 2px #f6f6f6;
		border-radius: 5px;

	}

	.bjcss {
		line-height: 60px;
		margin-left: 10px;

		image {
			width: 10px;
			margin-left: 10px;
		}
	}

	.borRit {
		padding-right: 10px;
		border-right: 1px solid #f4f4f4;
	}

	.list {
		display: flow-root;
		justify-content: space-between;
		padding: 20upx 0;

		.box {
			width: 30%;
			margin-right: 2%;
			margin-top: 20upx;
			float: left;
			height: 130upx;
			// display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			border-radius: 10upx;
			box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.05);
			font-size: 36upx;
			color: #666666;
			border: 1px solid #f2f2f2;

			&.on {
				// background-color: #089bf5;
				border: 1px solid #089bf5;
			}
		}

		.heTitle {
			width: 100%;
			font-size: 16px;
		}

		.mitext {
			margin-top: 10upx;
			width: 100%;
			font-size: 12px;
		}
	}

	.colorfe80 {
		color: #089bf5;
	}

	.footer {
		position: fixed;
		bottom: 0upx;
		width: 100%;
		height: 100rpx;
		color: #FFFFFF;
		border-top: solid 1upx #eee;
		background-color: #FFFFFF;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.reBtn {
			width: 120px;
			background-color: #089bf5;
			color: #FFFFFF;
			text-align: center;
			padding: 0;
			font-size: 16px;
			border-radius: 0px;
			height: 50px;
			line-height: 50px;
			position: absolute;
			right: 0px;
		}
	}
</style>
