<template>
	<view>
		<cu-custom class="main-totextbar bg-main-oil"  :isPay='true' :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.orderState|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>壳牌 {{test}} {{tsets}}</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="text-center text-xl padding-xl">
					{{order.orderState|statusConduct}}
				</view>
				<view class="text-center text-xl padding-xl text-red" style="padding-top: 10rpx;">
					￥{{order.realAmount?order.realAmount:order.oldRealAmount?order.oldRealAmount:'0'}}
				</view>
				<view class="text-center text-xl padding-xl dashed-bottom" style="display: flex;align-items: center;justify-content: space-around;padding-bottom: 45rpx;" v-if="order.haveRefund == '1'">
					<view class="text-center-balance">
						<text>原金额</text>
						</br>
						<text>{{order.oldRealAmount}}</text>
					</view>
					<view class="">
						-
					</view>
					<view class="text-center-balance">
						<text>退款金额</text>
						</br>
						<text>{{order.refundAmount}}</text>
					</view>
				</view>

				<view class="padding-tb-xs text-left padding-top" style="margin-top: 10px;">
					站点/商家：
					<text class="fr nowrap">
						{{order.siteName}} </text>
				</view>
				<view class="padding-tb-xs  text-left">
					站点类型：
					<text class="fr">{{order.formats == '1'?'加注机':'桶装'}}</text>
				</view>
				<view class="" v-if="dataList.formats == '1'">
					<view class="padding-tb-xs  text-left">
						加注量：
						<text class="fr">{{order.oldRealLiter}}升</text>
					</view>
					<view class="padding-tb-xs  text-left">
						实际加注量：
						<text class="fr">{{order.realLiter?order.realLiter:'0'}}升</text>
					</view>
					<view class="padding-tb-xs  text-left">
						单价：
						<text class="fr">￥{{order.realPrice?order.realPrice:'0'}}/L</text>
					</view>
				</view>
				<view class="" v-if="order.xoilUreaOrderRelations != ''">
					<view class="padding-tb-xs  text-left">
						加注明细
					</view>
					<view class="formats_box">
						<view class="formats_box_list" v-for="(list,index) in order.xoilUreaOrderRelations" :key='index'>
							<view class="formats_box_list_left w30">
								{{list.brandName}}
							</view>
							<view class="formats_box_list_main w30">{{list.options}}/桶<text style="color: red;">X{{list.goodsQuantity}}</text> </view>
							<view class="formats_box_list_right w30">&#165;{{list.totalPrice}}</view> 
						</view>
					</view> 
				</view>
				<view class="padding-tb-xs text-left">
					支付金额：
					<text
						class=" fr">￥{{order.oldRealAmount?order.oldRealAmount:'0'}}</text>
				</view>
				<view class="padding-tb-xs text-left">
					实际金额支付：
					<text class="text-red fr">￥{{order.realAmount?order.realAmount:'0'}}</text>
				</view> 
				<view class="padding-tb-xs text-left">
					支付方式：
					<text
						class="text-red fr">{{order.payStyle|payStyleList}}</text>
				</view>
				<view class="padding-tb-xs text-left">
					司机信息：
					<text class="   fr">{{order.driverName}}-{{order.driverPhone}}</text>
				</view>
				<view class="padding-tb-xs text-left" v-if='order.formats != "2"'>
					加油车牌：
					<text class=" fr">{{order.vehicleNo}}</text>
				</view>
				<view class="padding-tb-xs text-left">
					油卡类型：
					<text class=" fr">{{order.oilCardNature |oilCardNatureName }}</text>
				</view>
			</view>
		</view>
		<view class="move-top bg-white radius my-shadow solid-top margin margin-top-0">
			<view class="padding">
				<view class="">
					<view class="padding-tb-xs text-left">
						交易订单：
						<text class=" fr">{{order.orderId}}</text>
					</view>
				</view>
				<view class="padding-tb-xs text-left">
					交易时间：
					<text class=" fr">{{order.createTime}}</text>
				</view>
			</view>
		</view>
		<view class="padding bg-white ">
			
			<!-- <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> --> 
			<view class="cu-btn bg-white oil-main-color block flex-sub lg" @click="makeCall">
				<text class="cuIcon-service padding-right-sm">联系客服</text>
			</view>
			<view class="padding ">
				<view class=" margin-bottom"  v-if="order.orderState == '0'">
					<button class="cu-btn block flex-sub margin-bottom-sm lg bg-main-oil "
						@tap="makePay">立即支付</button>
					<button class="cu-btn block flex-sub lg "
						@tap="cancelOrder">取消订单</button>
				</view>   
			</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 orderApi from '@/api/oil-order.js'
	import tkiQrcode from "../pages/components/tki-qrcode/tki-qrcode.vue" //二维码生成器
	import oilSiteApi from '@/api/oil-site.js'
	import ureaFinanceApi from '../../api/urea_finance.js'
	export default {
		data() {
			return {
				showQr:false,
				val:'',
				id: '',
				test:null,
				tsets:'',
				order:{} ,
				dataList:{}
			}
		},
		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'
					})
				}
			}
		}, 
		components:{
				tkiQrcode
		},
		methods: {
			// 拨打电话
			makeCall() {
				uni.makePhoneCall({
					phoneNumber: '4008-56-5355' //仅为示例
				})
			},
			// 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
			// 		}
			// 	} )
			// },
			onCopy(id) {
				uni.setClipboardData({
					data: id,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '订单号复制成功'
						})
					}
				})
			},
			getOrderInfo(info) { 
				console.log(info)
				if(info =='1'){
					orderApi.findOneByOrderId(this.orderId).then(res => {
						console.log(res)
						if (res.code == 20000) {
							// uni.setStorageSync('oilItem', res.data) 
							this.dataList = res.data
							this.order = res.data
						}
					}) 
				}else if(info == '2'){
					console.log(this.dataList.orderId,'this.dataList.orderId')
					orderApi.queryBarrelOrderDetails(this.orderId).then(res => {
						if (res.code == 20000) {
							// uni.setStorageSync('oilItem', res.data)
							this.order = res.data
							console.log(res.data)
						}
					})
				}
			},
			cancelOrder() {
				ureaFinanceApi.cancelTheOrder(this.dataList.orderId).then(res => {
					console.log(res)
					if (res.code == 20000) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000) 
					}
				})
			},
			makePay() {
					uni.setStorageSync('ureaOrderMade',this.order)
					uni.navigateTo({
						url: '/BagStation/pages/makeOrder/orderPaying?type=urea'
					})
			},
			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) {  
			// console.log(JSON.parse(option.data))
			let options =option
			console.log(options)
			if(options){  
				if(options.type == 'orderList'){ 
					this.dataList= JSON.parse(option.data)
					let options = JSON.parse(option.data) 
					this.test = options.id
					this.orderId = options.orderId
					this.tsets = options.name
					this.typeFor = options.formats 
					this.getOrderInfo( options.formats) 
				} else if(options.type == 'orderPay'){
					let info = uni.getStorageSync('ureaOrderMade')
					this.test = info.id
					this.orderId = info.orderId
					this.tsets = info.name 
					this.getOrderInfo(info.formats)  
				} else{
					this.dataList= JSON.parse(option.data)
					let options = JSON.parse(option.data)
					console.log('++++++++++++++++++',options.data,this.dataList)
					this.test = options.id
					this.orderId = options.orderId
					this.tsets = options.name
					this.typeFor = options.formats 
					this.getOrderInfo( options.formats) 
				}
			} 
		},
		filters: {
			payStyleList(value){
				if(value){
					switch (value) {
						case '0':
							return '个人微信支付'
						case '1':
							return '个人支付宝支付'
						case '2':
							return '个人余额支付'
						case '3':
							return '企业余额支付'
					}
				}
			}, 
			statusConduct(value) {
				//  备注：订单状态 0：待支付， 1：已支付 ，-1：支付失败 ，2：已取消，3：已退款
				// switch value
				// case "0"
				// return '待支付'
				console.log(value,'打印value')
				switch (value) {
					case '0':
						return '订单待支付'
					case '1':
						return '订单已支付'
					case '-1':
						return '订单支付失败'
					case '2':
						return '订单已取消'
					case '3':
						return '订单已退款'
					case '4':
						return '退款中'
					case '5':
						return '已退款'
					case '9':
						return '支付成功'
				}
			},
			oilCardNatureF(value) {
				//  备注 油卡性质 1：个人 2：企业 3：外请
				// switch value
				// case "0"
				// return '待支付'
				switch (value + '') {
					case '1':
						return '个人'

					case '2':
						return '企业'
					case '3':
						return '外请'
				}
			},
			oilCardNatureName(value){
				if(value == '0' ){
					return '外请'
				}else if(value == '1' ){
					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);
}
.w30{
		width: 30%;
		flex: 0 0 auto;
		text-align: center;
		font-weight: 700;
		font-size: 28rpx;
	}
	.formats_box{
		display: flex;
		justify-content: space-between;
		align-items: center; 
		padding: 2%;
		box-sizing: border-box;
		flex-direction: column;
	}
	.formats_box_list{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 3%;
		font-size: 30rpx;
		color: #333;
		    align-items: center;
		width: 100%;
	} 
.bg-red{
	background-color: #FF6700;
}
.text-centers {
      text-align: center;
      width: 90%;
      margin: 0 auto;
      border-radius: 7px;
      overflow: hidden;
}
	.move-top {
		margin-top: 1rem;
	}
	.padding-xl{
		padding: 20rpx 0 0;
	}
	.text-center-balance{
		width: 150rpx;
	}
	.text-center-balance text:last-child{
		color: #000000;
		margin-top: 10px;
		display: block;
	}
	.formats2{
		display: flex;
		justify-content: space-between;
		margin: 10px 0;
		padding-left: 50px;
	}
</style>
