<template>
	<view class="content bg-white position-re">
		<view class="bg-img fixed-top  flex align-end margin-bottom-lg " :style="'background-image: url('+imgURL+'site-bg.png '+');width: 750upx;height: 326rpx;background-size:cover'">
			<image @tap="goBack" :src="imgURL+'site-back.png'" width="20upx" mode="widthFix" class="position-ab site-back">
			</image>
			<view class="cu-list menu margin padding-sm  radius my-shadow  bg-white yu-card-xuan">
				<view class="cu-item ">
					<view class="content">
						<view class="strong padding-bottom-xs">
							{{siteInfo.siteName}}
						</view>
						<view class="font-12 color-999 site-label text-cut">
							{{siteInfo.address}}
						</view>
						<view class="font-12 color-999 site-label text-cut">
							营业时间 00:00 至 23:59
						</view>
					</view>
					<view class="action " @tap="openMap">
						<view class="oil-main-color">
							<my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon>
							{{siteInfo.juli|distanceFilter}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-img placeholder-hidden  flex align-end margin-bottom-lg " :style="'background-image: url('+imgURL+'site-bg.png '+');width: 750upx;height: 326rpx;background-size:cover'">
			<image @tap="goBack" :src="imgURL+'site-back.png'" width="20upx" mode="widthFix" class="position-ab site-back">
			</image>
			<view class="flex-sub">
				<view class="cu-list menu margin padding-sm  radius my-shadow  bg-white yu-card-xuan">
					<view class="cu-item ">
						<view class="content">
							<view class="strong padding-bottom-xs">
								{{siteInfo.siteName}}
							</view>
							<view class="font-12 color-999 site-label text-cut">
								{{siteInfo.address}}
							</view>
							<view class="font-12 color-999 site-label text-cut">
								营业时间 00:00 至 23:59
							</view>
						</view>
						<view class="action " @tap="openMap">
							<view class="oil-main-color">
								<my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon>
								{{siteInfo.juli|distanceFilter}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="placeholder padding-top-big  margin-bottom">
			<view class="TreatmentLiquid_box" >
				<view class="TreatmentLiquid_box_name">
					尾气处理液
				</view>
				<view class="">
					{{TreatmentLiquid | saleMoney}}元/升
				</view>
			</view> 
		</view> 
		<view class="ureaMakeScan_carNumber">
			<view class="ureaMakeScan_carNumber_box">
				<view class="ureaMakeScan_carNumber_icon">
					<image src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/site-car.png" mode=""></image>
				</view>
				<view class="ureaMakeScan_carNumber_input">
					<input type="text" class="ureaMakeScan_carNumber_input_input" placeholder="请输入车牌号" :value="carNumber" @blur="carNumbers"  /> <image src="../../static/img/rightA.png"   mode=""></image>
				</view>
			</view>
		</view>
		<view class="ureaMakeScan_money">
			<view class="ureaMakeScan_money_top">
				<view  class="ureaMakeScan_money_top_box">
					<view class="ureaMakeScan_money_top_title">尿素机升数</view>
					<view class="ureaMakeScan_money_top_input">
						<input type="text" :value="oliMoney"  @blur="moneyNumber"/> L
					</view>
				</view>
				<view  class="ureaMakeScan_money_top_money">
					￥ {{payMoney}}
				</view> 
			</view>
			<view class="ureaMakeScan_money_bottom">
				<view class="ureaMakeScan_money_bottom_list" v-for="(list,i) in moneyList" :key='i' @click="changeMoeny(list)">
					{{list.title}}
				</view>
			</view>
		</view>
		<view class="ureaMakeScan_button">
				<view class="ureaMakeScan_button_text">
					<view class="ureaMakeScan_button_text_title">合计</view>
					<view class="ureaMakeScan_button_text_money">{{payMoney | moneyF }} 元</view>
				</view>
				<view class="btn bg-white btns" @click="payBtn">立即下单</view> 
			</view>
		</view>
	</view>
</template>

<script>
	import ureaItem from '@/components/site-item/urea-site-item.vue'
	import priceTab from '../components/price-tab.vue' 
	import ureaSiteApi from '../../../api/urea_site.js'
	import ureaFinanceApi from '../../../api/urea_finance.js'
	export default {
		components: {
			priceTab 
		},
		data() {
			return {
				payMoney:0,
				carNumber:'',
				moneyList:[
					{
						title:'5L',
						value:5
					},{
						title:'10L',
						value:10
					},{
						title:'15L',
						value:15
					},{
						title:'20L',
						value:20
					},{
						title:'25L',
						value:25
					},
				],
				show:true,
				value:'1',
				showtitle:false,
				radio: 'B',
				BrandLists:[],
				mainURL: this.global.mainURL,
				imgURL: this.global.imgURL,
				active: 0,
				ColorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				siteInfo: {},
				activeCur: '',
				activePay: null,
				qrcodePay: null,
				siteId: '',
				activeChannelCode: '',
				secondChannelCode: '',
				distinguish:'',
				TreatmentLiquid:''  ,
				oliMoney:null,
				ns:''
			}
		}, 
		onLoad(option) { 
		 var oilItem = JSON.parse(option.item)
			this.ns = option.sn
			this.siteInfo = oilItem 
			this.distinguish = oilItem.formats
			this.TreatmentLiquid = oilItem.price 
			// this.checkOrder()
			console.log(oilItem)
			console.log(this.siteInfo)
			// console.log(this.distinguish)
		},
		methods: { 
			isNumber(value){ //判断是否为正常数字
				if(value == ''){
					return false
				}
				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
				}
			},
			carNumbers(e){
				console.log(e)
				this.carNumber = e.detail.value
			}, 
			moneyNumber(e){
				console.log(e.detail.value)
				// let number = Number(e.detail.value), 
				let money = e.detail.value
				if(money ==''){
					money = '0'
				} 
				var that = this
				let	Liters = Number(this.TreatmentLiquid)
				let isNumber = this.isNumber(money)
				if(!isNumber){
					uni.showToast({
						title:'请输入正确金额',
						icon:'none'
					})
					return
				} 
				money = (money.match(/^\d*(\.?\d{0,1})/g)[0]) || null
				this.$nextTick(() => {
					that.oliMoney= money
				}) 
				this.oliMoney = money
				let number =  Number(money) , payMoney= number *Liters
				this.payMoney = (parseInt(payMoney * 100) / 100).toFixed(2)  
			},
			payBtn(){ 
				let user = uni.getStorageSync('user')
				console.log(this.carNumber)
				console.log(this.oliMoney)
				if(this.oliMoney == null  || this.oliMoney == ''  || this.oliMoney == 0){
					uni.showToast({
						title:'请输入加注升数',
						icon:'none'
					})
					return
				}
				if(this.carNumber  == '' ){
					uni.showToast({
						title:'请输入车牌号',
						icon:'none'
					})
					return
				}
				let data = {
					siteId:this.siteInfo.siteId,
					driverId:user.id,
					oilCardNature:'',
					accountCardCode:'',
					driverPhone:user.userPhone,
					salePrice:this.TreatmentLiquid,
					sn:this.ns,
					oldRealLiter:this.oliMoney+'',
					oldRealAmount:this.payMoney,
					payStyle:'3',
					vehicleNo:this.carNumber,
					belongCompanyId:'',
				}
				console.log(data)
				ureaFinanceApi.prepaidOrderGeneration(data).then( res=>{ 
					uni.setStorageSync('ureaOrderMade', res.data)
					uni.redirectTo({ 
						url: '/BagStation/pages/makeOrder/orderPaying?type=urea'
					}) 
				})
			},
			changeMoeny(list){  
				let	Liters = Number(this.TreatmentLiquid)
				  this.oliMoney = list.value
				 this.payMoney = list.value *Liters
				 
			},
			checkOrder(){
				let uers = uni.getStorageSync('user') 
				ureaFinanceApi.findUnpaidOrders(uers.id).then(res=>{
					console.log(res)
					if(!res.data){
						console.log('当前无未支付的订单')
					}
				})
			}, 
			valChange(e){
				console.log(e)
			},
			backTohome(){	 
				uni.switchTab({
					url:'../../../pages/tabbar/home/home'
				})
			},
			hidendialog(){
				this.showtitle =false
			},
			gotoPay(){ 
				uni.navigateTo({
					url: `/BagStation/pages/makeOrder/makeOrder?siteId=${this.siteId}&activeCur=${this.activeCur}`
				})
			},
			getChannelCode(val, sec) {
				this.activeChannelCode = val
				this.secondChannelCode = sec
			},
			siteQrPay() { 
				// let siteId = 
				uni.navigateTo({
					url: `/BagStation/pages/stationDetail/stieQr?siteId=${this.siteId}&activeChannelCode=${this.activeChannelCode}&secondChannelCode=${this.secondChannelCode}`
				})
			},
			getSiteInfo(id) {
				console.log('进入获取油站信息') 
				ureaSiteApi.findSiteDetails(id).then( res=>{
					console.log(res)
					this.BrandLists = res.data
				}) 
			},
			makePay() {
				console.log(this.siteInfo.juli)
				if(this.siteInfo.juli > 1000 ){
					this.showtitle = true
				}else{ 
					uni.navigateTo({
						url: `/BagStation/pages/makeOrder/makeOrder?siteId=${this.siteId}&activeCur=${this.activeCur}`
					})
				}
			},
			onChangePayQr(val) {
				this.qrcodePay = val
			},
			onChangePay(val, active) {
				this.activePay = val
				this.activeCur = active
			},
			openPlugin() {
				const key = this.qqKey; //使用在腾讯位置服务申请的key  
				const referer = '星油云'; //调用插件的app的名称  
				const endPoint = JSON.stringify({
					name: '油站',
					latitude: 39.89631551,
					longitude: 116.323459711
				});

				wx.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				})

			},
			goBack() { 
				uni.navigateBack({

				})
			},
			selectRadio() {
				this.radio === 'A' ? this.radio = '' : this.radio = 'A'
			},
			openMap() {
				let that = this
				uni.openLocation({
					latitude: this.siteInfo.latitude,
					longitude: this.siteInfo.longitude,
					name: this.siteInfo.siteName,
					address: this.siteInfo.address,
					scale: 12,
					success: function() {
						// console.log('success')
					},
					fail: (error) => {
						// console.log('error')
						// console.log(error)
					},
					complete: () => {
						// console.log('made')
					},

				})

				var map = uni.createMapContext('map')
				map.moveToLocation()
			}
		},
		filters: {
			saleMoney(value){
				return	(Math.floor(value * 100) / 100 ).toFixed(2)
			},
			moneyNumbers(value){
				if(!value){
					return '0.00'
				}
			},
			distanceFilter(value) {
				if (value) {
					return value > 1000 ? ((value / 1000).toFixed(2) + 'km') : (value + 'm')
				}
			},
			usernameF(value) {
				if (value) {
					return value.substr(0, 1) + '**'
				} else {
					return '匿名'
				}
			},
			moneyF(value){
				return (parseInt(value * 100) / 100).toFixed(2)
			},
			plateNumberF(value) {
				if (value) {
					return value.substr(0, 2) + '*****'
				} else {
					return '车牌号已隐藏'
				}
			}
		}
	}
