<template>
	<view class="page">
		<view class="navbox">
			<view class="navItem" :class="selindx==0?'navactive':''" @click="changeopt" :data-id="0">
				全部订单
			</view>
			<view class="navItem" :class="selindx==1?'navactive':''" @click="changeopt" :data-id="1">
				待付款
			</view>
			<view class="navItem" :class="selindx==2?'navactive':''" @click="changeopt" :data-id="2">
				待发货
			</view>
			<view class="navItem" :class="selindx==3?'navactive':''" @click="changeopt" :data-id="3">
				待收货
			</view>
			<view class="navItem" :class="selindx==4?'navactive':''" @click="changeopt" :data-id="4">
				待评价
			</view>
		</view>
		
		<view class="nodata" v-if="orderlist.length==0">暂无数据</view>
		<view class="list" v-else>
			<view class="item" v-for="(item,index) in orderlist" :key="index" @click="ordertail(item)">
				<view class="titlebox">
					<view class="leftT">
					
						<image src="../../static/shop_o.png" mode="widthFix" class="icon"></image>
						<text v-if="item.type==1">面坊商品</text>
						<text v-if="item.type==2">积分商品</text>
						<text v-if="item.type==3">{{item.store.name}}</text>
					</view>
					<view class="rightT" v-if="item.status==1">待付款</view>
					<view class="rightT" v-if="item.status==2">待发货</view>
					<view class="rightT" v-if="item.status==3">待收货</view>
					<view class="rightT" v-if="item.status==4">待评价</view>
					<view class="rightT" v-if="item.status==5">已完成</view>
					<view class="rightT" v-if="item.status==-1">已取消</view>
				</view>
				<view class="infobox" v-for="(item,index) in item.order_info" :key="index">
					<image :src="item.image" mode="widthFix" class="shop"></image>
					<view class="info">
						<view class="word">{{item.goods_name}}</view>
						<view class="flexone" v-if="item.spec.length!=0">
							<view class="spec" v-for="(item,index) in item.spec" :key="index">{{item.spec_name}}:{{item.spec_value}}</view>
						</view>
						<view class="price">¥{{item.price}}</view>
					</view>
				</view>
				<view class="btnbox" v-if="item.status==1">
					<view class="btn" style="margin-right: 16rpx;" @click.stop="cancelorder(item)">取消订单</view>
					<view class="btn bactive" @click.stop="payorder(item)">立即支付</view>
				</view>
				<view class="btnbox" v-if="item.status==3" @click="shouhuo(item)">
					<view class="btn bactive">确认收货</view>
				</view>
				
				<view class="btnbox" v-if="item.status==4"  @click.stop="evalute(item)">
					<view class="btn bactive">立即评价</view>
				</view>
			</view>
			
			
			<!-- <view class="item">
				<view class="titlebox">
					<view class="leftT">
						<image src="../../static/shop_o.png" mode="widthFix" class="icon"></image>红大地面品厂
					</view>
					<view class="rightT">待发货</view>
				</view>
				<view class="infobox">
					<image src="../../static/cai.png" mode="widthFix" class="shop"></image>
					<view class="info">
						<view class="word">商品名称名称名称商品名称名称名称商品名称名称名称名称</view>
						<view class="price">¥288</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="titlebox">
					<view class="leftT">
						<image src="../../static/shop_o.png" mode="widthFix" class="icon"></image>红大地面品厂
					</view>
					<view class="rightT">待收货</view>
				</view>
				<view class="infobox">
					<image src="../../static/cai.png" mode="widthFix" class="shop"></image>
					<view class="info">
						<view class="word">商品名称名称名称商品名称名称名称商品名称名称名称名称</view>
						<view class="price">¥288</view>
					</view>
				</view>
				<view class="btnbox">
					<view class="btn bactive">确认收货</view>
				</view>
			</view>
			<view class="item">
				<view class="titlebox">
					<view class="leftT">
						<image src="../../static/shop_o.png" mode="widthFix" class="icon"></image>红大地面品厂
					</view>
					<view class="rightT">待评价</view>
				</view>
				<view class="infobox">
					<image src="../../static/cai.png" mode="widthFix" class="shop"></image>
					<view class="info">
						<view class="word">商品名称名称名称商品名称名称名称商品名称名称名称名称</view>
						<view class="price">¥288</view>
					</view>
				</view>
				<view class="btnbox" @click="comment">
					<view class="btn bactive">立即评论</view>
				</view>
			</view>
			<view class="item"> -->
				<!-- <view class="titlebox">
					<view class="leftT">
						<image src="../../static/shop_o.png" mode="widthFix" class="icon"></image>红大地面品厂
					</view>
					<view class="rightT">已完成</view>
				</view>
				<view class="infobox">
					<image src="../../static/cai.png" mode="widthFix" class="shop"></image>
					<view class="info">
						<view class="word">商品名称名称名称商品名称名称名称商品名称名称名称名称</view>
						<view class="price">¥288</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				selindx: 0,
				page: 1,
				orderlist: []
			}
		},
		onLoad(options) {
			this.selindx = options.id;
			if(options.id==''){
				this.selindx=''
			}
				
			console.log(this.selindx);
			
		},
		methods: {
			comment() {
				uni.navigateTo({
					url: '/pages/usercenter/shopEvaluate'
				})
			},
			// 订单详情
			ordertail(item){
				console.log(item)
				uni.navigateTo({
					url:'/pages/usercenter/orderdetail?id='+item.id
				})
			},
			// 确认收货
			shouhuo(){
				console.log(item)
				let that = this;
				var url = 'order/take';
				var params = {
					// order_id: item.order_id,
					order_detail_id:item.id
					
				}
				console.log('7766554', params)
				app.post(url, params).then((res) => {
					uni.showToast({
						title:"收货成功",
						icon:"none"
					})
					that.page=1;
					that.orderlist=[];
					that.getorder()
					
				}).catch((err) => {
					console.log(err)
				
				})
			},
			// 取消订单
			cancelorder(item){
				let that=this;
				uni.showModal({
				    title: '提示',
				    content: '是否取消该订单',
				    success: function (res) {
				        if (res.confirm) {
				           var url = 'order/cancel';
				           var params = {
				           order_detail_id:item.id
				           }
				           console.log('7766554', params)
				           app.post(url, params).then((res) => {
				           	console.log(res);
								uni.showToast({
									title:'取消订单成功',
									icon:'none'
								})
								that.page=1;
								that.orderlist=[];
								that.getorder();
								
				           }).catch((err) => {
				           	console.log(err)
				           
				           })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			// 确认订单
			payorder(item){
				console.log(item)
				let that = this;
				var url = 'order/pay';
				var params = {
					// order_id: item.order_id,
					order_detail_id:item.id
				}
				console.log('7766554', params)
				app.post(url, params).then((res) => {
					console.log(res);
					if(item.pay_type == 2) {
						// 支付宝支付
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: res.data.data.result,
							success(r) {
								console.log(r) 
							}
							
						})
					}
					
				}).catch((err) => {
					console.log(err)
				
				})
			},
			//切换选项
			changeopt(e) {
				this.selindx = e.currentTarget.dataset.id;
				this.page=1;
				this.orderlist=[];
				this.getorder()
			},
			// 获取订单列表
			getorder() {
				let that = this;
				var url = 'order/get_order_list';
				var params = {
					status: that.selindx,
					page:that.page,
					pageNum:10
					
				}
				console.log('7766554', params)
				app.post(url, params).then((res) => {
					console.log(res);
					 that.orderlist = that.orderlist.concat(res.data.data);
					// that.orderlist=res.data.data
					// console.log(that.orderlist.length);
					console.log(that.orderlist)
				}).catch((err) => {
					console.log(err)

				})
			},
			// 去评价
			evalute(item){
				uni.navigateTo({
					url:'/pages/usercenter/shopEvaluate?order_detail_id='+item.id
				})
			},
			
		},
		onShow(){
			this.page=1;
			this.orderlist=[];
			this.getorder()
		},
		onReachBottom() {
			let newpage = this.page;
			newpage++;
			this.page = newpage;
			this.getorder()
		}
	}
</script>

<style>
	page {
		background: #F7F7F7;
	}
	.nodata{
		margin-top:440rpx;
	}
	.list{
		margin-top:100rpx;
	}
	.navbox {
		width:100%;
		height: 88rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		box-sizing: border-box;
		position: fixed;
		top:0;
		left:0;
		z-index: 9;
	}

	.navItem {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(35, 35, 35, 1);
		padding: 20rpx 0;
		border-bottom: 1px solid transparent;
	}

	.navactive {
		color: #FF9417;
		border-color: #FF9417;
	}

	.item {
		width: 100%;
		background: #fff;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-top: 16rpx;
		overflow: hidden;
	}

	.titlebox {
		height: 84rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #EEEEEE;
	}

	.leftT {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(61, 68, 76, 1);
	}

	.icon {
		width: 32rpx;
		margin-right: 12rpx;
	}

	.rightT {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(189, 196, 206, 1);
	}

	.infobox {
		/* height: 204rpx; */
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop {
		width: 140rpx;
	}

	.info {
		width: 530rpx;
		padding: 22rpx 0;
		/* border-bottom: 1px solid #EEEEEE; */
		box-sizing: border-box;
		height:auto!important;
	}

	.word {
		width:520rpx;
		height:76rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(61, 69, 76, 1);
		/* margin-top: 8px; */
	}

	.price {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(255, 91, 78, 1);
		margin-top: 2rpx;
	}

	.btnbox {
		height: 100rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.btn {
		width: 160rpx;
		height: 64rpx;
		border-radius: 8px;
		border: 1px solid rgba(189, 196, 206, 1);
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(91, 94, 100, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10rpx;
	}

	.bactive {
		color: #FF9417;
		border-color: #FF9417;
	}
</style>