<template>
	<view class="content bg-white position-re">
		<!-- <cu-custom class="bg-main-oil" isBack bgColor="bg-main-oil">
			<block slot="content">中石化紫云路</block>
			<block slot="backText">返回</block>
		</cu-custom> -->
		<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 v-if="isShow" @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"  style="overflow: hidden;"   >
						<view style="width: 100%; display: flex;" class="strong padding-bottom-xs"  >
						<text style="width: 100%;flex: 1;" class="text-cut">{{siteInfo.siteName}}</text>
							<!-- <text v-if="siteInfo.siteLevel" class="cu-tag round bg-self-yellow  yu-tag text-xs tag-red" style="margin-left: 20px;">{{siteInfo.siteLevel}}级</text> -->
						</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 style="" 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 margin-bottom">

		</view>
		<!-- 价格 -->
		<price-tab @onChangeChannelCode="getChannelCode" @onChangePayQr="onChangePayQr" @onChangePay="onChangePay"
		 :channel-list="siteInfo.oilSiteChannelDetailsVos" :channelPrice="siteInfo"></price-tab>
		 <!-- 客户评价 -->
		 <view class="bg-gray padding-top-sm " v-if="siteInfo.xoilUreaPriceVos">
		 	<view class="bg-white padding ">
		 		<text>尿素</text>
		 		<view class="padding-top-sm">
		 			<view class="nsjz-flex">
		 				<view class="nsjz-flex-left">
		 					<image :src="ureaproductType == 2?areaLogoUrl1:areaLogoUrl" mode="" style="width: 36rpx;height: 36rpx;"></image>
							<view class="nsjz-flex-left-body">
								<text>{{ureaproductType == '2'?'品牌桶装尿素':'加注机'}}</text>
								<text v-if="ureaproductType == 2">{{areaPrice}}元/桶<text style="font-size: 12px;margin: 0;">起</text></text>
								<text v-if="ureaproductType == 1">￥{{areaPrice}}/L</text>
							</view>
		 				</view>
						<view class="nsjz-flex-botton" @tap="areaJump">
							{{ureaproductType == 2?'去购买':'去加注'}}
						</view>
		 			</view>
					<view style="margin-left: 56rpx;font-size: 12px;">
						加注支付前,请与油站工作人员确认
					</view>
		 		</view>
		 	</view>
		 
		 </view>
		<!-- 客户评价 -->
		<view class="bg-gray padding-top-sm ">
			<view class="bg-white  padding ">
				<text>客户评价</text>
				<view class="padding-top-sm">
					<text class="cu-tag margin-right-xs"> 服务周到</text>
					<text class="cu-tag margin-right-xs">交通便利</text>
					<text class="cu-tag margin-right-xs">便捷高效</text>
				</view>
			</view>

		</view>

		<!-- 客户订单 -->
		<view class="bg-gray padding-top-sm ">
			<view class="cu-list bg-white no-border  menu padding-top ">
				<text class="padding margin-top">客户订单</text>
				<view class="cu-item " v-for="(itm,index) in siteInfo.oilSiteOrderInfoVos" :key="index">
					<text class="text-black">
						{{itm.userName|usernameF}} {{itm.plateNumber|plateNumberF}}
					</text>
					<text class=" text-black ">加 {{itm.oilsCode}} {{itm.volume}}L 节省 <text class="text-red">
							￥{{itm.discountAmount}}</text></text>
				</view>
				<view class="cu-item no-border" v-if="siteInfo.oilSiteOrderInfoVos && !siteInfo.oilSiteOrderInfoVos.length">
					暂无
				</view>

			</view>
			<!-- 底部去支付 -->
			<view class="" v-if="activePay||qrcodePay">
				<view class="btn bg-white placeholder-hidden">
					<view class="flex bg-white padding flex-direction">
						<button class="cu-btn block bg-main-oil lg" v-if="activePay" @tap="makePay">
							<image class="site-icon margin-right-sm" :src="imgURL+'site-yz.png'" mode="widthFix">
							</image>
							一键支付
						</button>
						<button v-if="qrcodePay" class="cu-btn block bg-main-oil margin-tb-sm  lg" @tap="siteQrPay">
							<image class="site-icon margin-right-sm" :src="imgURL+'site-qr.png'" mode="widthFix">
							</image>
							二维码支付
						</button>
					</view>
				</view>
				<view class="btn bg-white fixed ">
					<view class="flex bg-white padding flex-direction">
						<button class="cu-btn block bg-main-oil lg" v-if="activePay" @tap="makePay">
							<image class="site-icon margin-right-sm" :src="imgURL+'site-yz.png'" mode="widthFix">
							</image>
							一键支付
						</button>
						<button v-if="qrcodePay" class="cu-btn block bg-main-oil margin-tb-sm  lg" @tap="siteQrPay">
							<image class="site-icon margin-right-sm" :src="imgURL+'site-qr.png'" mode="widthFix">
							</image>
							二维码支付
						</button>
					</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 v-if="isShow" class="cu-tn btn-box red_btn" @tap="backTohome">
						返回油站列表
					</view>
					<view class="cu-tn btn-box" @tap="gotoPay">
						确认下单
					</view>
				</view>
			</view>
		</view> 
	</view>
