<template>
	<view class="page">
		<u-navbar :is-back="false"  title="订单" :border-bottom="false" back-icon-color="000" :background="bgc" title-color='#fff' title-size='36'
			height='36'	id="navbar">
		</u-navbar>
		<view class="nav">
			<view :class="navindex == 0 ? 'navactive' : ''" @click="btnnav(0)">
				爆灯订单
				<text></text>
			</view>
			<view :class="navindex == 1 ? 'navactive' : ''" @click="btnnav(1)">
				充值订单
				<text></text>
			</view>
			<view :class="navindex == 2 ? 'navactive' : ''" @click="btnnav(2)">
				购物订单
				<text></text>
			</view>
			<!-- <view :class="navindex == 3 ? 'navactive' : ''" @click="btnnav(3)">
				卡劵订单
				<text></text>
			</view> -->
		</view>
        <scroll-view class="list" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="white" v-if="orderlist.length != 0">
			<view class="list_item" :class="{'shopping-order': navindex == 2}" v-for="(item,index) in orderlist" :key="index" @click="btnxq(item.id)">
				<view class="top">
					<view class="" v-if="navindex == 0">
						充值类-爆灯次数充值
					</view>
					<view class="" v-if="navindex == 1">
						充值类-余额充值
					</view>
					<view class="" v-if="navindex == 2">
						购物类-商品购买
					</view>
					<view class="" v-if="navindex == 3">
						兑换类-卡劵兑换
					</view>
					<view class="">
						<text style="font-size: 26rpx;" v-if="item.status == 'FINISHED'">交易成功</text>
						<text v-if="item.status == 'CANCELED'" style="color: #9F9F9F;font-size: 26rpx;">交易取消</text>
						<text style="font-size: 26rpx;" v-if="item.status == 'REFUNDED'">交易成功</text>
						<text style="font-size: 26rpx;color: #9F9F9F;" v-if="item.status == 'WAIT_PAY'">待支付</text>
						<text style="font-size: 26rpx;color: #9F9F9F;" v-if="item.status == 'WAIT_DELIVERY'">待配送</text>
					</view>
				</view>
				<view class="bd">
					<view class="lt" v-if="navindex == 0">
						<image src="https://api.ccttiot.com/smartmeter/img/static/ubGWMXEuBaNSGPLrcN7P" mode=""></image>
					</view>
					<view class="lt" v-if="navindex == 1">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uB2TJIagWNcBSCm0S8bU" mode=""></image>
					</view>
					<view class="rt">
						<view class="bai" v-if="navindex == 0">
							爆灯次数充值 - {{item.suitNum}}次
						</view>
						<view class="bai" v-if="navindex == 1">
							余额充值 - {{item.rechargeAmount}}元，赠送{{item.giftedAmount == null ? '0' : item.giftedAmount}}元
						</view>
						<view v-if="navindex == 2" class="goods-list">
							<view v-for="goods in item.goodsOrderSkuVOList" :key="goods.id" class="goods-item">
								<image :src="goods.picture" class="goods-img" mode="aspectFill"></image>
								<view class="goods-info">
									<view class="goods-name">{{ goods.goodsName }}</view>
									<view class="goods-spec">
										规格：
										<span v-for="(spec, sidx) in goods.specValue" :key="sidx">
											{{ spec.value }}<span v-if="sidx < goods.specValue.length - 1">,</span>
										</span>
									</view>
									<view class="goods-row">
										<view class="goods-qty">数量：{{ goods.number }}</view>
										<view class="goods-price">单价：￥{{ goods.price }}</view>
									</view>
								</view>
							</view>
							<view class="bai">
								商品购买 - 原价{{item.originalAmount}}元，优惠{{item.discountedAmount == null ? '0' : item.discountedAmount}}元
							</view>
						</view>
						<view class="hui">
							下单时间：{{item.createTime}}
						</view>
					</view>
				</view>
				<view class="bot">
					<view class="">
						
					</view>
					<view class="" v-if="navindex == 0">
						<text>金额：￥{{item.payAmount}}</text>
					</view>
					<view class="" v-if="navindex == 1">
						<text>金额：￥{{item.rechargeAmount}}</text>
					</view>
					<view class="" v-if="navindex == 2">
						<text>金额：￥{{item.payAmount}}</text>
					</view>
				</view>
			</view>
			<view class="wu">
				没有更多订单了...
			</view>
		</scroll-view>
		<view style="width: 480rpx;height: 373rpx;margin: auto;margin-top: 390rpx;" v-else>
		  <image src="https://api.ccttiot.com/smartmeter/img/static/uEiNJh8Rfurw9ORQzlit" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#010000",
				},
				orderlist:[],
				total:'',
				pageNum:1,
				isRefreshing: false,
				navindex:0
			}
		},
		onShow() {
			
		},
		onLoad() {
			this.pageNum = 1
			this.getlist()
		},
		methods: {
			// 点击切换nav
			btnnav(num){
				this.navindex = num
				this.isRefreshing = true
				this.pageNum = 1
				if(num == 0){
					this.getlist()
				}else if(num == 1){
					this.getchongzhi()
				}else if(num == 2){
					this.getshop()
				}else if(num == 3){
					this.geikajuan()
				}
			},
			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true
				this.pageNum = 1
				if(this.navindex == 0){
					this.getlist()
				}else if(this.navindex == 1){
					this.getchongzhi()
				}else if(this.navindex == 2){
					this.getshop()
				}else if(this.navindex == 3){
					this.getkajuan()
				}
				setTimeout(() => {
					this.isRefreshing = false
				}, 1000)
			},
			// 获取卡劵兑换列表
			getkajuan(){
				 this.$u.get(`/app/vipUser/list?pageNum=${this.pageNum}&pageSize=20&storeId=${this.$store.state.storeId}`).then(res =>{
					 if(res.code == 200){
						 this.total = res.total
						 if(this.pageNum == 1){
							 this.orderlist = res.rows
							 this.pageNum++
						 }else{
							 this.orderlist = this.orderlist.concat(res.rows)
							 this.pageNum++
						 }
					 }else if(res.code == 401){
						 uni.showModal({
						   title: '提示',
						   content: '你还未登录，是否去登录？', 
						   success: function (res) {
						     if (res.confirm) {
						       console.log('用户点击确定')
						 	  uni.reLaunch({
						 	  	url:'/pages/login/login'
						 	  })
						     } else if (res.cancel) {
						       console.log('用户点击取消')
						     }
						   }
						 })
					 }
				 })
			},
			// 获取充值余额列表
			getchongzhi(){
				 this.$u.get(`/app/rechargeOrder?pageNum=${this.pageNum}&pageSize=20&storeId=${this.$store.state.storeId}`).then(res =>{
					 if(res.code == 200){
						 this.total = res.total
						 if(this.pageNum == 1){
							 this.orderlist = res.rows
							 this.pageNum++
						 }else{
							 this.orderlist = this.orderlist.concat(res.rows)
							 this.pageNum++
						 }
					 }else if(res.code == 401){
						 uni.showModal({
						   title: '提示',
						   content: '你还未登录，是否去登录？', 
						   success: function (res) {
						     if (res.confirm) {
						       console.log('用户点击确定')
						 	  uni.reLaunch({
						 	  	url:'/pages/login/login'
						 	  })
						     } else if (res.cancel) {
						       console.log('用户点击取消')
						     }
						   }
						 })
					 }
				 })
			},
			// 获取购买商品列表
			getshop(){
				 this.$u.get(`/app/goodsOrder/list?pageNum=${this.pageNum}&pageSize=20&storeId=${this.$store.state.storeId}`).then(res =>{
					 if(res.code == 200){
						 this.total = res.total
						 if(this.pageNum == 1){
							 this.orderlist = res.rows
							 this.pageNum++
						 }else{
							 this.orderlist = this.orderlist.concat(res.rows)
							 this.pageNum++
						 }
					 }else if(res.code == 401){
						 uni.showModal({
						   title: '提示',
						   content: '你还未登录，是否去登录？', 
						   success: function (res) {
						     if (res.confirm) {
						       console.log('用户点击确定')
						 	  uni.reLaunch({
						 	  	url:'/pages/login/login'
						 	  })
						     } else if (res.cancel) {
						       console.log('用户点击取消')
						     }
						   }
						 })
					 }
				 })
			},
			//获取爆灯次数列表
			getlist(){ 
				 this.$u.get(`/app/order?pageNum=${this.pageNum}&pageSize=20&storeId=${this.$store.state.storeId}`).then(res =>{
					 if(res.code == 200){
						 this.total = res.total
						 if(this.pageNum == 1){
							 this.orderlist = res.rows
							 this.pageNum++
						 }else{
							 this.orderlist = this.orderlist.concat(res.rows)
							 this.pageNum++
						 }
					 }else if(res.code == 401){
						 uni.showModal({
						   title: '提示',
						   content: '你还未登录，是否去登录？', 
						   success: function (res) {
						     if (res.confirm) {
						       console.log('用户点击确定')
						 	  uni.reLaunch({
						 	  	url:'/pages/login/login'
						 	  })
						     } else if (res.cancel) {
						       console.log('用户点击取消')
						     }
						   }
						 })
					 }
				 })
			},
            // 上拉加载更多
			handqixing(){
				if(this.total > this.orderlist.length){
					if(this.navindex == 0){
						this.getlist()
					}else if(this.navindex == 1){
						this.getchongzhi()
					}else if(this.navindex == 2){
						this.getshop()
					}else if(this.navindex == 3){
						this.getkajuan()
					}
				}else{
					console.log(11);
				}
			},
			// 点击进入订单详情
            btnxq(orderid){
				uni.navigateTo({
					url:'/pages/nearbystores/index?orderid=' + orderid + '&navindex=' + this.navindex
				}) 
			}			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #010000;
	}
	.list{
		width: 100%;
		height: 83vh;
		overflow: scroll;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		.wu{
			font-size: 24rpx;
			color: #808080;
			width: 100%;
			text-align: center;
			margin-top: 36rpx; 
		}
		.list_item {
			width: 702rpx;
			background: #211f1f;
			border-radius: 16rpx;
			margin: auto;
			margin-top: 26rpx;
			padding: 22rpx 34rpx;
			box-sizing: border-box;
			// 默认高度
			height: 288rpx;
			// 针对购物订单自适应高度
			&.shopping-order {
				height: auto;
				padding-bottom: 30rpx;
				.goods-list {
					margin-bottom: 10rpx;
				}
				.goods-item {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					.goods-img {
						width: 100rpx;
						height: 100rpx;
						border-radius: 8rpx;
						margin-right: 20rpx;
						background: #f5f5f5;
					}
					.goods-info {
						flex: 1;
						.goods-name {
							font-size: 28rpx;
							color: #fff;
							font-weight: bold;
						}
						.goods-spec {
							font-size: 24rpx;
							color: #ccc;
							margin-top: 4rpx;
						}
						.goods-row {
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-top: 4rpx;
							.goods-qty, .goods-price {
								font-size: 24rpx;
								color: #ccc;
								margin-right: 24rpx;
							}
							.goods-price {
								margin-right: 0;
							}
						}
					}
				}
			}
			.bot{
				display: flex;
				justify-content: space-between;
				padding: 0 2rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				color: #9F9F9F;
				text{
					font-size: 30rpx;
					color: #FFFFFF;
					margin-left: 28rpx;
				}
			}
			.bd{
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				.lt{
					image{
						width: 122rpx;
						height: 122rpx;
					}
					margin-right: 42rpx;
				}
				.rt{
					.bai{
						font-size: 26rpx;
						color: #FFFFFF;
						margin-top: 6rpx;
					}
					.hui{
						font-size: 26rpx;
						color: #9F9F9F;
						margin-top: 10rpx;
					}
				}
			}
			.top{
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
	.navactive{
		font-size: 32rpx;
		color: #FFFFFF !important;
		text{
		   display: block;
		   margin: auto;
		   margin-top: 8rpx;
		   width: 40rpx;
		   height: 6rpx;
		   background: #FF8998;
		   border-radius: 5rpx 5rpx 5rpx 5rpx;
		}
	}
    .nav{
		width: 100%;
		height: 50rpx;
		background-color: #010000;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		font-size: 32rpx;
		color: #808080;
		view{
			text-align: center;
			text{
				
			}
		}
	}
	.goods-item {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		.goods-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
			background: #f5f5f5;
		}
		.goods-info {
			flex: 1;
			.goods-name {
				font-size: 28rpx;
				color: #fff;
				font-weight: bold;
			}
			.goods-spec {
				font-size: 24rpx;
				color: #ccc;
				margin-top: 4rpx;
			}
			.goods-row {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 4rpx;
				.goods-qty, .goods-price {
					font-size: 24rpx;
					color: #ccc;
					margin-right: 24rpx;
				}
				.goods-price {
					margin-right: 0;
				}
			}
		}
	}
</style>