<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :navBarTitle="'我的订单'"></status-nav>
		<view :style="{paddingTop: statusBarHeight +'px'}">
			<!-- 导航栏 -->
			<view style="position: sticky;z-index: 10;" :style="{ top: statusBarHeight +'px'}">
				<swiper-tab id="tab" :list="navList" v-model="current" @input="clickTab" itemColor="#000000" lineColor="#000000"></swiper-tab>
			</view>
			<swiper :style="{ height: swiperHeight - statusBarHeight +'px'}" class="pad-zy30 fon30" :current="current" @change="swiperChange">
				<swiper-item v-for="item in navList.length" :key="index">
					<scroll-view scroll-y @scrolltolower="scrollBottomEv" style="height: 100%;">
						<!-- 列表数据 -->
						<view class="radius20 mar-s20" style="background-color: #f6f6f6;">
							<view @tap="goDetail" class="disjbac col0 pad30" style="border-bottom: 1rpx solid #d3d3d3;">
								<view>订单号：123412351234123</view>
								<view class="bold">{{['','待付款','待发货','待核验','待收货','交易完成'][1]}}</view>
							</view>
							<view class="fon26 col3 disjbac pad-sx50 mar-zy30 disjbac borbot posir">
								<image @tap="goDetail" src="https://s6.jpg.cm/2022/02/14/L4oDhy.jpg" class="flexs mar-y20 radius30" style="width: 224rpx;height: 224rpx;" mode="aspectFill"></image>
								<view @tap="goDetail" class="width100 disjb fc" style="height: 224rpx;">
									<view class="fon28 col3 bold clips2 line-h50">就阿斯蒂芬我就阿斯蒂芬我就阿斯蒂芬我就阿斯蒂芬我就阿斯蒂芬我</view>
									<view class="order-sy"><span>颜色：粉色</span><span>尺寸：12.2</span></view>
									<view class="colpeili disjbac"><span class="order-price">￥2,000</span><span class="fon24">x1</span></view>
								</view>
							</view>
							<view class="colpeili pad30 disjbac" style="border-top: 1rpx solid #d3d3d3;">
								<view class="order-price">合计：2,000</view> 
								<view class="disjbac">
									<view @tap="transferFrame(index)" class="order-btn">取消订单</view>
								</view>
							</view>
						</view>
						<!-- 暂无更多数据 -->
						<pitera v-if="pitera"></pitera>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 取消订单弹框 -->
		<view v-if="isCancle" @tap.stop="isCancle=false" class="posAll">
			<view class="bacf posixzy order-cancle-tk" @tap.stop="isCancle=true">
				<view>
					<view class="bbot pad-sx20 posir">
						<view class="fon28 bold col3 width100" style="text-align: center;">取消订单</view>
						<image class="posia order-close-btn" @tap.stop="isCancle=false" src="/static/public/cha-close.png" mode="aspectFill"></image>
					</view>
					<view class="pad-zy32 pad-sx20 col5b">
						<view class="fon24 linh40">
							<view>温馨提示：</view>
							<view>订单取消需要提交工作人员审核，商品金额将原路径返还账户，订单一旦取消，系统无法恢复。</view>
						</view>
						<view @tap.stop="chooseReason(indexy)" v-for="(itemy,indexy) in reasonList" :key="indexy" class="disac mar-s40">
							<image v-if="itemy.isActive" src="/static/public/chooseFS.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
							<image v-else src="/static/public/cancle-FS.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
							<view class="mar-z20 fon28">{{itemy.title}}</view>
						</view>
						<!-- 确认取消按钮 -->
						<view @tap.stop="confirmEv" class="confirm-btn">确认取消</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
	import yzQr from '@/components/yz-qr/yz-qr.vue';
	export default {
		components:{
			yzQr,
			swiperTab
		},
		data() {
			return {
				statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
				swiperHeight:uni.getSystemInfoSync().windowHeight,
				publicColor:uni.getStorageSync('publicColor'),//主题颜色
				chuTop:'',//导航高度
				activeIndex:'',
				navList:[{title:'全部'},{title:'待付款'},{title:'待发货'},{title:'待收货'},{title:'已完成'},{title:'已取消'}],
				// 取消订单原因
				reasonList:[
					{title:'不想要了/买多了/买错了',isActive:true},
					{title:'地址信息填写错误',isActive:false},
					{title:'其他原因',isActive:false},
				],
				isCancle:false,//是否取消订单
				orderList:[],
				zanList:[],//暂存列表数据
				page:1,
				size:10,
				total:'',//总数
				isZanw:true,
				tag:'',//默认全部 waiting=待付款 paid=已付款待发货 shipped=已发货 completed=已完成 check=待核验
				current:0,//选中的订单
				remarks:'',//原因
				times:0,//点击次数
				canvasQrPath: '',
				timer:null,
				zanArr:[],
				timeList:[],
				orderInfo:{},
				checkGrounpId:0,
			}
		},
		onShareAppMessage(res) {
		    var ya = this;
			let orderIndex = res.target.dataset.id;
			this.orderInfo = this.orderList[orderIndex];
			this.$requst.post('user/record',{type:'content',action:'share',id:this.orderInfo.childrenList[0].spu_id}).then(res=>{console.log('分享成功：',res);},error=>{})
			let maiOjb = {
				e:4,//内容分享
				c:this.orderInfo.childrenList[0].spu_id*1,
				t:new Date().getTime()//当前时间戳
			}
			this.$toolAll.tools.maiDian(maiOjb);
			var shareObj = {
		　　　　	title: `${ya.orderInfo.childrenList[0].title}`, // 默认是小程序的名称(可以写slogan等)
		　　　　	path: `/pagesB/shopDetail/shopDetail?id=${ya.orderInfo.childrenList[0].spu_activity_id}&category_id=0&share_id=${ya.orderInfo.group_id}&invite_code=${uni.getStorageSync('invite_code')}&shareCate=1&checkGrounpId=${ya.orderInfo.childrenList[0].spu_activity_id}&is_activity=1`, // 默认是当前页面，必须是以‘/’开头的完整路径
		　　　　	imageUrl: ya.orderInfo.childrenList[0].imgSrc//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
		　	};
		　　return shareObj;
		},
		onReady() {
			// 获取ID为tab元素的信息
			uni.createSelectorQuery().in(this).select('#tab').boundingClientRect().exec(rect => {
				this.swiperHeight = this.swiperHeight - rect[0].height
			});
		},
		onReachBottom() {
			if(this.total!=this.orderList.length){
				this.page++
			} else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多记录','none',1000)
				this.isZanw = false
			}
		},
		onShow() {
			this.$toolAll.tools.isLogin();
		},
		onLoad(options) {
			options.index==undefined ? this.activeIndex = 0 : this.activeIndex = options.index;
		},
		methods: {
			// tab点击事件
			clickTab(index){
				this.current = index
			},
			// 列表滑动事件
			swiperChange(e){
				this.current = e.detail.current
			},
			checkList(index){//查询订单列表
				this.$requst.post('user/order',{page:this.page,size:this.size,tag:this.tag}).then(res=>{
					if(res.code==0){
						if(this.page==1) {
							uni.pageScrollTo({//回到顶部
								scrollTop: 0,
								duration: 0
							});
							this.orderList = [];
							this.zanArr = [];
							this.timeList = [];
						}
						this.total = res.data.total;
						if(res.data.list.length!=0){
							res.data.list.forEach(item=>{
								let statusNum = 0;
								if(item.status=="waiting") statusNum = 1;
								// if(item.status=="paid" && item.has_virtual==1) {
								// 	statusNum = 3;
								// }
								if(item.status=="paid") {
								 	statusNum = 2;
								}
								// if(item.status=="check") 
								if(item.status=="shipped") statusNum = 4;
								if(item.status=="completed") statusNum = 5;
								let nprice = '';
								if(item.is_score==0) nprice = this.$toolAll.tools.addXiaoShu(item.price/100);
								if(item.is_score==1) nprice = item.score;
								let nchildren = [];
								item.skus.forEach(items=>{
									let childrenPrice = '';
									if(item.is_score==0) childrenPrice = items.price/100
									if(item.is_score==1) childrenPrice = items.score
									let objs = {
										id:items.id,
										imgSrc:this.$http + items.spu_cover,
										title:items.spu_name,
										sku_name:items.sku_name,
										price:childrenPrice,
										num:items.num,
										not_check_num:items.not_check_num,
										check_type:items.check_type,
										is_virtual:items.is_virtual,
										activity_type:items.activity_type,
										spu_id:items.spu_id,
										spu_activity_id:items.spu_activity_id
									}
									nchildren.push(objs);
								})
								let obj = {
									id:item.id,
									establish:item.created_at,//创建时间
									orderNum:item.coding,//订单号
									childrenList:nchildren,
									orderStatus:statusNum,//1 待付款，2 待发货，3 待核验，4 待收货，5 交易已完成
									isShop:item.is_score,//0 商城订单,1 积分商城订单
									total: nprice,//合计
									coin:item.coin,//孔雀币
									is_only:item.is_only,//是否单独购买,1、单独购买
									virtual_check:item.virtual_check,
									open_one:item.open_one,
									is_group_make:item.is_group_make,
									open_one_success:item.open_one_success,
									group_make_end_at:item.group_make_end_at,
									group_id:item.group_id
								}
								this.zanArr.push(obj);
							})
							this.zanArr.forEach((item,index)=>{
								if(item.group_make_end_at!='' && item.group_make_end_at!=null) {
									let obj = {
										id:item.id, 
										time:item.group_make_end_at,
										nIndex:index
									}
									this.timeList.push(obj);
								}
							})
							if(this.timeList!=0){
								uni.showToast({
									title:'加载中...',
									icon:'none',
									duration:100000
								})
								this.timer = setInterval(()=>{//定时器
									if(this.timeList.length!=0){
										this.timeList.forEach((item,index)=>{
											if(item.id==this.zanArr[item.nIndex].id){
												let endTime = new Date(this.timeList[index].time).getTime();//把结束时间转时间戳
												let startTime = new Date().getTime() + 1000;//请求接口的时间递增，即：开始时间
												if(startTime - endTime >=0) {//如果开始时间的时间戳 - 结束时间的时间戳 >= 0 活动结束
													// this.checkList(this.activeIndex);
												} else {
													// 继续进行倒计时
													this.zanArr[item.nIndex].group_make_end_at = this.$toolAll.tools.dayTime(this.timeList[index].time,startTime);
												}
											}
										})
									}
								},1000)
								setTimeout(()=>{
									uni.hideToast();
									this.orderList = this.zanArr;
									// this.search_result = true;
								},1000)
							} else {
								uni.hideToast();
								this.orderList = this.zanArr;
							}
							this.zanList = this.orderList;
							if(index==0) {
								this.orderList = this.zanList;
							} else if(index==3){
							} else {
								this.orderList = this.zanList.filter(item=>{
									return item.orderStatus==index;
								});
							}
						}
					}
				})
			},
			payMentEv(index){//付款
				this.$requst.post('order/pay',{order_coding:this.orderList[this.current].orderNum}).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.orderList[this.current].orderNum}).then(res=>{
									if(res.code==0){
										this.$toolAll.tools.showToast('付款成功');
										this.checkList(this.activeIndex)
									} else this.$toolAll.tools.showToast(res.msg);
									
								})
							}
						});
					}
				})
			},
			transferFrame(index){//调起取消原因弹框
				this.isCancle = true;
				this.current = index;
				this.reasonList.forEach(item=>{
					item.isActive = false;
				})
				this.reasonList[0].isActive = true;
			},
			chooseReason(index){//取消订单原因选择事件
				this.reasonList.forEach(item=>item.isActive = false);
				this.reasonList[index].isActive = true;
				this.remarks = this.reasonList[index].title;
			},
			confirmEv(){//确认取消订单事件
				if(this.times==0){
					this.times++;
					this.$toolAll.tools.showToast('正在取消...');
					this.$requst.post('order/cancel',{order_coding:this.orderList[this.current].orderNum,remarks:this.remarks}).then(res=>{
						if(res.code==0){
							this.isCancle = false;
							this.orderList.splice(this.current,1);
							this.page = 1;
							this.checkList(this.activeIndex);
							this.$toolAll.tools.showToast('取消成功');
							this.times = 0;
						} else this.$toolAll.tools.showToast(res.msg);
					})
				}
			},
			confirmReceipt(id){//确认收货事件
				this.$requst.post('order/accepted',{order_id:id}).then(res=>{
					if(res.code==0){
						this.$toolAll.tools.showToast('收货成功');
						this.checkList(this.activeIndex);
					} else this.$toolAll.tools.showToast(res.msg);
				})
			},
			goDetail(id){//去订单详情
				uni.navigateTo({
					url:`/pagesB/orderDetail/orderDetail?id=${id}`
				})
			}
		}
	}
</script>

<style>
	.activeD::after{
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 8rpx;
		background: #3875F6;
		width: 100%;
	}
	
	.order-price{color: #f83030;}
	.order-btn{
		width: 150rpx;height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: #f6f6f6;
		color: #8c8c9b;
		border: 1rpx solid #d3d3d3;
	}
</style>
