<template>
	<view class="padding-top padding-bottom-40 bg-white">
		<view class="text-center padding-sm">
			<view class="text-lg">
				请提醒加油员使用
				<text class="text-red padding-left-xs padding-right-xs">“{{showtitles}}”</text>
				进行订单核销
			</view>
		</view>
		<scroll-view scroll-x class=" nav text-center">
			<view class="cu-item" v-for="(item,index) in channelList" v-if="index==activeCur"
				:class="index==activeCur?'text-red cur':''" :key="item.channelId" @tap="tabSelect" :data-id="index"
				:data-channel-code="item.channelCode">
				<image class="site-icon margin-right-sm" :src="imgURL+'site-'+item.channelCode+'.png'" mode="widthFix">
				</image>
				{{item.channelCode|channelCodeFamt}}
				<!-- 少了壳牌 -->
			</view>

		</scroll-view>
		<radio-group class="block" @change="changePrice">
			<view class="cu-list menu text-left">
				<view class="cu-item" v-for="(itemx,index) in oilSitePriceDetailsVo" :key="index"
					v-if="itemx.sitePrice>0">
					<label class="flex justify-between align-center flex-sub">
						<radio class="round red" :class="radio=='radio' + index?'checked':''"
							:checked="radio==index?true:false" :value="index"></radio>
						<text class="cu-tag my-tag line-red text-lg">
							惠
						</text>
						<text class="text-bold text-black text-lg">{{itemx.oilProductCode}}</text>
						<!-- !=0?itemx.sitePrice:'-.--' -->
						<text class="text-bold text-red text-lg">￥{{moneyIntercept(itemx.sitePrice)}}/L</text>
						<text class="text-delete">￥{{itemx.oilSitePrice}}/L</text>
						<text
							class="text-sm">预计每100L节省{{(100*(itemx.oilSitePrice - itemx.sitePrice))|moneyForMath}}元</text>
					</label>
				</view>
			</view>
		</radio-group>
		<!--  -->
		<view class="bg-gray padding-top-sm ">
			<view class="bg-white  padding ">
				<text>油枪选择</text>
				<view class="padding-top-sm">
					<view class="grid col-5 ">
						<view v-for="(item,index) in checkBar" class="padding-xs" :key="index">
							<button class="cu-btn red  block" :class="item.checked?'bg-red':'line-red'"
								@tap="ChooseBar(item)" :data-value="item.value">
								{{item.name}}
								<view class="cu-tag sm round" :class="item.checked?'bg-white text-red':'bg-red'"
									v-if="item.hot">HOT</view>
							</button>
						</view>
						<view class="padding-xs" style="width:40% ;" v-if="activeChannelCode!='TY'&&!typeChenk()">
							<input type="number" @input="onInputBar" v-model="inputBar" class="cu-btn red  block"
								placeholder="其他油枪" value="" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="UpFileBox" v-if="isOtherUser">
			<view class="UpFileBoxMain">
				<view class="plateNumber_box">
					<view class="text-title">司机车牌</view>
					<view class="text-img">
						<image src="../../../static/img/upload.png" style="width:260upx;height: 160upx;"
							v-if='isPlateNumber' @tap='upPlateNumber' mode="aspectFill"></image>
						<image :src="PlateNumberImages" style="width:260upx;height:160upx;" mode="aspectFill" v-else>
						</image>
						<image src="https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/close_red.png"
							v-if='!isPlateNumber' @tap='cleraPlateNumber' class="close_Img" mode="aspectFill"></image>
					</view>
					<view class="text-p">需可识别车牌号</view>
				</view>
				<view class="refuellerImages">
					<view class="text-title">油机照片</view>
					<view class="text-img">
						<image src="../../../static/img/upload.png" style="width:260upx;height:160upx;"
							v-if='isUefueller' @tap='upUefueller' mode="aspectFill"></image>
						<image :src="refuellerImages" style="width:260upx;height:160upx;" v-else mode="aspectFill">
						</image>
						<image src="https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/close_red.png"
							v-if='!isUefueller' @tap='cleraUefueller' class="close_Img" mode="aspectFill"></image>
					</view>
					<view class="text-p">需包含加油升数和价格</view>
				</view>
			</view>
			<!-- <uni-file-picker :value='plateNumberValue' @success='successplateNumber' auto-upload='true' @fail='failplateNumber' limit='1' file-mediatype='image' mode='grid' /> -->
		</view>
		<view class="margin solid margin-top-0 radius">
			<form>
				<view class="flex  bg-white">
					<view class="flex-sub padding-right" @tap="showPlate='show'">
						<view class="cu-form-group ">
							<view class="">
								<view class="site-icon-sm">
									<image :src="imgURL+'site-car.png'" mode="widthFix" width="100upx"></image>
								</view>
							</view>
							<view class="">
								{{plateNumber?plateNumber:(plateNumberSel?plateNumberSel:'必填项')}}
							</view>
							<uni-icons type="forward" size="20" color="#8799a3"></uni-icons>
						</view>
					</view>
					<view class="flex-sub padding-left">
						<!-- @tap="showJober='show'" -->
						<!-- 请选择加油员 -->
						<view class="cu-form-group ">
							<view class="">

								<view class="site-icon-sm">
									<image :src="imgURL+'site-jober.png'" mode="widthFix" width="100upx"></image>
								</view>
							</view>
							<picker @change="pickJober" :value="joberIndex" :range="siteUserNames">
								<view class="picker">
									{{siteUserNames[joberIndex]?siteUserNames[joberIndex] :'选择加油员'}}
								</view>
							</picker>
						</view>
					</view>
				</view>
			</form>
		</view>
		<!-- 非团油加油输入框 -->
		<view class="margin solid radius" v-if="activeChannelCode!='TY'">
			<view class=" menu cu-list  ">
				<view class="cu-item nowrap">
					<view class="text-bold ">
						油机金额
					</view>
					<view class="text-center" style="width: 60%;margin: 0 2%;">
						<input v-model="vol" @input="checkeNumber" @blur="getMoneyVol" type="digit" class="block"
							placeholder="请输入油机金额" value="" style="border-bottom: 1px solid #efefef;" />
					</view>
					<view class="">
						<text class=" padding-right-sm">
							约{{vlom?vlom :'' | moneyVolm}}L
						</text>
					</view>
				</view>
				<view class="grid col-5 padding-sm">
					<view v-for="(item,index) in checkMoney" class="padding-xs" :key="index">
						<button class="cu-btn red  block" style="    padding: 0;"
							:class="item.checked?'bg-red':'line-red'" @tap="ChooseCheckMoney(item.value)"
							:data-value="item.value">
							{{item.name}}&yen;
							<view class="cu-tag sm round" :class="item.checked?'bg-white text-red':'bg-red'"
								v-if="item.hot">HOT</view>
						</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 团油金额输入框 -->
		<view class="margin solid radius" v-if="activeChannelCode=='TY'">
			<view class=" menu cu-list  ">
				<view class="cu-item nowrap">
					<view class="text-bold ">
						加油金额
					</view>
					<view class="text-center">
						<input v-model="ty.realMoney" @input="onInputTyMoney" type="digit" class="block"
							placeholder="加油金额" value="" />
					</view>
					<view class="">
						<text class="text-bold padding-right-sm">
							元
						</text>
						约{{tyRes.liter>0?tyRes.liter:'-.--'}}L
					</view>
				</view>
				<view class="grid col-5 padding-sm" v-if="activeChannelCode!='TY'">
					<view v-for="(item,index) in checkVol" class="padding-xs" :key="index">
						<button class="cu-btn red  block" :class="item.checked?'bg-red':'line-red'"
							@tap="ChooseCheckVol" :data-value="item.value">
							{{item.name}}
							<view class="cu-tag sm round" :class="item.checked?'bg-white text-red':'bg-red'"
								v-if="item.hot">HOT</view>
						</button>

					</view>
				</view>
			</view>
		</view>
		
		<view class=" menu cu-list  "  v-if="plateNumberOcrShow==true">
			<view class="cu-item nowrap">
				<view class="text-bold ">
					车牌识别
				</view>
				<view  @tap="srcPhoto" class="text-center" style="width: 60%;margin: 0 2%;">
					<input v-model="plateNumberOcr"  type="digit" class="block"
						placeholder="请点击拍照识别车牌" value="" style="border-bottom: 1px solid #efefef;" />
				</view>
				<view  @tap="srcPhoto">
					<uni-icons type="camera-filled" size="30"></uni-icons>
				</view>
			</view>
		</view>
		
		
		
		<view class="bg-white padding">
			<view class="">
				<text class="text-bold">优惠</text>
			</view>
			<view class="padding-top-sm" v-if="activeChannelCode!='TY'">
				星油优惠金额
				<text class="fr">-￥{{discount>0?discount:'xxx.x'|moneyForMath}}</text>
			</view>
			<view class="padding-top-sm" v-else>
				直降金额
				<text class="fr">-￥{{tyRes.depreciateAmount>0?tyRes.depreciateAmount:'xxx.x'|moneyForMath}}</text>
			</view>

			<view class="padding-top-sm">
				优惠券 <text class="fr">{{'----'}}</text>
			</view>
		</view>
		<view class="placeholder-hidden">
			<view class="margin  cu-list pay-bar menu radius solid-top solid-bottom solid-left">
				<view class="cu-item ">
					<view class="">
						合计：<text class="text-red">{{realMoney>0?realMoney:'xxx.x'|moneyForMath}}元</text>
					</view>
					<view class="" @tap="showOrderMsg">
						明细<text class="cuIcon-unfold padding-left-xs"></text>
					</view>
					<view class="">
						<button @tap="beforeMake" class="bg-main-oil self-btn  cu-btn block lg">立即下单</button>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottom">
			<view class="margin cu-list  pay-bar menu radius solid-top solid-bottom solid-left">
				<view class="cu-item ">
					<view class="">
						合计：<text class="text-red fr"
							v-if="activeChannelCode!='TY'">{{realMoney>0?realMoney:'xxx.x'|moneyForMath}}</text>
						<text class="text-red fr"
							v-else>{{ty.realMoney>0?ty.realMoney-tyRes.depreciateAmount:'xxx.x'|moneyForMath}}</text>
					</view>
					<view class="" @tap="showOrderMsg">
						明细<text class="cuIcon-unfold padding-left-xs"></text>
					</view>
					<view class="">
						<button @tap="beforeMake" class="bg-main-oil self-btn  cu-btn block lg">立即下单</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 金额明细弹窗 -->
		<view class="cu-modal bottom-modal" :class="showOrder">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white justify-end">
					<view class="content">订单明细</view>
					<view class="action" @tap="showOrder=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="bg-white dashed-top">
					<view class="padding" style="    padding-bottom: 20%;">
						<view class="padding-tb-xs text-left">
							油站：
							<text class="fr">{{siteName?siteName:''}}</text>
						</view>
						<view class="padding-tb-xs text-left">
							油品油枪：
							<text class="fr">{{oilProductCode?oilProductCode:''}}
								{{oilBar?(checkBar.filter(item=>oilBar==item.value)[0].name||oilBar)+'号枪':'未选择油枪'}}</text>
						</view>
						<view class="" v-if="activeChannelCode!='TY'">
							<view class="padding-tb-xs margin-bottom text-left">
								加油升数：
								<text class="fr">{{vlom?'约' :''}}{{vlom?vlom :'' | moneyVolm}} L </text>
							</view>
							<view class=" dashed-top margin-top padding-top text-left">
								加油金额：
								<text class="fr">{{vol>0?vol:'xxx.x'|moneyForMath}}</text>
							</view>
							<view class="padding-tb-xs text-left">
								星油优惠：
								<text class="text-red fr">{{discount>0?discount:'xxx.x'|moneyForMath}}</text>
							</view>
						</view>
						<view class="" v-else>
							<view class=" dashed-top margin-top padding-top text-left">
								加油金额： <text class="fr">{{ty.realMoney>0?ty.realMoney:'xxx.x'|moneyForMath}}</text>
							</view>
							<view class="padding-tb-xs margin-bottom text-left">
								加油升数： <text class="fr">{{ tyRes.liter?tyRes.liter+'L':''}}</text>
							</view>
							<view class="padding-tb-xs text-left">
								直降金额：
								<text
									class="text-red fr">{{tyRes.depreciateAmount>0?tyRes.depreciateAmount:'xxx.x'|moneyForMath}}</text>
							</view>
						</view>
						<view class="padding-tb-xs text-left">
							优惠券：
							<text class="text-red fr">{{'----'}}</text>
						</view>
						<view class="padding-tb-xs text-left">
							合计：
							<text class="text-red fr"
								v-if="activeChannelCode!='TY'">{{realMoney>0?realMoney:'xxx.x'|moneyForMath}}</text>
							<text class="text-red fr" v-else>{{ty.realMoney>0?ty.realMoney:'xxx.x' }}</text>
						</view>
					</view>
					<view class="cu-list margin pay-bar menu radius solid-top solid-bottom solid-left">
						<view class="cu-item ">
							<view class="">
								合计：<text class="text-red"
									v-if="activeChannelCode!='TY'">{{realMoney>0?realMoney:'xxx.x'|moneyForMath}}元</text>
								<text class="text-red"
									v-else>{{ty.realMoney>0?ty.realMoney-tyRes.depreciateAmount:'xxx.x'|moneyForMath}}元</text>
							</view>
							<view class="" @tap="showOrder=''">
								明细<text class="cuIcon-fold padding-left-xs"></text>
							</view>
							<view class="">
								<button @tap="beforeMake" class="bg-main-oil self-btn  cu-btn block lg">立即下单</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class=" cu-modal show" v-show="showtitle">
			<view class="cu-dialog overflow-unset dialog-box box-paddings">
				<view class="close-icon" @tap="hidendialog">
					<image src="https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/close.png" mode=""
						style="width:50rpx;height: 50rpx;"></image>
				</view>
				<view class="">
					<image src="https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/errIcon.png" mode=""
						style="width:100rpx;height: 100rpx;"></image>
				</view>
				<view class="cu-bar box-panding text-centerS">
					<text class="headShow"> 支付提醒 </text>
				</view>
				<view class="cu-bar box-panding">
					<text class="showtext">当前油站距离您较远，请与加油员确认您选择的油站是否正确。</text>
				</view>
				<view class="checklocation_box_button">
					<view class="cu-tn btn-box red_btn" @tap="backTohome">
						返回油站列表
					</view>
					<view class="cu-tn btn-box" @tap="gotoPay">
						确认下单
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal " :class="showPlate">
			<view class="cu-dialog bg-white">
				<view class="cu-bar bg-white justify-end">
					<view class="content">车牌号为必填</view>
					<view class="action" @tap="showPlate=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>

				<view class="padding-bottom-lg ">
					<view style="align-items: center;" class="text-left margin solid radius flex padding bg-gray">
						<view class="">
							输入车牌号：
						</view>
						<input style="flex: 1;" type="text" value="" placeholder="请选择或输入车牌号" v-model="plateNumber" />
						<uni-icons v-if="plateNumber" @tap=" plateNumber=''; " type="clear" size="20"></uni-icons>
					</view>
					<picker-view :indicator-style="indicatorStyle" v-if="plateNumbers.length" :value="plateIndex"
						@change="pickPlate" class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in plateNumbers" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal bottom-modal " :class="showPlicePhoto">
	
			<view class="cu-dialog bg-white">
				<view class="cu-bar bg-white justify-end">
					<view class="content"></view>
					<view class="action" @tap="showPlicePhoto=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				
			<view style="height: 1000rpx;">
				<view style="margin: 100rpx 0;">
					<uni-icons type="clear" size="80" color="#f56c6c"></uni-icons>
					<view>
						<text style="color: #d9001b;font-size: 30rpx;font-weight: bold;">识别失败!</text>
					</view>
					
				</view>
				<view style="margin: 60rpx 0;">
					<button @tap="srcPhoto" style="width: 60%;background-color: #409EFF;color: #ffffff;">重新拍照</button>
				</view>
				<view style="margin: 60rpx 0;">
					<button style="width: 60%;background-color: #F59A23;color: #ffffff;" @click="manualInput">手动输入车牌号</button>
				</view>
			</view>
			</view>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog mode="input" title="请输入车牌号" value="" :before-close="true"
				placeholder="请输入" @close="inputClose" @confirm="inputConfirm"></uni-popup-dialog>
		</uni-popup>
	
	</view>
