<template>
	<view @tap.stop='showMiniBtn = false' >
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">订单支付结果</block>
		</cu-custom>
		<view class="bg-main-oil padding-bottom">
			<view class="text-center  text-bold text-xl padding-xl">
				{{order.orderStatus|statusConduct}}
			</view>
		</view>
		<view class="qr-container margin move-tops padding-bottom-xs text-centers my-shadow" v-if="showQr">
			<view class="qr-container  ">
				<view class="qrimg">
					<view class="qrimg" @tap="newQrString">
						<tki-qrcode ref="qrcode" cid="2" loadMake :val="val" :size="250" unit="upx"
							background="#fff" foreground="#000" pdground="#000" :icon="iconUrl" iconSize="40" onval
							:usingComponents="usingComponents" showLoading  />
					</view>
				</view>
			</view>
			<view class="text-center  text-sm  justify-center align-center flex">
				<image src="../static/img/YDJY.png" mode="" style="width: 60upx;height:60upx;" class="margin-right-sm"></image>
				<text>壳牌</text>
			</view>
			<view class="text-center padding-top text-sm margin-bottom">
				提示：该二维码每隔3分钟自动刷新一次
			</view>
		</view>
		<view class="move-top bg-white radius my-shadow solid-top margin margin-top-0">
			<!-- <view class=" text-center padding-sm margin-bottom-sm" v-if="status=='success'">
				请提醒加油员使用
				<text class="oil-main-color">“星油云站”</text>
				进行订单核实
			</view> -->

			<view class="padding">
				<view class="padding-bottom-xs margin-bottom-xs dashed-bottom">
					<view class="padding-tb-xs text-left" @tap="onCopy(order.orderSerialNumber)">
						订单编号：
						<text class="fr">{{order.orderSerialNumber?order.orderSerialNumber:''}} <text class="cuIcon-copy padding-left-xs"></text></text>

					</view>
				</view>
				<view class="cu-list menu solid-bottom">
					<view class="cu-item arrow" @tap="toDetail(order)">
						油站：
						<text class="fr">{{order.siteName?order.siteName:''}}</text>
					</view>
				</view>

				<view class="padding-tb-xs text-left">
					油品油枪：
					<text class="fr nowrap">
						{{order.oilsCode?order.oilsCode+' ':'' }} {{order.oilsBar?order.oilsBar+'号枪':'未选择油枪'}} </text>
				</view>
				<view class="padding-tb-xs  text-left">
					加油升数：
					<text class="fr">{{order.volume?order.volume :'未输入' | moneyFormath}}L</text>
				</view>
				<view class="padding-tb-xs  text-left">
					油站价格：
					<text class="fr">{{order.sitePrice?order.sitePrice+'￥/L':'暂无'}}</text>
				</view>
				<view class="padding-tb-xs  text-left">
					优惠价格：
					<text class="fr">{{order.realPrice?order.realPrice+'￥/L':'暂无'}}</text>
				</view>
				<view class="padding-tb-xs   text-left">
					加油员：
					<text class="fr">{{order.siteUser}}</text>
				</view>
				<view class="padding-tb-xs flex  text-left">
					<view class="flex-sub">
						加油渠道： <text class="fr">{{order.channelCode|channelCodeFamt}}</text>
					</view>
					<!-- <view class="flex-sub" v-if="tyPayMethod==2">
						<third-party-voucher :pay-data="tySqRes" :show-third-result="showThirdResult" @hideModal="hideModal"
						 @onShowThirdResult="onShowThirdResult"></third-party-voucher>
					</view> -->
				</view>
				<view class="dashed-top margin-top-xs padding-top-sm">
					<view class="padding-tb-xs text-left">
						加油机金额：<text class="fr">{{order.sitePriceAmount |moneyFormat}}</text>
						<!-- <text class="fr">{{order.xoilDiscountAmount>0?order.realAmount+order.xoilDiscountAmount:order.realAmount|moneyFormat}}</text> -->
					</view>
				</view>
				<view class="padding-tb-xs text-left">
					星油优惠：
					<text class="text-red fr">{{order.xoilDiscountAmount>0?order.xoilDiscountAmount:'xxx.x'|moneyFormat}}</text>
				</view>
				<view class="padding-tb-xs text-left">
					优惠券：
					<text class="text-red fr">{{order.couponMark==1?order.couponDiscountAmount:'未使用优惠券'}}</text>
				</view>

				<view class="padding-tb-xs text-left">
					合计：
					<text class="text-red text-bold text-lg fr">{{order.payRealAmount>0?order.payRealAmount:'xxx.x' }}</text>
				</view>
				<view class="padding-tb-xs text-left">
					支付方式：
					<text class="   fr" v-if='order.orderSource ==  "SXF_WECHAT_MINIAPPS" '>随行付支付</text>
					
					<text class="   fr" v-else>{{order.payAccountType==0?'个人账户支付':'企业账户支付'}}</text>
				</view>
				<view class="padding-tb-xs text-left">
					订单创建时间：
					<text class="   fr">{{order.createTime}}</text>
				</view>
				<view class="padding-tb-xs text-left" v-if="order.payTime">
					订单支付时间：
					<text class="   fr">{{order.payTime}}</text>
				</view>
				<view class="dashed-top margin-top-xs padding-top-sm">
					<view class="padding-tb-xs text-left">
						加油车牌：
						<text class=" fr">{{order.plateNumber?order.plateNumber:'暂无'}}</text>
					</view>
				</view>
				<view class="padding-tb-xs text-left">
					加油司机：
					<text class=" fr">{{order.customerName}} {{order.customerCode}}</text>
				</view>
				<view class="padding-tb-xs text-left" v-if="order.oilCardNature">
					油卡性质：
					<text class=" fr">{{order.oilCardNature|oilCardNatureF}}</text>
				</view>
			</view>
		</view>
		 <view class="padding-md padding-right padding-left-xl  text-right position-re" @tap.stop="showMiniBtn=true"
			v-if="order.orderStatus == 1 ">
			<view class="radius shadow mini-btn bg-white padding-xs flex-wrap position-ab ab-rihgt-bootm"
				v-if="showMiniBtn"> 
				<!-- <view class="margin-bottom-sm ">
					<button class="cu-btn nowrap  bg-white" @tap="deleteOrder(item.orderSerialNumber)">删除</button>
				</view> -->
				<!-- <view class=" ">
					<button class="cu-btn nowrap " @tap="showMiniBtn=false">收起</button>
				</view> -->
			 	<view class="margin-bottom-sm">
					<button class="cu-btn nowrap bg-white" @tap="gotoInvoicing()">查看开票信息</button>
				</view>
			</view>
			<text class="text-lg">更多</text>
		</view> 
		<view class="padding bg-white fixed-bottom">
			<view class="flex margin-bottom" v-if="order.orderStatus==0">
				<button class="cu-btn block flex-sub  lg bg-main-oil " @tap="makePay">立即支付</button>
				<button class="cu-btn block flex-sub lg margin-left" @tap="cancelOrder">取消订单</button>
			</view>
			<button class=" cu-btn bg-white oil-main-color block flex-sub lg  " open-type="contact"><text class="cuIcon-service padding-right-sm"></text>
				在线客服</button>
			<!-- <button class="cu-btn block lg margin-top " @tap="delOrder">删除订单</button> -->
		</view>
		<view class="padding placeholder-hidden">
			<view class="flex margin-bottom" v-if="order.orderStatus==0">
				<button class="cu-btn block flex-sub  lg bg-main-oil " @tap="makePay">立即支付</button>
				<button class="cu-btn block flex-sub lg margin-left" @tap="cancelOrder">取消订单</button>
			</view>
			<button class=" cu-btn bg-white oil-main-color block flex-sub lg  " open-type="contact"><text class="cuIcon-service padding-right-sm"></text>
				在线客服</button>
			<!-- <button class="cu-btn block lg margin-top " @tap="delOrder">删除订单</button> -->
		</view>
	</view>
