<template>
	<view>
		<view class="order_list" :class="['theme', themeObj.name]">
			<view class="top_nav">
				<view style="background-color: #FFFFFF;">
					<navBar :showLeft="true" navTitle="订单列表" textcolor="#000" :leftBg="false"></navBar>
				</view>
				<!-- 顶部tab -->
				<view class="nav_top" style="border-bottom: 1upx solid #F8F8F8;">
					<tabs :tabList="tabList" :active="active" @setTabs="setTabs"></tabs>
				</view>
			</view>
			<!-- 占位 -->
			<view :style="{height: 35+statusBarHeight+toBarHeight+'px'}"></view> 
			<scroll-view scroll-y="true" style="height: calc(100vh - 90px)"
			 @scrolltolower="handleLoadMore">
				<view class="list_box">
					<view v-for="(item, index) in orderList" :key="index" class="lists">
						<view class="type">
							<text class="order_id" @tap="jumpDetails(item)">订单编号:{{item.id}}</text>
							<view class="flex flex-direction">
								<text class="order_type">
									{{ item.state | setStatus }}
								</text>
								<text class="order-time" v-if="item.time != 0">{{ item.time }}</text>
								
							</view>
						</view>
						<view>
							
						</view>
						<view v-for="(row, index2) in item.orderDetailList" :key="index2" class="top"
						 @tap="jumpDetails(item)">
							<image :src="row.url" mode="aspectFill"></image>
							<view class="top_right">
								<view class="order_name">{{row.goodsName}}</view>
								<view class="sku">规格：{{row.specs || '暂无规格'}}</view>
								<view class="price">
									<view class="t1">￥{{row.price}}</view>
									<view class="t3">
										x{{row.goodsNo}}
									</view>
								</view>
							</view>
						</view>
						<view class="bottom">
							<view class="address">总计：<text style="color: #FF1929;font-size: 36upx;">￥{{item.totalAmount}}</text> </view>
							<!-- <view class="address">店铺地址：北京市海淀区苏家坨乡前沙涧村</view> -->
							<view class="btns">
								<block v-if="item.state == 6">
									<!-- <view class="pay" :style="'color:#fff;background:' + colors+ ';border-color:' + colors" @tap="jumpDetails(item)">去付款</view> -->
									<view class="pay shouhou"  @tap="cencalOrder(item)">取消订单</view>	
								</block>
								<block v-if="item.state == 1">
									<!-- <view class="pay shouhou"  @tap="onRefund(item)">取消订单</view> -->
										<view class="pay shouhou" @tap="onConfirmOrder(item)" >确认提货</view>
								</block>
								<block v-if="item.state == 2">
									<!-- <view class="pay" @tap="onConfirmOrder(item)" :style="'color:#fff;background:' + colors+ ';border-color:' + colors">确认收货</view> -->
									<!-- <view class="pay shouhou" @tap="onRefund(item)">申请退款</view> -->
									<view class="pay shouhou"  @tap="jumpDetails(item)">订单评价</view>
									<view class="pay shouhou" @tap="jumpDetails(item)">申请售后</view>
								</block>
								<block v-if="item.state == 3">
									<view class="pay shouhou"  @tap="jumpDetails(item)">订单评价</view>
									<view class="pay shouhou" @tap="jumpDetails(item)">申请售后</view>
								</block>
								<!-- <view class="pay shouhou" v-if="item.state == 4" @click="delOrder(item)">删除订单</view> -->
							
							</view>
						</view>
					</view>
					<view class="nodata" v-if="isNoMore">—— 到底啦 ——</view>
					<nodata :colors="colors" title="暂无订单信息" v-if="orderList.length == 0"></nodata>
				</view>
			</scroll-view>
		</view>
		<loading v-if="isShow == true"></loading>
	</view>
</template>

<script>
	import { getOrderList, editOrder } from '@/api/index.js'

	import tabs from "../../commponent/public/tabs";
	import loading from "../../commponent/public/loading";
	import navBar from '../../commponent/public/navBar.vue'
	import { ORDER_NAVS } from '@/config/order.js'
