<template>
	<view class="container">
		<view class="tab-h flex flex-nowarp flex-y-center">
			<view :class="['item',tabActive == 1?'active':'']" :style="[tabActive == 1?{color:setColor}:'']"
				@click="changeTab(1)">已支付</view>
			<view :class="['item',tabActive == 2?'active':'']" :style="[tabActive == 2?{color:setColor}:'']"
				@click="changeTab(2)">待完成</view>
			<view :class="['item',tabActive == 3?'active':'']" :style="[tabActive == 3?{color:setColor}:'']"
				@click="changeTab(3)">自提</view>
			<view class="tab-h-border"
				:style="{'background-color':setColor,left:tabActive==1?'26%':tabActive==2?'59%':'93%'}"></view>
		</view>
		<view class="tab-b">
			<no-none v-if="orderList.length<=0"></no-none>
			<block v-else>
				<block v-for="(item,index) in orderList" :key="index">
					<!-- 自提订单 -->
					<block v-if="tabActive==3">
						<navigator :url="`/pages/orderDetail/orderDetail?order_id=${item.id}`" v-if="item.state==3"
							class="item">
							<!-- block v-if="item.state==3" -->
							<view class="top flex flex-x-between flex-nowarp">
								<view class="order-info">
									<view class="order-title">
										{{item.storename}}({{item.type == 3?'自助结账':item.tablename}})
									</view>
									<view class="order-title" v-if="item.is_pay == 1&&item.state==3">
										取单号：{{item.number||item.id}}
									</view>  
									<view class="time">{{item.create_time}}</view>
								</view>
								<view class="order-status">
									<view>
										{{item.state==3?'打包带走':''}}
									</view>
									<view :style="{color:setColor}">
										{{
										item.cancel_status==2 ?'订单已退款':
										item.order_status== 0?'待支付':item.order_status== 1?'待配送':
										item.order_status== 2?'配送中':item.order_status== 3?'已完成':
										item.order_status== 4?'已取消':
										item.order_status== 5?'已退款':
										item.order_status== 6?'部分退款':
										item.order_status== 7?'待自提':''
										}}
							<!-- order_status订单状态 0:待支付 1:待配送 2：配送中 3：已完成 4：已取消   5：已退款   6：部分退款   7：待自提 -->
									</view>
								</view>
							</view>
							<view class="goods-list" v-if="item.type != 3">
								<view class="goods flex flex-x-between flex-nowarp flex-y-center"
									v-for="(goods,index2) in item.goods" :key="index2">
									<view class="text-nowarp">{{goods.name}} {{getGoodsSpec(goods.spec)}}</view>
									<view>×{{goods.num}}</view>
									<view class="rebate-info" v-if="goods.user_rebate == 1">会员折扣</view>
									<view>￥{{goods.total_price}}</view>
								</view>
							</view>
							<view class="total-block">
								<block v-if="item.type != 3">共 {{item.count}} 件商品，</block>实付：￥{{item.pay_price}}
							</view>
						</navigator>
					</block>

					<navigator v-else :url="`/pages/orderDetail/orderDetail?order_id=${item.id}`" class="item">
						<view class="top flex flex-x-between flex-nowarp">
							<view class="order-info">
								<view class="order-title">
									{{item.storename}} 
									<block v-if="item.type == 3">
									  ({{item.type == 3?'自助结账':item.tablename||''}})
									</block>
									<block v-if="item.type != 3 && item.state!=2 && item.tablename">
									  ({{item.tablename}})
									</block>
								</view>
								<view class="order-title" v-if="item.is_pay == 1&&item.state!=2">
									取单号：{{item.number||item.id}}
								</view>
								<view class="time">{{item.create_time}}</view>
							</view>
							<view class="order-status">
								<block v-if="item.type!=3">
									<!--type 3 ==自助结账 2==餐后付款  
									 state 2==外卖订单 1 ==店内就餐  3==打包带走;  is_send 已配送  is_dd==1达达配送，2聚合配送-->
									<block v-if="item.state==2">
										<view>{{descFood.food2}}订单</view>
										<view :style="{color:setColor}">
											<block v-if="item.is_send==1&&item.is_dd==1">
												
												{{
													item.cancel_status==2 ?'订单已退款':
													item.order_status== 0?'待支付':
													item.order_status== 1?'待配送':
													item.order_status== 2?'配送中':
													item.order_status== 3?'已完成':
													item.order_status== 4?'已取消':
													item.order_status== 5?'已退款':
													item.order_status== 6?'部分退款':
													item.order_status== 7?'待自提':
													'达达配送'
												}}
												
												
											</block>
											<block v-if="item.is_send==1&&item.is_dd==2">
												{{
													item.cancel_status==2 ?'订单已退款':
													item.order_status== 0?'待支付':item.order_status== 1?'待配送':
													item.order_status== 2?'配送中':item.order_status== 3?'已完成':
													item.order_status== 4?'已取消':
													item.order_status== 5?'已退款':
													item.order_status== 6?'部分退款':
													item.order_status== 7?'待自提':
													'聚合配送'
												}}
											</block>
											<block v-if="item.is_dd==0&&item.is_send==0">
												{{
													item.cancel_status==2 ?'订单已退款':
													item.order_status== 0?'待支付':item.order_status== 1?'待配送':
													item.order_status== 2?'配送中':item.order_status== 3?'已完成':
													item.order_status== 4?'已取消':
												item.order_status== 5?'已退款':
												item.order_status== 6?'部分退款':
												item.order_status== 7?'待自提':
													'待配送'
												}}
											</block>
										</view>
									</block>
									<!-- {{item.cancel_status==2 ?'订单已退款': item.is_pay == 1?'订单已完成':'待支付'}} -->
									<block v-else>
										<view>
											{{item.state==1?descOrder.food1:item.state==3?descOrder.food2:''}}
										</view>
										<view :style="{color:setColor}">
											{{
												item.cancel_status==2 ?'订单已退款':
												item.order_status== 0?'待支付':item.order_status== 1?'待配送':
												item.order_status== 2?'配送中':item.order_status== 3?'已完成':
												item.order_status== 4?'已取消':
												item.order_status== 5?'已退款':
												item.order_status== 6?'部分退款':
												item.order_status== 7?'待自提':''
											}}
										</view>
									</block>
								</block>
								<block v-if="item.type==3">
									{{
										item.cancel_status==2 ?'订单已退款':
										item.order_status== 0?'待支付':item.order_status== 1?'待配送':
										item.order_status== 2?'配送中':item.order_status== 3?'已完成':
										item.order_status== 4?'已取消':
										item.order_status== 5?'已退款':
										item.order_status== 6?'部分退款':
										item.order_status== 7?'待自提':''
									}}
								</block>
							</view>
						</view>
						<view class="goods-list" v-if="item.type != 3">
							<view class="goods flex flex-x-between flex-nowarp flex-y-center"
								v-for="(goods,index2) in item.goods" :key="index2">
								<view class="text-nowarp">{{goods.name}} {{getGoodsSpec(goods.spec)}}</view>
								<view>×{{goods.num}}</view>
								<view>￥{{goods.total_price}}</view>
							</view>
						</view>
						<view class="total-block">
							<block v-if="item.type != 3">共 {{item.count}} 件商品，</block>实付：￥{{item.pay_price}}
						</view>
					</navigator>
				</block>
				<view class="no-more" v-if="is_bottom">
					~没有更多了~
				</view>
			</block>
		</view>
		<view class="hg100">
		</view>
		<page-btm-bar :active="3" />
	</view>