</template>

<script>
	import oilSiteApi from '@/api/oil-site.js'
	import priceTab from '../components/price-tab.vue'
	export default {
		components: {
			priceTab
		},
		onHide() {
			// console.log('这里是hiden')
			this.innerAudioContext?.stop()
		},
		onUnload() {
			// console.log('这里是卸载页面')
				this.innerAudioContext?.stop()
		},
		data() {
			return { 
				showtitle:false,
				radio: 'B',
				areaLogoUrl:'../../../static/img/xy-jyz.png',
				areaLogoUrl1:'../../../static/img/xy-ns.png',
				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: '',
				ureaNum:false,
				ureaproductType:'',
				areaPrice:'',
				isShow:true
			}
		},
		onHide() {
			this.innerAudioContext?.stop()
		},
		onLoad(option) {
			// let siteId = uni.getStorageSync('siteId') || 
			if(option.siteId && !option.customerJump) {
				this.isShow = false
				this.siteId = option.siteId
				this.getSiteInfo(option.siteId) 
				uni.setStorageSync('siteId',option.siteId)
				return 
			}
			// console.log(option)
			// if(option.channerCode == 'TY'){
			// 	var oilItem =  uni.getStorageSync('OtherSiteInfo') 
			// 	// console.log(oilItem) 
			// }else{
			// 	let obj = option.item,
			// 	var oilItem = JSON.parse(option.item)  
			// } 
			let oilItem = option.channerCode == 'TY' ? uni.getStorageSync('OtherSiteInfo') : option.item ? JSON.parse(option.item) : {siteId:option.siteId}
			// if(oilItem.secondChannelCode === 'SQ'){
			// 	oilItem.listTag = oilItem.sqSiteBelong === 'JKJY' ? '集卡加油' :'上汽联名卡'
			// }
			uni.setStorageSync('oilItem',oilItem) 
			this.getSiteInfo(oilItem.siteId)
			this.siteId = oilItem.siteId
			// if(option.item.ureaNumber!='0'){
			// 	this.ureaNum = true
			// }else{
			// 	this.ureaNum = false
			// }
			if(oilItem.listTag == '万金油'){
				this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/wanjinyou.mp3'
			}else if(oilItem.listTag == '星油'){
				this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/xingyouyunzhan.mp3'
			}else if(oilItem.listTag == '壳牌'){
				this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/qiaopainew.mp3'
			}else if(oilItem.listTag == '上汽联名卡' ){
				this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/shangqi.mp3'
			}else if(oilItem.listTag == '集卡加油') {
				this.audioUrl = 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/shangqijika.mp3'
			}
			this.ContextAudio(this.audioUrl)
		},
		methods: {
			areaJump(){
				// var itemS = {
				// 	siteId:this.siteInfo.xoilUreaPriceVos[0].siteId
				// }
				uni.navigateTo({
					url: '/BagStation/pages/ureaDetail/ureaDetail?item='+ JSON.stringify(this.siteInfo.xoilUreaPriceVos[0]),
					fail: (err) => {
						// console.log(err)
					},
					success: () => {
						// console.log('err')
					}
				})
			},
			// 生成音频文件
			ContextAudio(url){
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.src = url;
				this.innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
				this.innerAudioContext.onError((res) => {
				  console.log(res)
				});
			},
			hidendialog(){
				this.showtitle =false
			},
			backTohome(){
				uni.switchTab({
					url:'../../../pages/tabbar/home/home'
				})
			},
			// 距离过远提示弹窗
			makePay() {
				console.log(this.siteInfo.juli)
				if(this.siteInfo.juli > 1000 ){
					this.showtitle = true
				}else{
					this.innerAudioContext?.stop()
					uni.navigateTo({
						url: `/BagStation/pages/makeOrder/makeOrder?siteId=${this.siteId}&activeCur=${this.activeCur}`
					})
				}
				
			},
			getChannelCode(val, sec) {
				this.activeChannelCode = val
				this.secondChannelCode = sec
			},
			siteQrPay() {
				this.innerAudioContext?.stop()
				// let siteId = 
				uni.navigateTo({
					url: `/BagStation/pages/stationDetail/stieQr?siteId=${this.siteId}&activeChannelCode=${this.activeChannelCode}&secondChannelCode=${this.secondChannelCode}`
				})
			},
			getSiteInfo(id) {
				let data2 = {
					...uni.getStorageSync('location'),
					siteId: id
				}
				oilSiteApi.getSiteDetails(data2).then(res => {
					console.log('getSiteDetails',res)
					if (res.code == 20000) {
						this.siteInfo = res.data
						if(this.siteInfo.xoilUreaPriceVos){
							var areaPriceList = []
							this.siteInfo.xoilUreaPriceVos.forEach(item =>{
								if(item.productType == '1'){
									this.ureaproductType = 1
								}else{
									this.ureaproductType = 2
								}
								areaPriceList.push(item.guidePrice)
							})
							this.areaPrice = Math.min(...areaPriceList)
							console.log(Math.min(...areaPriceList),areaPriceList,'对对对对对对多多多多')
						}
					}else if(res.code == 40000){
						uni.showModal({
						    title: '提示',
						    content: res.msg,
							showCancel:false,
						    success: function (res) {
						        if (res.confirm) {
						           uni.switchTab({
						           	url:'../../../pages/tabbar/home/home'
						           })
						        }  
						    }
						});
					}
				})
			},
			gotoPay() {
				this.innerAudioContext?.stop()
				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() {
				// this.innerAudioContext?.stop()
				// uni.navigateBack()
				this.innerAudioContext?.stop()
				let siteId = uni.getStorageSync('siteId')
				siteId 
				? uni.switchTab({url:'../../../pages/tabbar/home/home'}) 
				: 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: {
			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 '匿名'
				}
			},
			plateNumberF(value) {
				if (value) {
					return value.substr(0, 2) + '*****'
				} else {
					return '车牌号已隐藏'
				}
			}
		}
	}
</script>

<style scoped>
	
	.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{
		margin-right: 20rpx;
		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: center;
		/* 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;
		}
	.close-icon{
		position: absolute;
		right: 2%;
		top: 2%;
	}
	.dialog-box{
		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;
		}
		
		.err_btnBox{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		
		.nsjz-flex{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.nsjz-flex-left{
			display: flex;
			align-items: center;
		}
		.nsjz-flex-left-body text{
			font-weight: 600;
			color: #000;
		}
		.nsjz-flex-left-body{
			margin-left: 20rpx;
		}
		.nsjz-flex-left-body text:last-child{
			color: #ff6700;
			margin-left: 30rpx;
			font-size: 32rpx;
		}
		.nsjz-flex-botton{
			color: #FFFFFF;
			border-radius: 5px;
			background: #FF6700;
			padding: 0rpx 34rpx;
			line-height: 30px;
			font-size: 16px;
		}
</style>