</template>

<script>
	import oilSiteApi from '@/api/oil-site.js'
	import toilApi from '@/api/toil.js'
	import oilOrderApi from '@/api/oil-order.js'
	import oilOssApi from '@/api/oil-oss.js'
	import utils from '@/utils/encode'
	import oilInterfacesApi from '@/api/oil-interfaces.js'
	import user from '@/api/user.js'
	export default {
		props: {
			channelList: {
				type: Array,
				default () {}
			},
			channelJuli: {
				type: Number,
				default: ''
			},
			siteName: {
				type: String,
				default: ''
			},
			activeCur: {
				type: Number,
				default: 0
			},
			isOther: {
				type: Boolean,
				default: false
			},
			siteId: {
				type: String,
				default: ''

			}
		},
		data() {
			return {
				thirdPartyDynamicData: ['LAIYOU'],
				vlom: '',
				discount: '',
				activeSitePrice: '',
				PlateNumberImages: '',
				isOtherUser: false, // 判断是否为卡力用户
				isPlateNumber: true,
				isUefueller: true,
				refuellerImages: '',
				showtitles: "",
				showtitle: false,
				oilBarTy: '',
				ty: {
					realMoney: ""
				},
				tyRes: {
					liter: '',
					depreciateAmount: ''
				},
				OtherUser: uni.getStorageSync('otherUserInfo'),
				value: '',
				visible: true,
				indicatorStyle: `height: 50px;`,
				visiblePlateNumbers: true,
				inputBar: '',
				oilBar: '',
				testPlateResult: false,
				plateIndex: 0,
				joberIndex: 0,
				showJober: '',
				vol: '',
				oilSitePriceDetailsVo: [],
				siteUserNames: [],
				setplateNumbers: '',
				plateNumbers: [],
				showPlate: "",
				showOrder: '',
				radio: 0,
				imgURL: this.global.imgURL,
				scrollLeft: 0,
				checkMoney: [{
					value: 100,
					name: '100 ',
					checked: false,
					hot: false,
				}, {
					value: 200,
					name: '200 ',
					checked: false,
					hot: false,
				}, {
					value: 500,
					name: '500 ',
					checked: false,
					hot: false,
				}, {
					value: 1000,
					name: '1000 ',
					checked: false,
					hot: false,
				}, {
					value: 2000,
					name: '2000 ',
					checked: false,
					hot: false,
				}],
				checkVol: [{
					value: 100,
					name: '100L',
					checked: false,
					hot: false,
				}, {
					value: 200,
					name: '200L',
					checked: false,
					hot: false,
				}, {
					value: 500,
					name: '500L',
					checked: false,
					hot: false,
				}, {
					value: 1000,
					name: '1000L',
					checked: false,
					hot: false,
				}, {
					value: 2000,
					name: '2000L',
					checked: false,
					hot: false,
				}],
				plateNumber: '',
				checkbox: [],
				activeChannelCode: '',
				checkBar: [],
				realMoney: '',
				xoilAmountGun: '',
				plateNumberOcr:'',
				plateNumberOcrShow:false,
				showPlicePhoto:'',
				plateNumberImages:''
			}
		},
		created() {
			let oilItem = uni.getStorageSync('oilItem'),
				oilSite = uni.getStorageSync(''),
				otherUser = uni.getStorageSync('otherUserInfo'),
				companyId = JSON.parse(uni.getStorageSync('companyCard')).companyId
			if (otherUser) {
				this.isOtherUser = true
			} else {
			}
			this.showtitles = oilItem.listTag;
			this.init()
			this.getCompanyConfig(companyId)
		},
		watch: {
			activeChannelCode: {
				handler(newval) {
					this.oilBar = ''
					setTimeout(async () => {
						this.checkBar = (this.typeChenk()) ? await this.dynamic() : this.calcBar()
					}, 2)
				}
			},
			priceId: {
				handler(newval) {
					this.oilBar = ''
					setTimeout(async () => {
						this.checkBar = (this.typeChenk()) ? await this.dynamic() : this.calcBar()
					}, 2)
				}
			},
		},
		computed: {

			priceId() {
				if (this.channelList.length && this.channelList[this.activeCur] && this.oilSitePriceDetailsVo[this
						.radio]) {
					return this.oilSitePriceDetailsVo[this.radio].priceId
				}
			},
			channelId() {
				if (this.channelList.length && this.channelList[this.activeCur]) {
					let channelId = this.channelList[this.activeCur].channelId
					this.getNewSitePrice(channelId)
					this.activeChannelCode = this.channelList[this.activeCur].channelCode
					return channelId
				}
			},
			plateNumberSel() {
				if (this.plateNumbers.length) {
					this.plateNumber = this.plateNumbers[this.plateIndex]
					return this.plateNumbers[this.plateIndex] ? this.plateNumbers[this.plateIndex] : '为必填'
				}
			},
			jober() {
				if (this.siteUserNames.length) {
					return this.siteUserNames[this.joberIndex]
				}
			},
			totalMoney() {
				if (this.vol > 0 && this.oilSitePriceDetailsVo[this.radio]) {
					let numb = this.vol * this.oilSitePriceDetailsVo[this.radio].oilSitePrice
					return this.vol * this.oilSitePriceDetailsVo[this.radio].oilSitePrice
				}
			},
			// discount() {
			// 	if (this.totalMoney) {
			// 		return this.vol * (this.oilSitePriceDetailsVo[this.radio].oilSitePrice - this.oilSitePriceDetailsVo[
			// 			this.radio].sitePrice)
			// 	}
			// },
			// realMoney() {
			// 	if (this.totalMoney) {
			// 		return this.vol * this.oilSitePriceDetailsVo[this.radio].sitePrice
			// 	}
			// },
			oilProductCode() {
				if (this.totalMoney) {
					return this.oilSitePriceDetailsVo[this.radio].oilProductCode
				}
			}
		},
		methods: {
			manualInput(){
				this.showPlicePhoto=''
				this.$refs.inputDialog.open()
			},
			inputClose(){
				this.$refs.inputDialog.close()
			},
			inputConfirm(val){
				if(val){
					this.plateNumberOcr = val
					this.$refs.inputDialog.close()
				}else{
					uni.showToast({
						title: '请输入车牌号',
						icon: 'none'
					})
				}
				
			},
			getCompanyConfig(companyId){
				if(companyId){
					user.getCompanyConfigByCompanyId(companyId).then(res=>{
						if(res.data.plateNumberOcr==1){
							this.plateNumberOcrShow = true
						}else{
							this.plateNumberOcrShow = false
						}
						
					})
				}
			},
			srcPhoto(){
				this.showPlicePhoto=''
				let _that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], // 只能拍照
					success: function(res) {
						uni.showLoading({
							title: '识别中',
							mask: true
						});
								
						const JSESSIONID = utils.uuid()
						uni.uploadFile({
							url: 'http://uat.xingoil.com/adminapi/oil-oss/obejct/carNoIdentify',
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								"Content-Type": "multipart/form-data",
								"Authorization": uni.getStorageSync('Authorization'),
								'dataSources': 'MP',
								"imei": uni.getStorageSync('unionid'),
								"openId": uni.getStorageSync('openid'),
								'JSESSIONID': JSESSIONID,
								'token': utils.md5Salt(JSESSIONID)
							},
							success(e) {
								uni.hideLoading()
								let obj = JSON.parse(e.data)
								if(obj.data&&obj.data.carNo){
									 _that.plateNumberOcr = obj.data.carNo
									 _that.plateNumberImages = obj.data.imgUrl
								}else{
									_that.plateNumberOcr = ''
									_that.showPlicePhoto = 'show'
								}
							},fail(res){
								uni.hideLoading()
								_that.showPlicePhoto = 'show'
							}
						})

						
					}
				})


			},
			typeChenk() {
				return this.channelList[this.activeCur]?.secondChannelCode && this.thirdPartyDynamicData.includes(this
					.channelList[this.activeCur].secondChannelCode)
			},
			init() {
				//生成油枪数据 原来在data里写死的1-8号油枪数据；新加 clc 2022-3-18
				for (let i = 0; i < 30; i++) {
					this.checkbox.push({
						value: i + 1,
						name: i + 1,
						checked: false,
						hot: false,
					})
				};

			},
			ifFn(e) {
				// if(this.oilSitePriceDetailsVo[this.radio].oilsBar==null){
				// 	return true 
				// }else if(this.oilSitePriceDetailsVo[this.radio].oilsBar.split(',').indexOf(e.name)!==-1){
				// 	return true
				// }
			},
			checkeNumber(e) {
				e.detail.value = e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
				this.$nextTick(() => {
					this.vol = e.detail.value
				})
			},
			checkMoneyVol(e) {
				if (e == '') {
					uni.showToast({
						title: '请输入金额',
						icon: 'none'
					})
					return
				}
				let isNumber = this.isNumber(e)
				if (!isNumber) {
					uni.showToast({
						title: '请输入正确金额',
						icon: 'none'
					})
					return
				}
				let number = {
					payType: 'CUSTOMER_ACTIVE',
					userType: '1',
					xoilAmountGun: e,
					priceId: this.activeSitePrice
				}
				this.xoilAmountGun = e
				oilSiteApi.getOrderDiscountInfo(number).then(res => {
					this.realMoney = res.data.payRealAmount
					this.discount = res.data.oilDiscountAmount
					this.vlom = res.data.volume
				})
			},
			ChooseCheckMoney(e) {
				this.vol = e + ''
				this.checkMoneyVol(this.vol)
			},
			isNumber(value) { //判断是否为正常数字
				const regPos = /^\d+(\.\d+)?$/; //非负浮点数
				const regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
				if (value.indexOf('-') != -1) {
					return false
				}
				if (regPos.test(value) || regNeg.test(value)) {
					return true
				} else {
					return false
				}
			},
			getMoneyVol(e) {
				if (e.detail.value == '') {
					uni.showToast({
						title: '请输入金额',
						icon: 'none'
					})
					return
				}
				let isNumber = this.isNumber(e.detail.value)
				if (!isNumber) {
					uni.showToast({
						title: '请输入正确金额',
						icon: 'none'
					})
					return
				}

				let number = {
					payType: 'CUSTOMER_ACTIVE',
					userType: '1',
					xoilAmountGun: e.detail.value,
					priceId: this.activeSitePrice,

				}
				this.xoilAmountGun = e.detail.value
				oilSiteApi.getOrderDiscountInfo(number).then(res => {
					this.realMoney = res.data.payRealAmount
					this.discount = res.data.oilDiscountAmount
					this.vlom = res.data.volume
				})
			},
			cleraPlateNumber() {
				this.PlateNumberImages = ''
				this.isPlateNumber = true
				this.plateNumber = ''
			},
			cleraUefueller() {
				this.refuellerImages = ''
				this.isUefueller = true
			},
			upPlateNumber() {
				this.upImages('car')
			},
			upUefueller() {
				this.upImages('Uefueller')
			},
			upImages(type) {
				let _that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: function(res) {
						const JSESSIONID = utils.uuid()
						uni.uploadFile({
							// https://www.xingoil.com/adminapi
							// http://q423f36269.zicp.vip:27289
							url: 'http://192.168.0.47:38080/oil-oss/obejct/uploadFile',
							filePath: res.tempFilePaths[0],
							formData: {
								ossKey: 'xingyou',
								pathKey: 'certificate',
								encrypt: 'PUBLIC',
							},
							name: 'file',
							header: {
								"Content-Type": "multipart/form-data",
								"Authorization": uni.getStorageSync('Authorization'),
								'dataSources': 'MP',
								"imei": uni.getStorageSync('unionid'),
								"openId": uni.getStorageSync('openid'),
								'JSESSIONID': JSESSIONID,
								'token': utils.md5Salt(JSESSIONID)
							},
							success(e) {
								let obj = JSON.parse(e.data),
									url = obj.data.publicUrl
								if (type == 'car') {
									let data = {
										plateNumberImage: obj.data.publicUrl
									}
									_that.PlateNumberImages = url
									_that.isPlateNumber = false
									oilSiteApi.plateNumberRecognition(data).then((res) => {
										let obj = JSON.parse(res.data)
										_that.plateNumber = obj.NUMBER
									})
								} else {
									_that.refuellerImages = url
									_that.isUefueller = false
								}

							}
						})
					}
				})
			},
			successplateNumber(e) {
				console.log(e)
			},
			hidendialog() {
				this.showtitle = false
			},
			backTohome() {
				uni.switchTab({
					url: '../../../pages/tabbar/home/home'
				})
			},
			gotoPay() {

				this.checkInfo()
			},
			//动态油枪方法 this.checkbox数据格式在我改之前就是这样, clc 2022-3-18 
			dynamic() {
				return new Promise((re, rj) => {
					oilSiteApi.gunList({
						siteId: this.siteId
					}).then(res => {
						if (res.data.length !== 0) {
							let array = res.data.map((item, index) => {
								return {
									value: item.otherGunId,
									name: item.gunNum,
									checked: false,
									hot: false,
									oilsType: item.oilsType,
									oilsId: item.oilsId
								}
							}) || []
							let filterArray = array.filter(item => item.oilsId == this
								.oilSitePriceDetailsVo[this.radio]?.priceId);
							re(filterArray)
						}
					})
				})
			},
			calcBar() {
				//复制一份源数组
				let arry = JSON.parse(JSON.stringify(this.checkbox));
				//字段等于null或没有字段 默认显示1-8号油枪
				if (!this.oilSitePriceDetailsVo[this.radio]?.oilsBar) {
					arry.length = 8
					return arry
				} else {
					//声明空数组 保存满足条件的数据 
					let newArry = []
					// 如果有字段并且字段有值 去重 分割数组 
					new Set(this.oilSitePriceDetailsVo[this.radio].oilsBar.split(',')).forEach((item, i) => {
						//数值不能等于零 数值最大30 不能有小数点 必须是数字 才能添加到数组
						if (Number(item) > 0 && Number(item) && Number(item) <= 30 && item.indexOf('.') == -1) {
							newArry.push({
								value: Number(item),
								name: Number(item),
								checked: false,
								hot: false,
							})
						} else {
							//不满足条件 跳过
							return
						}
					})
					// 如果字段 有值且没有一个满足 条件 默认返回 1-8号油枪 
					if (newArry.length == 0) {
						arry.length = 8
						return arry
					}
					//返回排序数组
					return newArry.sort((a, b) => {
						a - b
					});
				}

				// clc 2022-3-18 注
				// if (this.activeChannelCode == 'TY') {
				// 	uni.showLoading({
				// 		title: '',
				// 		mask: false
				// 	});
				// 	if (this.oilSitePriceDetailsVo[this.radio] && this.oilSitePriceDetailsVo[this.radio].oilsBar) { 
				// 		this.oilBarTy = this.oilSitePriceDetailsVo[this.radio].oilsBar
				// 	}
				// 	if (this.channelId && this.oilBarTy) {
				// 		let gunLsit = this.oilBarTy.split(',')
				// 		let gunCheck = []
				// 		gunLsit.forEach(item => {
				// 			gunCheck.push({
				// 				value: item,
				// 				name: item,
				// 				checked: false,
				// 				hot: false
				// 			})
				// 		})
				// 		uni.hideLoading()
				// 		return gunCheck
				// 	}
				// } else {
				// 	return this.checkbox
				// }
			},
			onInputTyMoney(val) {
				setTimeout(() => {
					this.getTyRes()
				}, 500)
			},
			// 团油查询直降金额
			getTyRes() {
				if (this.ty.realMoney < 5) {
					uni.showToast({
						title: '加油金额不得低于5元',
						icon: 'none'
					})
					return false
				}
				if (!this.ty.realMoney) {
					uni.showToast({
						title: '请输入加油金额',
						icon: 'none'
					})
					this.tyRes = {}
					return false
				}
				const data9 = {
					amountGun: this.ty.realMoney,
					priceId: this.oilSitePriceDetailsVo[this.radio].priceId
				}
				toilApi.getTyPrice(data9).then(res => {
					if (res.code == 20000) {
						this.tyRes = res.data
					}
				})
			},
			onInputVol(val) {
				let items = this.checkVol;
				let values = val
				// this.vol = values
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].value == values) {
						items[i].checked = !items[i].checked;
					} else {
						items[i].checked = false
					}
				}
			},
			onInputBar() {
				this.oilBar = this.inputBar
				let items = this.checkbox;
				let values = this.oilBar
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].value == values) {
						items[i].checked = !items[i].checked;
					} else {
						items[i].checked = false
					}
				}
			},
			checkInfo() {
				this.tsetPlate(this.plateNumber ? this.plateNumber : this.plateNumberSel)
				if (!this.testPlateResult) {
					this.plateNumber = ''
					uni.showToast({
						title: '车牌号校验不通过，自动将其置空，不影响加油',
						icon: 'none'
					})
					// return false
				}

				if (!this.oilSitePriceDetailsVo[this.radio].priceId) {
					uni.showToast({
						icon: 'none',
						title: '未选择油品'
					})
					return false
				}
				if (!this.plateNumber) {
					uni.showToast({
						icon: 'none',
						title: '未选择加油车牌'
					})
					this.showPlate = 'show'
					return false
				}
				if (!this.oilBar) {
					uni.showToast({
						icon: 'none',
						title: '未选择油枪'
					})
					return false
				}
				if (!this.oilBar) {
					uni.showToast({
						icon: 'none',
						title: '未选择加油员'
					})
					return false
				}
				if (!this.vol && !this.tyRes.liter) {
					uni.showToast({
						icon: 'none',
						title: '加油金额不能为空'
					})
					return false
				}
				if (this.vol < 0.01 && !this.tyRes.liter) {
					uni.showToast({
						icon: 'none',
						title: '加油金额不能为空'
					})
					return false
				}
				if (!this.oilSitePriceDetailsVo[this.radio].sitePrice) {
					uni.showToast({
						icon: 'none',
						title: '未选择油价'
					})
					return false
				}

				this.makerOrder()
			},
			beforeMake() {
				if (this.activeChannelCode != 'TY') {
					if (this.vol <= 0) {
						uni.showToast({
							title: '加油不可为0',
							icon: 'none'
						})
						return false
					}
				}
				if (this.activeChannelCode == 'TY') {
					if (this.ty.realMoney < 5) {
						uni.showToast({
							title: '加油金额不得低于5元',
							icon: 'none'
						})
						return false
					}
				}
				this.tsetPlate(this.plateNumber ? this.plateNumber : this.plateNumberSel)
				if (!this.testPlateResult) {
					this.plateNumber = ''
					uni.showToast({
						title: '车牌号校验不通过，自动将其置空，不影响加油',
						icon: 'none'
					})
					// return false
				}
				if (!this.oilSitePriceDetailsVo[this.radio].priceId) {
					uni.showToast({
						icon: 'none',
						title: '未选择油品'
					})
					return false
				}
				if (!this.plateNumber) {
					uni.showToast({
						icon: 'none',
						title: '未选择加油车牌'
					})
					this.showPlate = 'show'
					return false
				}
				if (!this.oilBar) {
					uni.showToast({
						icon: 'none',
						title: '未选择油枪'
					})
					return false
				}
				if (!this.oilBar) {
					uni.showToast({
						icon: 'none',
						title: '未选择加油员'
					})
					return false
				}
				if (!this.vol && !this.tyRes.liter) {
					uni.showToast({
						icon: 'none',
						title: '加油金额不能为空'
					})
					return false
				}
				if (this.vol < 0.01 && !this.tyRes.liter) {
					uni.showToast({
						icon: 'none',
						title: '加油金额不能为空'
					})
					return false
				}
				if (!this.oilSitePriceDetailsVo[this.radio].sitePrice) {
					uni.showToast({
						icon: 'none',
						title: '未选择油价'
					})
					return false
				}
				if (this.channelJuli > 1000) {
					this.showtitle = true
					return
				}
				this.makerOrder()
			},
			// 下单
			makerOrder() {
				let otherUser = uni.getStorageSync('otherUserInfo')
				if (otherUser) {
					// console.log('这里是卡力+++++++++++')
					let PlateNumberImages = this.PlateNumberImages,
						refuellerImages = this.refuellerImages
					if (PlateNumberImages == '') {
						uni.showToast({
							icon: 'none',
							title: '请上传车辆照片'
						})
						return
					}
					if (refuellerImages == '') {
						uni.showToast({
							icon: 'none',
							title: '请上传油机照片'
						})
						return
					}
					var orderData = {
						amountGun: this.activeChannelCode == 'TY' ? this.ty.realMoney : '',
						plateNumberImages: this.PlateNumberImages,
						refuellerImages: this.refuellerImages,
						shareCompanyQuota: 0, // 共享标识
						priceId: this.oilSitePriceDetailsVo[this.radio].priceId, //类型：String  必有字段  备注：油价主键
						orderType: "REAL_ORDER", //类型：String  必有字段  备注：订单类型（REAL_ORDER：真实订单 VIRTUAL_ORDER：虚拟订单）
						orderSource: "WECHAT_MINIAPPS", //类型：String  必有字段  备注：订单来源（WECHAT_MINIAPPS）
						plateNumber: this.plateNumber ? this.plateNumber : this
							.plateNumberSel, //类型：String  必有字段  备注：车牌号
						siteUserName: this.jober, //类型：String  必有字段  备注：加油员
						oilsBar: this.oilBar, //类型：Number  必有字段  备注：油枪
						volume: this.activeChannelCode == 'TY' ? this.tyRes.liter : this
							.vol, //类型：Number  必有字段  备注：加油升数
						realPrice: this.oilSitePriceDetailsVo[this.radio].sitePrice, //类型：Number  必有字段  备注：实际加油价格
						suppleMark: 0, //类型：Number  必有字段  备注：补录标识（0：实时订单 1：补录订单）
						createSource: "XOIL_DRIVER_COMPANY_WECHAT_APPLET", //类型：String  必有字段  备注：创建来源（ XOIL_DRIVER_COMPANY_WECHAT_APPLET）
						// "deviceImei": "mock", //类型：String  可有字段  备注：设备唯一码
						// "networkIp": "mock" //类型：String  可有字段  备注：ip地址
						kaliState: 1,
						'version': 1,
						'xoilAmountGun': this.vol
					}
				} else {
					if(this.plateNumberOcrShow == true){
						if(!this.plateNumberOcr){
							uni.showToast({
								icon: 'none',
								title: '请上传车牌照片'
							})
							return
						}
						var orderData = {
						amountGun: this.activeChannelCode == 'TY' ? this.ty.realMoney : '',
						shareCompanyQuota: 0, // 共享标识
						priceId: this.oilSitePriceDetailsVo[this.radio].priceId, //类型：String  必有字段  备注：油价主键
						orderType: "REAL_ORDER", //类型：String  必有字段  备注：订单类型（REAL_ORDER：真实订单 VIRTUAL_ORDER：虚拟订单）
						orderSource: "WECHAT_MINIAPPS", //类型：String  必有字段  备注：订单来源（WECHAT_MINIAPPS）
						plateNumber: this.plateNumberOcrShow == true ? this.plateNumberOcr : this
							.plateNumber, //类型：String  必有字段  备注：车牌号
						plateNumberImages: this.plateNumberImages, // 车牌照片地址
						siteUserName: this.jober, //类型：String  必有字段  备注：加油员
						oilsBar: this.oilBar, //类型：Number  必有字段  备注：油枪
						volume: this.activeChannelCode == 'TY' ? this.tyRes.liter : this
							.vol, //类型：Number  必有字段  备注：加油升数
						realPrice: this.oilSitePriceDetailsVo[this.radio].sitePrice, //类型：Number  必有字段  备注：实际加油价格
						suppleMark: 0, //类型：Number  必有字段  备注：补录标识（0：实时订单 1：补录订单）
						createSource: "XOIL_DRIVER_COMPANY_WECHAT_APPLET", //类型：String  必有字段  备注：创建来源（ XOIL_DRIVER_COMPANY_WECHAT_APPLET）
						// "deviceImei": "mock", //类型：String  可有字段  备注：设备唯一码
						// "networkIp": "mock" //类型：String  可有字段  备注：ip地址
						'version': 1,
						'xoilAmountGun': this.vol
					}
					}else{
						var orderData = {
							amountGun: this.activeChannelCode == 'TY' ? this.ty.realMoney : '',
							shareCompanyQuota: 0, // 共享标识
							priceId: this.oilSitePriceDetailsVo[this.radio].priceId, //类型：String  必有字段  备注：油价主键
							orderType: "REAL_ORDER", //类型：String  必有字段  备注：订单类型（REAL_ORDER：真实订单 VIRTUAL_ORDER：虚拟订单）
							orderSource: "WECHAT_MINIAPPS", //类型：String  必有字段  备注：订单来源（WECHAT_MINIAPPS）
							plateNumber: this.plateNumber ? this.plateNumber : this
								.plateNumberSel, //类型：String  必有字段  备注：车牌号
							siteUserName: this.jober, //类型：String  必有字段  备注：加油员
							oilsBar: this.oilBar, //类型：Number  必有字段  备注：油枪
							volume: this.activeChannelCode == 'TY' ? this.tyRes.liter : this
								.vol, //类型：Number  必有字段  备注：加油升数
							realPrice: this.oilSitePriceDetailsVo[this.radio].sitePrice, //类型：Number  必有字段  备注：实际加油价格
							suppleMark: 0, //类型：Number  必有字段  备注：补录标识（0：实时订单 1：补录订单）
							createSource: "XOIL_DRIVER_COMPANY_WECHAT_APPLET", //类型：String  必有字段  备注：创建来源（ XOIL_DRIVER_COMPANY_WECHAT_APPLET）
							// "deviceImei": "mock", //类型：String  可有字段  备注：设备唯一码
							// "networkIp": "mock" //类型：String  可有字段  备注：ip地址
							'version': 1,
							'xoilAmountGun': this.vol
						}
					}
					
				}
				let location = uni.getStorageSync('location') || {
					longitude: '',
					latitude: ''
				};
				oilOrderApi.createOrder(Object.assign(orderData, {
					longitude: location.longitude,
					latitude: location.latitude
				})).then(res => {
					if (res.code == 20000) {
						let data = (this.typeChenk() && (Object.assign(res.data, {
							gunName: this.checkBar.filter(item => this.oilBar == item.value)[0]
								.name
						}))) || res.data
						if (otherUser) {
							// console.log('这里是卡力订单创建')
							uni.setStorageSync('orderMade', data)
							uni.redirectTo({
								url: '/BagStation/pages/SeparateProcess/orderPaying?payMethod=' + res.data
									.payMethod + '&&type=oil'
							})
							return
						}
						// console.log(data, '这里是非卡力')
						uni.setStorageSync('orderMade', data)
						uni.redirectTo({
							url: '/BagStation/pages/makeOrder/orderPaying?payMethod=' + res.data
								.payMethod + '&&type=oil'
						})
					}
				})
			},
			tsetPlate(plateNumber) {
				this.testPlateResult =
					/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/
					.test(plateNumber)
			},
			// 获取渠道下价格等信息
			getNewSitePrice(channelId) {
				this.oilSitePriceDetailsVo = []
				oilSiteApi.getNewSitePrice(channelId).then(res => {
					if (res.code == 20000) {
						this.radio = 0
						this.plateNumbers = res.data.plateNumbers
						this.oilSitePriceDetailsVo = res.data.oilSitePriceDetailsVo
						this.activeSitePrice = res.data.oilSitePriceDetailsVo[0].priceId
						this.siteUserNames = res.data.siteUserNames
					}
				})
			},
			pickJober(e) {
				this.joberIndex = e.detail.value
			},
			pickPlate(e) {
				this.plateIndex = e.detail.value
				this.plateNumber = this.plateNumberSel
			},
			showOrderMsg() {
				this.showOrder = 'show'
			},
			ChooseCheckVol(e) {
				let items = this.checkVol;
				let values = e.currentTarget.dataset.value;
				this.vol = values
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].value == values) {
						items[i].checked = !items[i].checked;
					} else {
						items[i].checked = false
					}
				}
			},
			ChooseBar(e) {
				let items = this.checkBar;
				let values = e.value;
				this.oilBar = values
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].value == values) {
						items[i].checked = !items[i].checked;
					} else {
						items[i].checked = false
					}
				}
			},
			changePrice(e) {
				this.radio = e.detail.value
				this.ty.realMoney = null
				this.tyRes.liter = 0
				this.vol = ''
				this.activeSitePrice = this.oilSitePriceDetailsVo[this.radio].priceId
				this.realMoney = '--'
				this.xoilAmountGun = ''
			},
			tabSelect(e) {
				this.activeChannelCode = e.currentTarget.dataset.channelCode;
				this.activeCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			}
		},
		filters: {
			moneyIntercept(value) {
				if (value != 'xxx.x') {
					let valus = (parseInt(value * 100) / 100).toFixed(2)
					return valus
				} else {
					return value
				}
			},
			moneyVolm(value) {
				if (value != 'xxx.x') {
					return Math.round(value * 100) / 100;
				} else {
					return value
				}
			},
			channelCodeFamt(value) {
				if (value) {
					// 渠道编码 ( XOIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
					switch (value) {
						case 'XOIL':
						case 'ZDC':
							return '星油'
						case 'WJY':
							return '万金油'
						case 'LV':
							return '其他'
						case 'TY':
							return '团油'
						case 'YDJY':
							return '一点加油（壳牌）'
					}
				}
			},
			moneyForMath(value) {
				if (value != 'xxx.x') {
					let realAmount = (Math.round(value * 100) / 100).toFixed(2)
					return realAmount
				} else {
					return value
				}
			},
			moneyFormat(value) {
				if (value != 'xxx.x') {
					let realAmount = (parseInt(value * 100) / 100).toFixed(2)
					return realAmount
				} else {
					return value
				}
			}
		}
	}