</template>
<script>
	let hideLoading = true;
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				userInfo: {},
				tabActive: 1,
				page: 1,
				is_bottom: false,
				orderList: [],
				orderNum: 0,
				setColor: "",
				store_id:'',
			}
		},
		computed: {
			...mapState(['descOrder','descFood'])
		},
		
		onLoad(e) {
			uni.hideTabBar();
			this.userInfo = uni.getStorageSync('userInfo');
			this.store_id=this.$store.state.store_id;
			this.tabActive = this.$store.state.tabActive;
			console.log(this.tabActive)
			// e.tabActive ? e.tabActive : 1;
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$store.state.color,
			})
			this.setColor = this.$store.state.color;
		},
	// onReady() {
	// 	uni.getSystemInfo({
	// 		success: (e) => {
	// 			console.log("getSystemInfo", e)
	// 		}
	// 	})
	// },
		onShow() {
			this.getMyOrderList(1);
		},

		onReachBottom() {
			if (!this.is_bottom) {
				this.getMyOrderList(this.page + 1)
			}
		},

		onShareAppMessage() {},

		onPullDownRefresh() {
			this.orderList = [];
			this.getMyOrderList(1)
		},

		onShareTimeline() {},

		methods: {
			getGoodsSpec(spec) {
				spec = spec.split(',')
				let specList = []
				for (let i in spec) {
					specList.push(spec[i].split(':')[1])
				}
				return specList.join(',')
			},
			changeTab(index) {
				if (index != this.tabActive) {
					this.tabActive = index
					this.getMyOrderList(1)
				}
			},
			getMyOrderList(page) {
				this.$http.request('xcx/orderlists', {
					user_id: this.userInfo.id,
					page: page,
					store_id:this.store_id,
					type: this.tabActive == 3 ? 1 : this.tabActive
				}, "", "", hideLoading).then(res => {
					if (page == 1) {
						this.orderNum = res.data.count
						this.orderList = res.data.list.length ? res.data.list : []
					} else if (res.data.list && res.data.list.length) {
						this.orderList = this.orderList.concat(res.data.list)
						this.page++
					}
					if (res.data.list.length == 0) {
						this.is_bottom = true
					} else {
						this.is_bottom = false
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
	}

	.text-nowarp {
		width: 55%;
	}

	.hg100 {
		height: 100rpx;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
	}

	.tab-h {
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 900;
		box-shadow: 0 10rpx 20rpx #eee;
	}

	.tab-h .item {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
		flex: none;
		width: 33.3%;
	}

	.tab-h .item.active {
		color: $theme-color;
	}

	.tab-h .tab-h-border {
		height: 4rpx;
		width: 10%;
		background-color: $theme-color;
		border-radius: 2rpx;
		position: absolute;
		bottom: 0;
		margin-left: -15%;
		transition: left 0.3s;
	}


	.tab-b {
		padding: 20rpx;
	}

	.tab-b .item {
		background-color: #fff;
		padding: 20rpx 20rpx 0;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.tab-b .item .top {
		padding: 10rpx 0 20rpx;

	}

	.tab-b .item .top .order-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #555;
	}

	.tab-b .item .top .time {
		font-size: 26rpx;
		color: #555;
		line-height: 1;
		margin-top: 10rpx;
	}

	.tab-b .item .top .order-status {
		font-size: 26rpx;
		color: #666;
		text-align: center;
	}

	.tab-b .item .goods-list {
		padding: 0 20rpx;
		border-top: 1rpx solid #eee;
	}

	.tab-b .item .goods {
		padding: 20rpx 0;
		font-size: 26rpx;
		color: #666;
	}

	.tab-b .item .total-block {
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
		border-top: 1rpx solid #eee;
		font-size: 30rpx;
		font-weight: bold;
		color: #555;
	}
    .rebate-info {
        display: inline-block;
        font-size: 24rpx;
        padding: 2rpx 10rpx;
        background: red;
        color: #fff;
        border-radius: 8rpx;
    }
</style>
