<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :titleVal="'订单详情'" :statusTitle="true"></status-nav>
		<view :style="{paddingTop: statusHNH+'px'}" class="pad-zy30" style="padding-bottom: 150rpx;">
			<!-- 订单类型 -->
			<block v-if="loading">
				<view class="bacf radius20 mar-s20 fon28" style="padding: 27rpx 20rpx;">
					<view class="disjbac">
						<view class="bold">{{['商城订单','积分商城订单'][orderInfo.is_score]}}</view>
						<view v-if="orderInfo.status=='waiting'" class="colf8 bold">待付款</view>
						<view v-if="orderInfo.status=='paid' && orderInfo.has_virtual!=1" class="colf8 bold">待发货</view>
						<view v-if="orderInfo.status=='shipped' && orderInfo.has_virtual!=1" class="colf8 bold">待收货</view>
						<view v-if="orderInfo.status=='completed'" class="col9 bold">已完成</view>
						<view v-if="orderInfo.virtual_check==0 && orderInfo.has_virtual==1" class="colf8 bold">待核验</view>
						<view v-if="orderInfo.virtual_check==1 && orderInfo.has_virtual==1" class="col9 bold">已核验</view>
						<view v-if="orderInfo.status=='closed'" class="col9 bold">订单已取消</view>
					</view>
					<view class="bold col3 mar-s40 mar-x20">订单号:{{orderInfo.coding}}</view>
					<view class="fon24 col9" v-if="orderInfo.is_only==0 && orderInfo.open_one==1 && orderInfo.is_group_make==1 && orderInfo.open_one_success==0 ">{{daoTime}}</view>
					<view class="fon24 col9" v-else>{{orderInfo.created_at}}</view>
				</view>
				<!-- 物流信息 -->
				<view class="bacf radius20 mar-s20 fon28" style="padding: 27rpx 20rpx;">
					<view class="bold">物流信息</view>
					<view class="bold col3 mar-s40 fon26 disjbac">
						<view>{{orderInfo.express_name}}:{{orderInfo.express_number||'暂无快递单号'}}</view>
						<view @tap="copyCont">复制</view>
					</view>
				</view>
				<!-- 地址信息 -->
				<view v-if="orderInfo.address!='自提'" class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
					<view class="bold">收件人信息</view>
					<view class="fon26 col3">
						<view class="fon28 col3 bold" style="margin: 52rpx 0 20rpx 0;">{{addressInfo.userName}}<span class="mar-z10">{{addressInfo.userPhone}}</span></view>
						<view class="fon24 col9">{{addressInfo.userAddress}}</view>
					</view>
				</view>
				<view v-else class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
					<view class="bold">商家地址信息</view>
					<view class="fon26 col3 disjbac mar-s30">
						<view>
							<view class="fon28 col3 bold  mar-x20">恒美植发</view>
							<view class="fon24 col9">{{goAddress}}</view>
						</view>
						<!-- 立即导航 -->
						<image @tap="goThere(goAddress)" src="/static/public/daoh.png" class="there" mode="aspectFill"></image>
					</view>
				</view>
				<!-- 订单信息 -->
				<view class="bacf radius20 mar-s20 orderDetail-box">
					<view v-for="(item,index) in orderInfo.skus" :key="index" class="fon26 col3 disjbac pad-sx50 disjbac bbot">
						<image :src="item.spu_cover" class="flexs" mode="aspectFill"></image>
						<view class="width100">
							<view class="fon28 col3 bold clips2">{{item.spu_name}}</view>
							<view class="orderDetail-sku">{{item.sku_name}}</view>
							<view class="disjbac mar-s10">
								<view class="colf8 fon32 bold"><span v-if="orderInfo.is_score==0">¥{{item.price/100}}</span><span v-else>积分:{{item.score}}</span><span class="fon28 col6 mar-z20 font4">x{{item.num}}</span></view>
								<view @tap.stop="make(index)" v-if="orderInfo.virtual_check==0 && orderInfo.has_virtual==1 && item.check_type=='frontend'" class="order-btn">线下核销</view>
								<view v-if="orderInfo.virtual_check==0 && orderInfo.has_virtual==1 && item.check_type!='frontend'" class="order-btn" style="background-color: #CCCCCC;">线上核销</view>
							</view>
						</view>
					</view>
					<view class="fon28 disjbac mar-s40 mar-x20">
						<view class="col6">共{{allNum}}件</view>
						<view class="colf8 bold">共计:{{allPrice}}</view>
					</view>
				</view>
				<!-- 快递费用 -->
				<view v-if="isExpress" class="bacf radius20 mar-s20 disjbac pad-sx27-zy20">
					<view class="bold">快递费用</view>
					<view class="fon28 colf8 bold">¥{{orderInfo.freight}}.00</view>
				</view>
				<!-- 消费 -->
				<view class="fon28 col3 consumption-box">消费:<span class="fon36 bold colf8"><span v-if="orderInfo.is_score==0">¥{{orderInfo.price/100}}</span><span v-else>{{orderInfo.score}}积分</span> <span v-if="orderInfo.coin!=0">+{{orderInfo.coin}}孔雀币</span></span></view>
				<view class="disjbac posixzy bacf orderDetail-bottom-box">
					<view class="posir">
						<image src="/static/public/weix.png" mode=""></image>
						<view class="fon28 col3">分享</view>
						<button open-type="share" class="posia-op"></button>
					</view>
					<view @tap="comeing(orderInfo.coding)" v-if="orderInfo.is_only==0 && orderInfo.open_one==1 && orderInfo.is_group_make==1 && orderInfo.open_one_success==0 " class="orderInfo-btn">直接免拼</view>
					<!-- 待付款 -->
					<view class="disac paid-btn-box" v-if="orderInfo.status=='waiting'">
						<view @tap="cancleEv">取消订单</view>
						<view @tap="paymentEv">立即支付</view>
					</view>
					<!-- 待发货 -->
					<view class="disac paid-btn-box" v-if="orderInfo.status=='paid' && orderInfo.virtual_check==0">
						<view @tap="cancleEv">取消订单</view>
					</view>
					<!-- 确认收货 -->
					<view @tap="confirmReceipt(orderInfo.id)" class="orderInfo-btn" v-if="orderInfo.status=='shipped'">确认收货</view>
				</view>
				<!-- 待核验弹框 -->
				<view v-if="isHeyan" @tap="isHeyan=false" class="disjcac tc posAll" style="z-index: 3;" catchtouchmove="return">
					<view class="bacf width100 radius20 pad30 posir" style="margin: 0 128rpx;" @tap.stop="isHeyan=true">
						<view class="fon28 col3">订单二维码</view>
						<view class="mar-sx30">
							<yz-qr ref="qrPath" :text="text" :size="size" :colorDark="colorDark" :colorLight="colorLight"></yz-qr>
							<!-- <image src="/static/public/member-head.png" class="order-hx-img" mode="aspectFill"></image> -->
						</view>
						<view class="fon24 col3">
							<view class=" mar-s40 mar-x20">工作人员扫码核销订单</view>
							<view>订单未完成前请勿出示二维码</view> 
						</view>
						<image @tap.stop="closeEv" src="/static/public/closequan.png" class="posia heyan-close" mode=""></image>
					</view>
				</view>
			</block>
		</view>
		<!-- 弹框授权 -->
		<empower @buttonH="buttonH" :vision="vision" :isWhere="2"></empower>
		<!-- 弹框 -->
		<auth-phone v-if="isShowP"></auth-phone>
	</view>