</template>

<script>
	import ThirdPartyVoucher from '../pages/components/third-party-voucher/third-party-voucher.vue'
	import toilApi from '@/api/toil.js'
	import orderApi from '@/api/oil-order.js'
	import oilSiteApi from '@/api/oil-site.js'
	import tkiQrcode from "../pages/components/tki-qrcode/tki-qrcode.vue" //二维码生成器
	import financelApi from '@/api/oil-finance.js'
	export default {
		components: {
			ThirdPartyVoucher,
			tkiQrcode
		},
		data() {
			return {
				showMiniBtn: false,
				showQr:false,
				val:'',
				showThirdResult: false,
				id: '',
				order: {},
				tyIntervalCount: 0,
				tySqRes: {},
				tyPayMethod: null


			}
		},
		onShareAppMessage(res) {
			return {
				title: '订单' + this.order.orderSerialNumber,
				path: `/BagStation/orderDetail/orderDetail?id=${this.order.orderSerialNumber}`,
				imageUrl: 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/login-bg.png',
				desc: '加油超便宜',
				content: 'this.share.content',
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		watch:{
			showMiniBtn:function(){
				// setTimeout(()=>{
				// 	this.showMiniBtn = false
				// },1000)
			}
		},
		methods: {
			newQrString() {
				this.getOrderQrCode()
			},
			getOrderQrCode(){ 
				oilSiteApi.getOrderQrCode(this.order.orderSerialNumber).then( (res)=>{
					console.log(res)
					this.val = res.data
					if(res.code == 40000){
						this.showQr = false  
					}else if(res.code == 20000){
						this.showQr = true
						this.val =res.data.codeStr
					}
				} )
			},
			gotoInvoicing() { //前往开票
				console.log(this.order,'+++++++++++++')
				financelApi.checkStatus(this.order.orderSerialNumber).then((res) => {
					console.log('这里是check是否开发票')
					console.log(res)
					console.log(this.order.realAmount)
					if (res.code == 20000) {
						if (res.data.openInvoicMark === 'TO_INVOICED') {
							uni.navigateTo({
								url: '/BagStation/InvoiceProgress/InvoiceProgress?orderId=' + this.order
									.orderSerialNumber + '&&payRealAmount=' + this.order.payRealAmount
							})
						} else {
							uni.navigateTo({
								url: '/BagStation/orderInvoicing/orderInvoicing?orderId=' + this.order
									.orderSerialNumber + '&&customerId=' + this.order.customerId + '&&payRealAmount=' + this.order.payRealAmount +
									'&&realAmount=' + this.order.realAmount + '&&code=' + 1
							})
						}
					}
				})
			},
			// 三方支付结果弹窗开始
			hideModal() {
				this.showThirdResult = false
			},
			// getThirdStatus() {
			// 	if (this.tyIntervalCount > 5 || this.tySqRes.otherOrderStatus != 0) {
			// 		this.onShowThirdResult()
			// 	} else {
			// 		setTimeout(() => {
			// 			this.queryOrderStatusSq()
			// 		}, 500)
			// 	}
			// },
			onShowThirdResult() {
				this.showThirdResult = true
			},
			// 上汽联名卡支付状态
			// queryOrderStatusSq() {
			// 	toilApi.queryOrderStatusSq(this.id).then(res => {
			// 		if (res.code == 20000) {
			// 			this.tySqRes = res.data
			// 			this.tyIntervalCount++
			// 			// otherOrderStatus //三方支付状态 0：待通知 1：通知成功 -1：通知失败
			// 			// console.log('联名卡支付结果', res.data)
			// 			this.getThirdStatus()
			// 		}
			// 	})
			// },
			
			// 三方支付结果弹窗结束
			onCopy(id) {
				uni.setClipboardData({
					data: id,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '订单号复制成功'
						})
					}
				})
			},
			getOrderInfo() {
				orderApi.selOrder(this.id).then(res => {
					if (res.code == 20000) {
						this.order = res.data
						uni.setStorageSync('oilItem', res.data)
							this.getOrderQrCode()
						if (res.data.payMethod == 2) {
							this.tyPayMethod = res.data.payMethod
							// this.queryOrderStatusSq()
						}
					}
				})
			},
		toDetail(item) {
			var itemS = JSON.stringify(item)
			uni.setStorageSync('siteInfo',itemS) 
			uni.navigateTo({
				url: `/BagStation/pages/stationDetail/stationDetail`,
					fail: (err) => {
						// console.log(err)
					},
					success: () => {
						// console.log('err')
					}
				})
			},
			cancelOrder() {
				orderApi.cancelOrder(this.id).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						})
						setTimeout(() => {
							this.$emit('refresh')
						}, 1000)

					}
				})
			},
			makePay() {
				orderApi.getOrderPayInfo(this.id).then(res => {
					if (res.code == 20000) {
						uni.setStorageSync('orderMade', res.data)
						uni.navigateTo({
							url: '/BagStation/pages/makeOrder/orderPaying'
						})
					}
				})
			},
			delOrder() {
				orderApi.delOrder(this.id).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tabbar/home/home'
							})
						}, 1000)
					}
				})
			}

		},
		onLoad(option) { 
			this.id = option.id
			this.getOrderInfo()
			uni.showShareMenu()
			let _that = this
			this.timeinterval = setInterval(() => {
				console.log('1')
				_that.newQrString()
			}, 1000 * 60 * 3);
		},
		filters: {
			moneyFormat(value) {
				if (value != 'xxx.x') {
					console.log(value)
					return  (parseInt(value * 100) / 100).toFixed(2)
				} else {
					return value
				}
			},
			statusConduct(value) {
				//  备注：订单状态 0：待支付， 1：已支付 ，-1：支付失败 ，2：已取消，3：已退款
				// switch value
				// case "0"
				// return '待支付'
				switch (value + '') {
					case '0':
						return '订单待支付'
					case '1':
						return '订单已支付'
					case '-1':
						return '订单支付失败'
					case '2':
						return '订单已取消'
					case '3':
						return '订单已退款'
				}
			},
			moneyFormath(value) {
				console.log(value) 
				if (value != 'xxx.x') { 
					let number =  parseFloat(value).toFixed(2)
					return number
				} else {
					return value
				}
			},
			oilCardNatureF(value) {
				//  备注 油卡性质 1：个人 2：企业 3：外请
				// switch value
				// case "0"
				// return '待支付'
				switch (value + '') {
					case '1':
						return '个人'

					case '2':
						return '企业'
					case '3':
						return '外请'
				}
			},
			channelCodeFamt(value) {
				if (value) {
					// 渠道编码 ( XOIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
					switch (value) {
						case 'XOIL':
							return '星油'
						case 'WJY':
							return '万金油'
						case 'LV':
							return '老吕（找油网）'
						case 'TY':
							return '团油'
						case 'YDJY':
							return '一点加油（壳牌）'
					}
				}
			},
		}
	}
</script>

<style scoped>.move-tops{
	transform: translateY(-17px);
}
.bg-red{
	background-color: red;
}
.text-centers {
      text-align: center;
      width: 90%;
      margin: 0 auto;
      border-radius: 7px;
      overflow: hidden;
}
	.move-top {
		margin-top: -2rem;
	}

	.ab-rihgt-bootm {
		right: 110upx;
		bottom: 10upx;
	}
	.move-top {
		margin-top: -2rem;
	}
</style>