import { getUserInfo, setSalesGoods } from '@/utils/auth';
	const app = getApp();
	let timer = null
	export default {
		data() {
			return {
				statusBarHeight: app.globalData.statusHeight,
				toBarHeight: app.globalData.toBar,
				tabList: ORDER_NAVS,
				active: 0,
				orderList: [],
				isShow: true,
				colors: "",
				themeObj: app.globalData.themeObj,
				pageNo: 1,
				pageSize: 10,
				isNoMore: false
			};
		},
		filters: {
			setStatus(value) {
				const textObj = {
					6: '待确认',
					0: '待付款',
					1: '待提货',
					2: '已提货',
					3: '已提货',
					4: '退换货',
					5: '已取消'
				}
				return textObj[value] || '未知'
			}
		},
		components: {
			tabs,
			loading,
			navBar
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			if (options.tabIndex) {
				this.active = Number(options.tabIndex)
				this.getOrderList(ORDER_NAVS[this.active].id)
			}
			
			setTimeout(() => {
				this.setData({
					isShow: false
				});
			}, 600);
		
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			
			// this.getOrderList(ORDER_NAVS[this.active].id)
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			handleLoadMore() {
				if (this.isNoMore) return
				this.pageNo++
				this.getOrderList(ORDER_NAVS[this.active].id)
			},
			onConfirmOrder(item) {
				uni.showModal({
					title:'是否确认提货?',
					confirmColor: this.themeObj.color,
					success: (res) => {
						if(res.confirm){
							item.state = 2
							editOrder(item).then(res => {
								uni.showToast({
									icon: 'none',
									title: '操作成功'
								})
								this.orderList = []
								this.isNoMore = false
								this.pageNo = 1
								this.getOrderList(ORDER_NAVS[this.active].id)
							})
				
						}
					}
				})
			},
			// 0待付款 -1待确认 1待发货 2已提货 3完成订单 4 退换  . -1全部
			getOrderList(val = -2) {
				let s = [
				    {
						
				        "rule": "eq",
				        "type": "string",
				        "dictCode": "",
				        "val": getUserInfo().id,
				        "field": "userId"
				    }
				]
				const stateQuery =  {
					"rule": "eq",
					"type": "int",
					"dictCode": "orderState",
					"val": val,
					"field": "state"
				}
				
				if (val !== -2) {
					stateQuery.val = val === 2 ? '2,3,4' : val
					stateQuery.rule = val === 2 ? 'in' : 'eq'
					s = [...s, stateQuery]
				}
				const params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					superQueryParams: s,
					superQueryMatchType: 'and',
					"column": "createTime",
					order: "desc",
				}
		
				uni.showLoading()
				params.superQueryParams = encodeURI(JSON.stringify(s))
				clearInterval(timer)
				getOrderList(params).then(res => {
					const result = [...this.orderList, ...res.result.records]
					this.isNoMore = res.result.records.length < this.pageSize
					if (val == 0 || val == -2) {
						this.time(result)
					} else {
						this.orderList = Object.freeze(result)
						uni.hideLoading()
					}
					
				}).catch(() => {
					uni.hideLoading()
				})
			},
			time (arr) {
				var self = this;
			
				timer = setInterval(() => {
					const list = arr.map((v, i) => {
						if (v.state !== 0) {
							v.time = 0
							return v
						}
						var nowDate = new Date();
						const endTime = new Date(v.createTime).getTime() + 48 * 60 * 60 * 1000
						var seconds = parseInt((endTime - nowDate) / 1000);
						if (seconds <= 0) {
							this.handlerCancelOrder(v, 'time')
							return v;
						}
						var hours = Math.floor(seconds / (60 * 60));
						if (hours < 10) hours = "0" + hours;
						
						seconds = seconds % (60 * 60);
						var mins = Math.floor(seconds / 60);
						if (mins < 10) mins = "0" + mins;
						
						seconds = seconds % 60;
						if (seconds < 10) seconds = "0" + seconds;
						v.time = hours + ":" + mins + ":" + seconds
						return v
					})
					this.orderList = Object.freeze(list)
				}, 1000);
				uni.hideLoading()
				
			},
			setTabs(item, index) {
				this.setData({
					active: index
				});
				this.orderList = []
				this.isNoMore = false
				this.pageNo = 1
				this.getOrderList(item.id)
			},

			jumpDetails(item) { //模拟跳转商品详情
				setSalesGoods(item)
				uni.navigateTo({
					url: '/pages/views/order/orderDetails?status='+ 3
				});
			},
			handlerCancelOrder(item, type = 'init') {
				item.state = 5
				editOrder(item).then(res => {
					if (type === 'init') {
						uni.showToast({
							icon: 'none',
							title: '操作成功'
						})
					}
					this.orderList = []
					this.isNoMore = false
					this.pageNo = 1
					this.getOrderList(ORDER_NAVS[this.active].id)
				})
			},
			cencalOrder(item) {
				//取消订单
				uni.showModal({
					title:'确认要取消该订单吗?',
					confirmColor:this.colors,
					success: (res) => {
						if(res.confirm){
							this.handlerCancelOrder(item)
						}
					}
				})
			},
			onRefund(item){
				// 申请退款
				uni.navigateTo({
					url: '/pages/views/order/cancelOrder?orderId'
				});
			},
			delOrder(item){
				uni.showModal({
					title:'确认要删除该订单吗?',
					confirmColor:this.colors,
					success: (res) => {
						if(res.confirm){
							console.log('删除成功')
						}
					}
				})
			}
		}
	};