</script>

<style scoped>
	.ureaMakeScan_carNumber_input_input{
		width: 84%;
		    font-size: 14px;
		    flex: 0 0 auto;
		    padding-bottom: 2%;
	}
	.ureaMakeScan_carNumber_input image{
		    width: 20px;
		    height: 20px;
		    flex: 0 0 auto;
	}
	.ureaMakeScan_button{
		    position: fixed;
		    left: 0;
		    right: 0;
		    bottom: 20%;
		    display: flex;
		    justify-content: space-around;
		    align-items: center;
	}
	.btns{
		width: 42%;
		background: red;
		height: 94rpx;
		border-radius: 20rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}
	.ureaMakeScan_button_text{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 4%;
	}
	.ureaMakeScan_button{
		position: fixed;
		bottom: 10%;
		left:6%;
		right:4%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #efefef;
		border-radius: 20rpx;
		box-shadow: 5px 5px 5px #efefef; 
	}
	.ureaMakeScan_button_text_title{
		font-size: 30rpx;
		font-weight: 700;
		color: #333;
	}
	.ureaMakeScan_button_text_money{
		color: red;
		font-size: 30rpx;
		font-weight: 700; 
	}
	.ureaMakeScan_button_text{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.ureaMakeScan_button{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.ureaMakeScan_money_bottom{
		display: flex;
		justify-content:space-between;
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}
	.ureaMakeScan_money_bottom_list{
		border: 1px solid #EFEFEF;
		color: #a9a9a9;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		box-shadow: 5px 5px 5px #eeeeee;
		/* margin-right: 4%; */
		padding: 1% 3%;
		font-size: 17px;
		font-weight: 100;
	}
	.ureaMakeScan_money_top{
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    width: 100%;
		margin-bottom: 6%;
	}
	.ureaMakeScan_money_top_box{
		    display: flex;
		    justify-content: flex-start;
		    align-items: center;
	}
	.ureaMakeScan_money_top_title{
		font-weight: 700;
	}
	.ureaMakeScan_money_top_input{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		 
	}
	.ureaMakeScan_money_top_input input{
		border: 0;
		border-bottom: 1px solid #efefef;
		width: 86%;
		margin: 0 9%;
	}
	..ureaMakeScan_money_top_money{
		    font-size: 14px;
	} 
	.ureaMakeScan_money{
		border: 1px solid #f7f7f7;
		width: 90%;
		margin: 0 auto;
		border-radius: 10rpx;
		box-shadow: 2px 3px 5px #efefef;
		padding: 5%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.ureaMakeScan_carNumber{
		border: 1px solid #f7f7f7;
		width: 90%;
		margin: 0 auto;
		border-radius: 10rpx;
		box-shadow: 2px 3px 5px #efefef;
		padding: 5%;
		margin-bottom: 6%;
	}
	.ureaMakeScan_carNumber_box{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.ureaMakeScan_carNumber_icon image{
		width: 50rpx;
		height: 50rpx;
	}
	.ureaMakeScan_carNumber_input{
		width: 80%;
		flex: 0 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.ureaMakeScan_carNumber_input input{
		border: 0;
		border-bottom: 1px solid #EEEEEE;
	}
	.TreatmentLiquid_box_name{
		color: #333;
	}
	.BrandList_item_mian_left{
		font-size:30rpx;
		color: #333;
	}
	.BrandList_item_mian_main{
		font-size: 35rpx;
		color: #FF9000;
		font-weight: 700;
	}
	.BrandList_item_mian{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 4%;
	}
	.BrandList_item{
		margin-bottom:10%;
	}
	.BrandList_item_title{
		font-size: 32rpx;
		font-family: 'PingFang SC';
		font-weight: bold;
		color: #333333;
		margin-bottom: 3%;
	}
	.BrandList{
		padding: 0 8%;
	}
	.button_bottom{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.characteristic_box{
		padding: 5% 8%;
	}
	.characteristic_box_title{
		font-size: 30rpx;
		font-family: 'PingFang SC';
		font-weight: bold;
		color: #333333;
		margin-bottom: 3%;
	}
	.characteristic_box_list{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
	.characteristic_box_list text{
		border: 2rpx solid #FF9000;
		color: #FF9000;
		padding: 1% 2%;
		font-size: 24rpx;
		margin-right: 2%;
	}
	.padding-top-big{
		padding: 12% 0 2%;
	}
	.TreatmentLiquid_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 700;
		font-size: 34rpx;
		color: red;
		padding: 0 8%;
	}
	.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;
	}.close-icon{
	position: absolute;
	right: 2%;
	top: 2%;
}
.dialog-box{
	position: relative;
}
.text-centerS{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.red_btn{
	color: #FFFFFF;
	background-color: #fe0505;
}
.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;
	}



	.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;
	}
</style>