</script>

<style scoped>
	.UpFileBox {
		width: 100%;
		padding: 18px;
		padding-top: 0;
	}

	.UpFileBoxMain {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.close-icon {
		position: absolute;
		right: 2%;
		top: 2%;
	}

	.dialog-box {
		position: relative;
	}

	.site-icon {
		width: 2rem;
		vertical-align: middle;
	}

	.my-tag {
		padding: 0 12rpx;
	}

	.pay-bar>>>.self-btn {
		padding: 0 64rpx;
		height: 94rpx !important;
	}

	.pay-bar>.cu-item {
		padding-right: 0;
	}

	.site-icon-sm {
		width: 50upx;
	}

	.nowrap {
		white-space: nowrap;
	}

	.picker-view {
		min-height: 300upx;
	}

	.content {
		min-height: 100%;
		position: relative;
	}

	.navigation {
		position: absolute;
		right: 16px;
		top: 10px;
	}

	.icon-self {
		width: 1rem;
		height: 1rem;
	}

	.oil-price {
		position: relative;
	}

	.oil-price radio {
		position: absolute;
		left: 0rem;
		top: 10px;
	}

	.qr-icon {
		font-size: 2rem;
	}

	.pay-desc {
		line-height: 2rem;
	}

	.bottom-pay {
		min-height: 100rpx;
		width: 750upx;
	}

	.pay-bar {
		width: 750upx;
		position: absolute;
		bottom: 0;
	}



	.placeholder {
		min-height: 10upx;
	}

	.yu-card-xuan {
		position: relative;
		top: 110rpx
	}

	.site-label {
		max-width: 450upx;
		min-width: 450upx;
	}

	.cu-btn.sm {
		width: 80%;
	}

	.site-back {
		width: 2rem;
		top: 2.8rem;
		left: 1rem;
	}

	.site-icon {
		width: 1.5rem;
		vertical-align: middle;
	}

	.my-tag {
		padding: 0 12rpx;
	}

	.fixed {
		position: fixed;
		bottom: 0;
		width: 750upx;
	}

	.placeholder-hidden {
		opacity: 0;
	}

	.yu-card-xuan .action {
		white-space: nowrap;
	}

	.text-centerS {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.red_btn {
		color: #FFFFFF;
		background-color: #FF6700;
	}

	.box-paddings {
		padding: 40rpx 0;
	}

	.headShow {
		font-size: 36rpx;
		font-weight: 600;
	}

	.showtext {
		line-height: 2;
		font-size: 30rpx;
		margin-bottom: 30rpx;
		padding: 0 10%;
		word-spacing: 10px;
		letter-spacing: 3px;
		text-align: left;
	}

	.checklocation_box_button {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 5%;
	}

	.btn-box {
		width: 45%;
		flex: 0 0 auto;
		text-align: center;
		padding: 3%;
		border-radius: 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		border: 2rpx solid #bfbfbf;
	}

	.box-panding {
		padding: 10 0;
	}

	.checklocation {
		position: fixed;
		top: 50%;
		left: 20%;
		right: 20%;
		z-index: 999;
	}

	.checklocation_box {
		background-color: #FFFFFF;
	}

	.content {
		min-height: 100%;
		position: relative;
	}

	.navigation {
		position: absolute;
		right: 16px;
		top: 10px;
	}

	.icon-self {
		width: 1rem;
		height: 1rem;
	}

	.oil-price {
		position: relative;
	}

	.oil-price radio {
		position: absolute;
		left: 0rem;
		top: 10px;
	}

	.qr-icon {
		font-size: 2rem;
	}

	.pay-desc {
		line-height: 2rem;
	}

	.bottom-pay {
		min-height: 100rpx;
		width: 750upx;
	}

	.pay-bar {
		width: 750upx;
		position: absolute;
		bottom: 0;
	}

	.text-img {
		position: relative;
	}


	.placeholder {
		min-height: 10upx;
	}

	.yu-card-xuan {
		position: relative;
		top: 110rpx
	}

	.site-label {
		max-width: 450upx;
		min-width: 450upx;
	}

	.cu-btn.sm {
		width: 80%;
	}

	.site-back {
		width: 2rem;
		top: 2.8rem;
		left: 1rem;
	}

	.site-icon {
		width: 1.5rem;
		vertical-align: middle;
	}

	.my-tag {
		padding: 0 12rpx;
	}

	.fixed {
		position: fixed;
		bottom: 0;
		width: 750upx;
	}

	.placeholder-hidden {
		opacity: 0;
	}

	.yu-card-xuan .action {
		white-space: nowrap;
	}

	.text-title {
		text-align: left;
		margin: 10rpx 0;
		font-size: 28rpx;
		font-weight: 700;
	}

	.text-p {
		text-align: center;
		margin: 4rpx 0;
		font-size: 22rpx;
		color: #6f6f6fe8;
	}

	.refuellerImages {
		position: relative;
	}

	.plateNumber_box {
		position: relative;
	}

	.close_Img {
		position: absolute;
		right: -10px;
		top: -10px;
		width: 40rpx;
		height: 40rpx;
	}

	.padding-bottom-40 {
		padding-bottom: 20%;
	}
</style>
