<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="list">
			<view class="item" v-for="(item,index) in orderlist" :key="index">
				<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==6">已完成</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="../../static/cai.png" mode="widthFix" class="shop"></image>
					<view class="info">
						<view class="word">{{item.goods_name}}</view>
						<view 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">
					<view class="btn" style="margin-right: 16rpx;">取消订单</view>
					<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: '',
				page: 1,
				orderlist: []
			}
		},
		onLoad(options) {
			this.selindx = options.id;
			console.log(this.selindx);
			this.getorder()
		},
		methods: {
			comment() {
				uni.navigateTo({
					url: '/pages/usercenter/shopEvaluate'
				})
			},
			//切换选项
			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);
					console.log(that.orderlist)
				}).catch((err) => {
					console.log(err)

				})
			},
		},
		onReachBottom() {
			let newpage = this.page;
			newpage++;
			this.page = newpage;
			this.getorder()
		}
	}
</script>

<style>
	page {
		background: #F7F7F7;
	}

	.navbox {
		height: 88rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.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: 32rpx 0;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
	}

	.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: 20rpx;
	}

	.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>