<template>
	<view class="myOrder">
		<!-- 头部导航 -->
		<u-sticky>
			<view class="tab_nav">
				<u-tabs :list="list" :current="activeCurrent" :lineColor="ThemeColor.PrimaryColor" :activeStyle="{ color: ThemeColor.PrimaryColor }" @click="toggleOrder"></u-tabs>
			</view>
		</u-sticky>
		<!-- 订单列表 -->
		<view class="order_list">
			<CommonCell 
				v-for="(item, index) in showList" 
				:key="index" 
				:lineInfo="item.orderInfo" 
				:headTitle="item.createTime" 
				:state="item.orderState" 
				:rightTitle="'合计：¥200.15'"
				@showQRcode="showQRcode = true"
			/>
		</view>
		<view v-show="showList.length === 0">
			<u-empty
				mode="list"
				text="暂无订单"
			/>
		</view>
		<!-- 弹出使用二维码框 -->
		<u-popup :show="showQRcode" mode="center" @close="showQRcode = false" round="12rpx">
			<view class="QRbox">
				<view class="use_tip">
					<text class="title">核销码</text>
					<text class="use_time">有效期至 2023-02-023 13:00-16:30</text>
					<text>错过有效期该核销码即失效</text>
				</view>
				<!-- 二维码使用 -->
				<view class="qr_code">
					<image class="qr_logo" src="@/static/myImage/QR_Code.png" mode="widthFix"></image>
					<text>0000000000001</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import CommonCell from '@/components/commonCell.vue'
	import ThemeColor from '@/utils/themeColor';
	export default {
		components: { CommonCell },
		data() {
			return {
				ThemeColor,
				showQRcode: false,
				list: [{name: '全部', id: 0}, {name: '待支付', id: 2}, {name: '已完成', id: 1}, {name: '已取消', id: 4}, {name: '待使用', id: 6}, {name: '待评价', id: 3}, {name: '退款/售后', id: 5}],
				activeCurrent: 0,
				showList: [],
				orderList: [
					{
						createTime: '2022-12-22 15:23:45',
						orderState: 1, // 已完成
						orderInfo: [
							{ title: '订单编号：', valueName: '000015', type: 'text' },
							{ title: '场馆：', valueName: '壹号球馆-1号场', type: 'text' },
							{ title: '预约时段：', valueName: '2022-12-26 14:00-16:00', type: 'text' },
						]
					},
					{
						createTime: '2022-12-22 15:23:45',
						orderState: 2, // 待付款
						orderInfo: [
							{ title: '订单编号：', valueName: '000015', type: 'text' },
							{ title: '场馆：', valueName: '壹号球馆-1号场', type: 'text' },
							{ title: '预约时段：', valueName: '2022-12-26 14:00-16:00', type: 'text' },
						]
					},
					{
						createTime: '2022-12-22 15:23:45',
						orderState: 4, // 已取消
						orderInfo: [
							{ title: '订单编号：', valueName: '000015', type: 'text' },
							{ title: '场馆：', valueName: '壹号球馆-1号场', type: 'text' },
							{ title: '预约时段：', valueName: '2022-12-26 14:00-16:00', type: 'text' },
						]
					},
					{
						createTime: '2022-12-22 15:23:45',
						orderState: 3, // 待评价
						orderInfo: [
							{ title: '订单编号：', valueName: '000015', type: 'text' },
							{ title: '场馆：', valueName: '壹号球馆-1号场', type: 'text' },
							{ title: '预约时段：', valueName: '2022-12-26 14:00-16:00', type: 'text' },
						]
					},
					{
						createTime: '2022-12-22 15:23:45',
						orderState: 6, // 待使用
						orderInfo: [
							{ title: '订单编号：', valueName: '000015', type: 'text' },
							{ title: '场馆：', valueName: '壹号球馆-1号场', type: 'text' },
							{ title: '预约时段：', valueName: '2022-12-26 14:00-16:00', type: 'text' },
						]
					}
				]
			};
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.activeCurrent = Number(option.id)
			this.getList(Number(option.id))
		},
		mounted() {
			this.showList = this.orderList
		},
		methods: {
			toggleOrder(value){
				this.getList(value.id)
			},
			getList(id){
				if(id === 0) {
					this.showList = this.orderList
				} else{
					let list = this.orderList.filter(item => item.orderState === id)
					this.showList = list
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.myOrder{
	background-color: #F6F6F6;
	min-height: 100vh;
	.tab_nav{
		background-color: #fff;
	}
	.order_list{
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		padding: 24rpx 30rpx;
	}
}

.QRbox{
	width: 690rpx;
	height: 544rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	overflow: hidden;
	.use_tip{
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 168rpx;
		background: $uni-color-primary;
		padding: 20rpx 0;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #fff;
		line-height: 32rpx;
		.title{
			font-weight: 500;
			font-size: 28rpx;
		}
		.use_time{
			margin: 24rpx 0 10rpx 0;
		}
	}
	.qr_code{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: 22rpx;
		color: #333;
		font-size: 28rpx;
		line-height: 32rpx;
		margin-top: 56rpx;
		.qr_logo{
			width: 196rpx;
			height: 196rpx;
		}
	}
}
</style>