<template>
	<view class="order-page">
		<view class="nav" :style="{'padding-top': statusBarHeight}">
			<image src="@/static/mine/fh.png" mode="" class="nav-back" @click="goBack"></image>
			<view class="nav-title">我的订单</view>
			<view class="nav-back"></view>
		</view>
		
		
		<view class="tab">
			<view class="tab-item" :class="{'active':tabIndex === index}" v-for="(item,index) in tabList" :key="index" @click="tabCk(index)">
				<!-- <image src="@/static/mine/tab_bottom.png" mode="" class="tab-img" v-if="tabIndex === index"></image> -->
				<view class="tab-value">{{item.label}}</view>
			</view>
		</view>
		
		
		<scroll-view class="scroll-list-view" scroll-y="true" scroll-with-animation @scrolltolower="scrolltolower">
			<view v-if="list.length === 0" style="padding-top: 200rpx;">
				<empty></empty>
			</view>
			<view class="list" v-for="(item,index) in list" :key="index" @click.stop="goDetail(item)">
				<view class="list-header">
					<view class="header-left">
						<view class="left-title">订单编号：</view>
						{{item.no}}
					</view>
					<view class="header-right">{{statusObj[item.status]}}({{item.type === 'MALL' ? '商城' : '盲盒'}})</view>
				</view>
				<view class="list-detail">
					<image :src="item.productCoverResource.url" mode="aspectFill" class="detail-img"></image>
					<view class="detail">
						<view class="name">{{item.productName}}</view>
						<view class="price-name">
							<view class="old-price"><text>¥</text>{{item.amount}}</view>
							<view class="num">x {{item.quantity}}</view>
						</view>
					</view>
				</view>
				<view class="price">
					
					<view class="new-price" v-if="item.method === 'ALIPAY' || item.method === 'WECHAT'">
						<view class="new-sym">实付金额</view>
						<view class="new-value">¥{{item.totalAmount}}</view>
					</view>
					<view class="new-price" v-if="item.method === 'POINTS'">
						<view class="new-sym">实付积分</view>
						<view class="new-value">{{item.points}}</view>
					</view>
					<view class="new-price" v-if="item.method === 'NONE'">
						<view class="new-sym">无需支付</view>
					</view>
				</view>
				<view class="list-footer" v-if="item.status === 'WAITING_FOR_RECEIPT' || item.status === 'RECEIVED' || item.status === 'COMPLETED' || item.status === 'SHIPPED'">
					<!-- <view class="btn del" v-if="item.status === 'COMPLETED'">删除订单</view> -->
					<view class="btn btn-active" v-if="item.status === 'WAITING_FOR_RECEIPT' || item.status === 'RECEIVED'" @click.stop="orderReceipt(item)">确认收货</view>
					<view class="btn btn-active" v-if="item.status === 'COMPLETED'" @click.stop="againProduct(item)">再次购买</view>
					<view class="btn del" v-if="item.status === 'WAITING_FOR_RECEIPT' || item.status === 'SHIPPED' || item.status === 'RECEIVED'" @click.stop="lookLogistics(item)">物流信息</view>
				</view>
			</view>
			<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
		</scroll-view>
		<view class="dlg" v-if="openShow" @click="close">
			<view class="dlg-main" @click.stop="">
				<view class="popup-scroll">
					<logistics :wlInfo="detailData.logistics" :img="detailData.productCoverResource.url" :name="detailData.productName" :address="address" :logisticsStatus="detailData.logisticsStatus"></logistics>
				</view>
				<image src="@/static/order/close.png" mode="" class="popup-close" @click.stop="close"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
	import { orderList,orderDetail,orderReceiptApi } from '@/API/order.js'
	import logistics from '@/components/xinyu-logistics/xinyu-logistics.vue'
	export default{
	mixins: [myMixins],
		data(){
			return{
				statusBarHeight,
				tabList:[
					{label:"全部",value:''},
					{label:"待发货",value:'WAITING_FOR_SHIPMENT'},
					{label:"待收货",value:'WAITING_FOR_RECEIPT'},
					{label:"已完成",value:'COMPLETED'},
				],
				tabIndex:0,
				list:[],
				type:'',
				page:1,
				statusObj:{
					"WAITING_FOR_PAYMENT":"待付款",
					"WAITING_FOR_SHIPMENT":"待发货",
					"SHIPPED":"已发货",
					"WAITING_FOR_RECEIPT":"待收货",
					"RECEIVED":"已收货",
					"COMPLETED":"已完成",
					"CANCELED":"已取消",
					"REFUNDED":"已退款",
					"RECOVERED":"已回收"
				  },
				  height:'0rpx',
				  total:0,
				  openShow:false,
				  detailData: {
				  	logistics:{}
				  },
				  address:'',
			}
		},
		components:{logistics},
		onLoad(opation){
			this.type = opation.type
			this.tabList.forEach((item,index) => {
				if(item.value === this.type){
					this.tabIndex = index
				}
			})
			this.getOrderList()
		},
		methods:{
			goBack(){
				uni.switchTab({
					url:`/pages/mine/index`
				})
			},
			orderReceipt(item){
				uni.showLoading()
				orderReceiptApi({id:item.id}).then(res => {
					uni.hideLoading(),
					this.$api.msg(res.message)
					if(res.code === 200){
						this.getOrderList()
					}
				})
			},
			getOrderList(){
				uni.showLoading()
				orderList({page:this.page,size:10,status:this.tabList[this.tabIndex].value}).then(res => {
					uni.hideLoading()
					this.total = res.data.total
					if(this.page > 1){
						this.list = [...this.list,...res.data.content]
					}else{
						this.list = res.data.content
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			tabCk(index){
				this.page = 1
				this.tabIndex = index
				this.getOrderList()
			},
			scrolltolower(){
				if(this.total == this.list.length){
					return
				}
				this.page += 1
				this.getOrderList()
			},
			goDetail(item){
				uni.navigateTo({
					url:`/pages/mine/orderStatusDetail?no=${item.no}`
				})
			},
			againProduct(item){
				uni.navigateTo({
					url:`/pages/product/detail?id=${item.productId}`
				})
			},
			close(){
				this.openShow = false
			},
			lookLogistics(item){
				this.getDetail(item.no)
			},
			
			// 获取详情
			getDetail(no) {
				uni.showLoading()
				orderDetail(no, {
					no
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						this.detailData = res.data
						this.address = this.detailData.receiver.address
						this.openShow = true
			
					} else {
						this.$api.msg(res.message)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	page{
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
	}
	.order-page{
		.nav{
			z-index: 100;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 23rpx;
			box-sizing: border-box;
			position: fixed;
			top: 0;
			left: 0;
			.nav-back{
				width: 19rpx;
				height: 34rpx;
				z-index: 11;
			}
			.nav-title{
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
			}
		}
		.tab{
			width: 100%;
			display: flex;
			align-items: center;
			padding: 130rpx 22rpx 30rpx 22rpx;
			.tab-item{
				width: 176rpx;
				text-align: center;
				font-size: 32rpx;
				color: #999;
				position: relative;
				// border: 1px solid red;
				.tab-value{
					
				}
				.tab-img{
					position: absolute;
					left: 50rpx;
					bottom: 6rpx;
					width: 77rpx;
					height: 11rpx;
					z-index: 1;
				}
			}
			.active{
				background-image: url('@/static/mine/tab_bottom.png');
				background-repeat: no-repeat;
				background-size: 60%;
				background-position: bottom;
				color: #000000;
				font-weight: bold;
			}
		}
		.scroll-list-view{
			height: calc(100vh - 200rpx);
			box-sizing: border-box;
			padding-bottom: 30rpx;
			// padding-top: 20rpx;
			
			.list{
				width: 706rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				width: 710rpx;
				margin: 0rpx 20rpx;
				padding: 24rpx 44rpx 25rpx 21rpx;
				margin-bottom: 20rpx;
				.list-header{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.header-left{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #888888;
						.left-title{}
					}
					.header-right{
						font-weight: 500;
						font-size: 24rpx;
						color: #F0463A;
					}
				}
				.list-detail{
					display: flex;
					align-items: center;
					margin-top: 27rpx;
					.detail-img{
						width: 146rpx;
						height: 146rpx;
					}
					.detail{
						width: 498rpx;
						margin-left: 22rpx;
						.name{
							width: 478rpx;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.price-name{
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 75rpx;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							.num{
								font-weight: 500;
								font-size: 28rpx;
								color: #888888;
							}
						}
						
					}
				}
				
				.price{
					display: flex;
					justify-content: flex-end;
					margin-top: 25rpx;
					// margin-top: 36rpx;
					
					.old-price{
						// font-size: 24rpx;
						// color: #999999;
					}
					.new-price{
						// font-weight: bold;
						// font-size: 32rpx;
						// color: #000000;
						
						.new-sym{
							font-weight: 500;
							font-size: 22rpx;
							color: #888888;
							// margin-right: 10rpx;
							// font-size: 24rpx;
							// display: inline-block;
							// margin-right: 6rpx;
						}
						.new-value{
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							margin-left: 10rpx;
						}
					}
				}
				.list-footer{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-top: 54rpx;
					.btn{
						width: 151rpx;
						height: 62rpx;
						background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
						border-radius: 31rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						margin-left: 21rpx;
					}
					.del{
						font-weight: 500;
						font-size: 24rpx;
						color: #F0463A;
						background: #fff;
						border: 1px solid #F0463A;
					}
					.btn-active{}
				}
			}
			.no-data{
				font-size: 24rpx;
				text-align: center;
				padding: 10rpx 0 30rpx 0;
			}
		}
		.dlg{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			z-index: 999;
			background-color: rgba(0,0,0,0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			.dlg-main{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.popup-scroll {
					width: 706rpx;
					height: 900rpx;
					background-color: #fff;
					border-radius:20rpx;
					overflow-y: scroll;
				}
				
				.popup-close {
					margin-top: 36rpx;
					width: 54rpx;
					height: 54rpx;
				}
			}
		}
	}
</style>