</script>
<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.order_list {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.top_nav{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 200;
	}
	.list_box {
		padding: 0 3%;
		box-sizing: border-box;
		overflow: hidden;
		/* #ifdef MP */
		padding-bottom: 50upx;
		/* #endif */
		width: 100%;
		padding-top: 20upx;
	}

	.lists {
		margin: 0 auto;
		padding: 20upx;
		margin-top: 5upx;
		background-color: #ffffff;
		border-radius: 10upx;
		margin-bottom: 20upx;
		box-shadow: 0upx 0upx 10upx #EDEDED;
		box-sizing: border-box;
		width: 98%;
	}

	.type {
		height: 50upx;
		font-size: 26upx;
		// line-height: 50upx;
		font-weight: bold;
		text-align: right;
		display: flex;
		justify-content: space-between;
	}

	.type .order_id {
		font-weight: 600;
		color: #999;
		font-size: 24upx;
	}
	.type .order-time {
		color: brown;
		font-size: 24upx;
	}

	.lists .top {
		display: flex;
		align-content: center;
		margin-bottom: 20upx;
	}

	.lists .top image {
		min-width: 180upx;
		max-width: 180upx;
		height: 180upx;
		display: block;
		border-radius: 10upx;
	}

	.lists .top .top_right {
		margin-left: 20upx;
		width: 100%;
	}

	.lists .top .order_name {
		line-height: 40upx;
		height: 80upx;
		font-size: 26upx;
		font-weight: bold;
		color: #333;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.lists .top .sku {
		// height: 40upx;
		// line-height: 40upx;
		font-size: 24upx;
		border-radius: 8upx;
		padding: 0 10upx;
		color: #A7A7A7;
		background-color: #F7F7F7;
	}

	.lists .top .price {
		width: 100%;
		display: flex;
		align-items: center;
		height: 40upx;
		line-height: 40upx;
		margin-top: 20upx;
		position: relative;
	}

	.price .t1 {
		font-size: 30upx;
		// font-weight: bold;
		display: block;
		color: $mycolor;
	}

	.price .t2 {
		font-size: 24upx;
		margin-left: 15upx;
		display: block;
		color: #C5C5C5;
		text-decoration: line-through;
	}

	.price .t3 {
		float: right;
		font-weight: bold;
		font-size: 28upx;
		color: #999;
		position: absolute;
		right: 0upx;
		top: 0;
	}

	.list_box .bottom {
		margin-top: 20upx;
	}

	.list_box .bottom .address {
		font-size: 24upx;
		color: #696969;
	}

	.list_box .bottom .btns {
		margin-top: 15upx;
		overflow: hidden;
	}

	.list_box .bottom .btns .pay {
		padding: 8upx 15upx;
		border-radius: 8upx;
		text-align: center;
		font-size: 24upx;
		float: right;
		margin-left: 20upx;
		box-sizing: border-box;
		border: 1upx solid #ddd;
	}

	.pay:active {
		opacity: .8;
	}

	.nodata {
		color: #ccc;
		text-align: center;
		font-size: 24upx;
		margin-bottom: 30upx;
		// height: 80upx;
		// line-height: 80upx;
	}
</style>