</template>

<script>
	import yzQr from '@/components/yz-qr/yz-qr.vue';
	export default {
		components:{
			yzQr
		},
		data() {
			return {
				statusHNH:uni.getStorageSync('statusHNH'),
				publicColor:uni.getStorageSync('publicColor'),//主题颜色
				loading:false,
				isExpress:true,
				switchQuan:true,
				showQuan:false,
				express:'韵达快递:2983625984729',
				orderInfo:'',//订单信息
				addressInfo:'',//地址信息
				allPrice:0,//共计
				allNum:0,//共
				times:0,//点击次数
				goAddress:'四川省成都市青羊区青羊大道213号',
				isHeyan:false,
				canvasQrPath: '',
				text: 'hello',
				size: 162,
				colorDark: '#000000',
				colorLight: '#ffffff',
				timer:null,
				daoTime:'',
				timerDao:null,
				vision:false,
				isShowP:false,
			}
		},
		onShareAppMessage(res) {
		    var ya = this;
			let maiOjb = {
				e:6,//内容分享
				t:new Date().getTime()//当前时间戳
			}
			this.$toolAll.tools.maiDian(maiOjb)
			var shareObj = {
		    	title: '成都恒美毛发', // 默认是小程序的名称(可以写slogan等)
		    	path: `/pages/tabbar/pagehome/pagehome?invite_code=${uni.getStorageSync('invite_code')}}` // 默认是当前页面,必须是以‘/’开头的完整路径
		 	};
		  return shareObj;
		},
		onUnload() {
			this.closeEv();
		},
		onShow() {
			this.$toolAll.tools.isLogin();
		},
		onLoad(options) {
			if(uni.getStorageSync('is_active')!=1){this.vision = true;}
			if(options.invite_code!='' && options.invite_code!=undefined){
				this.loginEv(options.invite_code);
			} else if(options.source_code!='' && options.source_code!=undefined){
				this.loginEv('',options.source_code,options.channel);
			} 
			this.checkInfo(options.id);
		},
		methods: {
			loginEv(invite_code='',source='',channel=''){
				uni.login({
					provider: 'weixin',
					success: (res)=> {
						if (res.code) {
							var params = {
								code:res.code,
								invite_code:invite_code,//用户邀请码
								source_code:source,
								channel:channel
							}
							this.$requst.post('user/login',params).then(res => {
								if(res.data.token!=''){
									if(res.data.is_active==0) {
										this.haveImg = false;
										this.vision = true;
									}
								}
							},error => {})
						}
					},
				});
			},
			buttonH(e){//授权成功
				this.haveImg = e
				if(e) {
					this.vision = false
					this.isShowP = true
				} 
			},
			comeing(coding){
				this.$requst.post('user/open-one',{order_coding:coding}).then(res=>{
					if(res.code==0){
						this.$toolAll.tools.showToast('免拼成功');
						this.checkInfo(this.orderInfo.id);
					}
				})
			},
			confirmReceipt(id){//确认收货事件
				this.$requst.post('order/accepted',{order_id:id}).then(res=>{
					if(res.code==0){
						this.$toolAll.tools.showToast('收货成功');
						this.checkInfo(this.orderInfo.id);
					} else this.$toolAll.tools.showToast(res.msg);
				})
			},
			make(index){
				this.isHeyan = true;
				this.text = `${this.orderInfo.coding},${this.orderInfo.skus[index].id}`;
				let params = {
					order_coding:this.orderInfo.coding,
					id:this.orderInfo.skus[index].id,
					not_check_num:this.orderInfo.skus[index].not_check_num
				}
				this.timer = setInterval(()=>{
					this.$requst.post('order/check-result',params).then(res=>{
						if(res.code==0){
							if(res.data.result==1){
								this.isHeyan = false;
								this.$toolAll.tools.showToast('已完成');
								this.checkInfo(this.orderInfo.id);
								clearInterval(this.timer);
							}
						}
					})
				},3000)
			},
			closeEv(){
				this.isHeyan = false;
				clearInterval(this.timer);
				clearInterval(this.timerDao);
			},
			cancleEv(){//取消订单
				this.times++;
				if(this.times==2){
					this.$requst.post('order/cancel',{order_coding:this.orderInfo.coding}).then(res=>{
						if(res.code==0){
							this.$toolAll.tools.showToast('取消订单成功');
							this.checkInfo(this.orderInfo.id); 
							this.times = 0;
						}
					})
				} else {
					setTimeout(()=>{
						this.times = 0;
					},1500)
					this.$toolAll.tools.showToast('双击即可取消订单');
				}
			},
			paymentEv(){//立即支付
				if(this.times==0){
					this.$toolAll.tools.showToast('正在调起支付','loading',1500)
					this.times++;
					this.$requst.post('order/pay',{order_coding:this.orderInfo.coding}).then(res=>{
						if(res.code==0){
							uni.requestPayment({
								provider: 'wxpay',
								appId:res.data.payment_params.appId,//appId
								timeStamp: res.data.payment_params.timeStamp,//时间戳
								nonceStr: res.data.payment_params.nonceStr,//随机字符串
								package: res.data.payment_params.package,//package
								signType: res.data.payment_params.signType,//MD5
								paySign: res.data.payment_params.sign,//签名
								success:(res)=> {
									this.$requst.post('order/paid',{order_coding:this.orderInfo.coding}).then(res=>{
										if(res.code==0){
											this.times = 0;
											this.$toolAll.tools.showToast('支付成功');
											this.checkInfo(this.orderInfo.id);
										} else this.$toolAll.tools.showToast(res.msg);
										
									})
								}
							});
						}
					})
				}
			},
			checkInfo(id){//查询订单信息
				this.$requst.post('user/order-detail',{id:id}).then(res=>{
					if(res.code==0){
						this.allPrice = 0;
						this.allNum = 0;
						let narr = res.data;
						narr.skus.forEach(item=>{
							item.spu_cover = this.$http + item.spu_cover;
							// 共多少件,总计
							if(narr.is_score==0){
								this.allPrice += item.price*item.num;
							} else {
								this.allPrice += item.score*item.num;
							}
							this.allNum += item.num;
						})
						if(narr.is_score==0){//商城订单的总计
							this.allPrice = this.allPrice/100;
						} else {//积分订单的总计
							this.allPrice = this.allPrice;
						}
						this.orderInfo = narr;
						if(this.orderInfo.group_make_end_at!=null){
							this.daoTime = this.$toolAll.tools.dayTime(this.orderInfo.group_make_end_at,new Date().getTime());
							this.timerDao = setInterval(()=>{
								if(new Date().getTime()-new Date().getTime(this.orderInfo.group_make_end_at)>0){
									this.checkInfo(this.orderInfo.id);
									clearInterval(this.timerDao)
								} else {
									this.daoTime = this.$toolAll.tools.dayTime(this.orderInfo.group_make_end_at,new Date().getTime());
								}
							},1000)
						}
						let naddress = this.orderInfo.address.split(',');
						if(naddress[0]!='自提'){
							let nphone = this.$toolAll.tools.hideMPhone(naddress[1].trim())
							this.addressInfo = {
								userName:naddress[0].trim(),
								userPhone:nphone,
								userAddress:naddress[2].trim()
							}
						}
						this.loading = true;
					}
				})
			},
			copyCont(){//复制快递单号
				if(this.times==0){
					this.times++;
					if(this.orderInfo.express_number!=null){
						this.$toolAll.tools.clickCopy(this.orderInfo.express_number);
						this.$toolAll.tools.showToast('复制快递单号成功');
					} else this.$toolAll.tools.showToast('暂无可查询的快递信息');
					setTimeout(()=>{
						this.times = 0;
					},2000)
				}
			},
			goThere(val){//去这里
				wx.getLocation({//获取当前经纬度
				    type: 'wgs84', //返回可以用于wx.openLocation的经纬度,官方提示bug: iOS 6.3.30 type 参数不生效,只会返回 wgs84 类型的坐标信息  
					success: function (res) {
						wx.openLocation({//​使用微信内置地图查看位置。
							latitude: 30.67554,//要去的纬度-地址
							longitude: 104.010642,//要去的经度-地址
							name: val,
							address: val
						})
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>