<template>
	<view class="orders">
		<view class="nav">
			<!-- 搜索栏 -->
			<view class="navbox">
				<view class="search">
					<u-input placeholder="搜索" border='none' v-model='search' @input="searchText">
						<template slot="suffix" style='margin-right:40rpx;'>
							<u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
								height="32rpx"></u-image>
						</template>
					</u-input>
				</view>
			</view>
			<!-- 分段器 -->
			<view class="segmented">
				<view class="tab_nav">
					<view class="navTitle" v-for="(item,index) in items" :key="index">
						<view :class="{'active':isActive == index}" @click="checked(index)">
							{{item}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 全部 -->
		<view v-if="isActive === 0">
			<view class="card" v-for="item in orderList">
				<view class="toptitle">
					<view>订单号：62aae0eb9c6fd622</view>
					<view>未核销</view>
				</view>
				<view class="shopCard">
					<image src="http://t9.9026.com/imgs/Kudosbg.png"></image>
					<view style="margin-left: 24rpx;">
						<text class="name">端午佳节五香肉粽子，仅限前</text>
						<text class="tag">礼盒装 2000积分</text>
					</view>
				</view>
				<view class="points">
					<text class="totalName" style="margin-right: 50rpx;">共一项</text>
					<text class="totalName">共计:</text>
					<text class="totalContent">2000积分</text>
				</view>
				<view class="btn">
					<view class="btnitem" @click="openVFcode">
						<text>核销码</text>
					</view>
					<view class="btnitem" v-if="false">
						<text>取消</text>
					</view>
					<view class="btnitem" v-if="false">
						<text>兑换</text>
					</view>
					<view class="btnitem" v-if="false">
						<text>确认收货</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 待兑换 -->
		<view v-if="isActive == 1">
			<view class="card" v-for="item in orderList">
				<view class="toptitle">
					<view>订单号：62aae0eb9c6fd622</view>
					<view>未核销</view>
				</view>
				<view class="shopCard">
					<image src="http://t9.9026.com/imgs/Kudosbg.png"></image>
					<view style="margin-left: 24rpx;">
						<text class="name">端午佳节五香肉粽子，仅限前</text>
						<text class="tag">礼盒装 2000积分</text>
					</view>
				</view>
				<view class="points">
					<text class="totalName" style="margin-right: 50rpx;">共一项</text>
					<text class="totalName">共计:</text>
					<text class="totalContent">2000积分</text>
				</view>
				<view class="btn">

					<view class="btnitem">
						<text>取消</text>
					</view>
					<view class="btnitem" @click="goIntegralExchange">
						<text>兑换</text>
					</view>

				</view>
			</view>
		</view>
		<!-- 待发货 -->
		<view v-if="isActive ==2">
			<view class="card" v-for="item in orderList">
				<view class="toptitle">
					<view>订单号：62aae0eb9c6fd622</view>
					<view>未核销</view>
				</view>
				<view class="shopCard">
					<image src="http://t9.9026.com/imgs/Kudosbg.png"></image>
					<view style="margin-left: 24rpx;">
						<text class="name">端午佳节五香肉粽子，仅限前</text>
						<text class="tag">礼盒装 2000积分</text>
					</view>
				</view>
				<view class="points">
					<text class="totalName" style="margin-right: 50rpx;">共一项</text>
					<text class="totalName">共计:</text>
					<text class="totalContent">2000积分</text>
				</view>
				<view class="btn">

					<view class="btnitem" v-if="false">
						<text>取消</text>
					</view>
					<view class="btnitem" v-if="false" >
						<text>兑换</text>
					</view>

				</view>
			</view>
		</view>
		<!-- 待收货 -->
		<view v-if="isActive == 3">
			<view class="card" v-for="item in orderList" @click="goOrderDetail">
				<view class="toptitle">
					<view>订单号：62aae0eb9c6fd622</view>
					<view>未核销</view>
				</view>
				<view class="shopCard">
					<image src="http://t9.9026.com/imgs/Kudosbg.png"></image>
					<view style="margin-left: 24rpx;">
						<text class="name">端午佳节五香肉粽子，仅限前</text>
						<text class="tag">礼盒装 2000积分</text>
					</view>
				</view>
				<view class="points">
					<text class="totalName" style="margin-right: 50rpx;">共一项</text>
					<text class="totalName">共计:</text>
					<text class="totalContent">2000积分</text>
				</view>
				<view class="btn">
					<view class="btnitem">
						<text>确认收货</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 已完成 -->
		<view v-if="isActive == 4">
			<view class="card" v-for="item in orderList">
				<view class="toptitle">
					<view>订单号：62aae0eb9c6fd622</view>
					<view>未核销</view>
				</view>
				<view class="shopCard">
					<image src="http://t9.9026.com/imgs/Kudosbg.png"></image>
					<view style="margin-left: 24rpx;">
						<text class="name">端午佳节五香肉粽子，仅限前</text>
						<text class="tag">礼盒装 2000积分</text>
					</view>
				</view>
				<view class="points">
					<text class="totalName" style="margin-right: 50rpx;">共一项</text>
					<text class="totalName">共计:</text>
					<text class="totalContent">2000积分</text>
				</view>
				<view class="btn">

				</view>
			</view>
		</view>
		
		<!-- 已经到底啦 -->
		<view class="home-bottom">
			<uni-load-more :status="status" color="#CCCCCC" :content-text="contentText"/>
		</view>
		
		<!-- 弹出层/核销码 -->
		<uni-popup ref="popup" type="center">
			<view class="pop">
				<view class="title"><text>核销码</text></view>
				<view style="margin-left:30rpx;width: 580rpx;height: 2rpx;background: #F0F0F0;"></view>
				<view class="img">
					<image src="http://t9.9026.com/imgs/Kudosbg.png"></image>
				</view>
				<view class="btn">
					<view class="cancel" @click="closeVFcode"><text>取消</text></view>
					<view class="download" @click="handleDownImg"><text>保存图片</text></view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import util from './../../../utils/util.js'
	export default {
		data() {
			return {
				// 搜索
				search:'',
				// 分段器标题
				items: ['全部', '待兑换', '待发货', '待收货', '已完成'],
				isActive: 0,
				// 组件uni-load-more
				status: 'noMore',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '——  已经到底啦  ——'
				},
				// 订单列表
				orderList:[],
			}
		},
		onLoad(o) {
			if (o.isActive) {
				this.isActive = o.isActive
				this.getMyOrder(o.isActive)
			}else{
				this.getMyOrder()
			}
		},
		methods: {
			// 获取订单列表
			getMyOrder(type){
				this.$api.orders.getOrderList({
					page:1,
					status:type||'',
					keyword:this.search
				}).then(res=>{
					console.log(res,type,"订单列表")
					if(res.code==0){
						this.orderList=res.data.data
					}
				})
			},
			//菜单index切换
			checked(index) {
				this.isActive = index
				this.getMyOrder(index)
			},
			// 搜索防抖
			searchText:util.debounce(function(){
				this.goSearch()
			},1000),
			// 搜索
			goSearch(){
				this.$api.orders.getOrderList({
					status:this.isActive,
					page:1,
					keyword:this.search
				}).then(res=>{
					console.log(res,"搜索活动项目列表")
					if(res.code==0){
						this.orderList=res.data.data
					}
				})
			},
			// 跳转订单详情
			goOrderDetail() {
				uni.navigateTo({
					url: '/pages/my/myorders/orderDetail'
				})
			},
			// 跳转积分兑换
			goIntegralExchange(){
				uni.navigateTo({
					url: '/pages/my/integral/integralOrder'
				})
			},
			// 打开弹出层
			openVFcode() {
				this.$refs.popup.open()
			},
			// 关闭弹出层
			closeVFcode() {
				this.$refs.popup.close()
			},
			// 保存图片
			handleDownImg() {
				this.$refs.popup.close()
				// const that = this;
				// uni.downloadFile({
				//     url:'网络路径',
				//     success: res => {
				//         if (res.statusCode === 200) {
				//             uni.saveImageToPhotosAlbum({
				//                 filePath: res.tempFilePath,
				//                 success: function() {
				//                     this.tools.toast('保存成功');
				// 		this.$refs.popup.close()
				//                 },
				//                 fail: function() {
				//                     this.tools.toast('保存失败，请稍后重试');
			 //                 }
				//             });
				//         } else {
				//             this.tools.toast('下载失败');
				//         }
				//     }
				// });
			},
		},
	}
</script>

<style lang="scss" scoped>
	$pageColor:#F9F9F9;
	$bgColor:#FFFFFF;

	// flex布局居中对齐
	@mixin flexlayout {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.orders {
		height: 100%;
		background: $pageColor;
	}
	
	.home-bottom {
		padding-top: 80rpx;
		background-color: #f9f9f9;
	}
	

	::v-deep .segmented-control__text {
		font-size: 32rpx !important;
		font-family: PingFang-SC-Heavy, PingFang-SC;
		font-weight: 500 !important;
		color: #666666 !important;

	}

	::v-deep .segmented-control__item--text {
		font-size: 32rpx !important;
		font-family: PingFang-SC-Heavy, PingFang-SC;
		font-weight: 800 !important;
		padding: 10rpx 0 !important;
		color: #D9A94D !important;
		border-radius: 4rpx !important;

	}
	
	
	
	.nav {
		height: 220rpx;
		width: 750rpx;
		background: $bgColor;

		.navbox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;

			// 搜索
			.search {
				height: 124rpx;
				width: 690px;
				background-color: $bgColor;
				@include flexlayout;

				::v-deep .u-input {
					width: 690rpx !important;
					height: 68rpx !important;
					background: #F1F1F1;
					border-radius: 74rpx;
				}

				::v-deep .u-input__content__field-wrapper {
					padding-left: 36rpx;
				}
				::v-deep .u-input__content__field-wrapper__field{
					color:#999999 !important;
					font-size: 28rpx !important;
				}
			}
		}
		.segmented {
			margin-top: 18rpx;
			width: 750rpx;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			padding:0 30rpx;
			box-sizing: border-box;
			//菜单切换
			.tab_nav {
				width: 690rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang-SC-Heavy, PingFang-SC;
				
			}
			
			.tab_nav .navTitle {
				width: 128rpx;
				flex: none;
				height: 28rpx;
				font-size: 32rpx;
				color: #666;
				display: flex;
				align-items: center;
				justify-content: space-around;
				position: relative;
			}
			
			.active {
				color: #D9A94D;
				font-weight: bold;
			
				&::after {
					display: inline-block;
					content: '';
					width: 48rpx;
					height: 12rpx;
					background: linear-gradient(90deg, #F3D69F 0%, #D9A94D 100%);
					border-radius: 6px;
					position: absolute;
					bottom: -30rpx;
					left: 40rpx;
				}
			}
			}
		
	}

	.card {
		margin-top: 24rpx;
		background: $bgColor;
		border-radius: 16rpx;
		padding: 32rpx 28rpx 24rpx 28rpx;
		box-sizing: border-box;

		.toptitle {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #080F18;
		}

		.shopCard {
			margin-top: 28rpx;
			width: 694rpx;
			height: 164rpx;
			background: #F4F5F6;
			border-radius: 10rpx;
			display: flex;
			align-items: center;

			image {
				width: 132rpx;
				height: 132rpx;
				margin-left: 16rpx;
				display: inline-block;
				border-radius: 12rpx;
			}

			.name {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #080F18;
				display: block;
			}

			.tag {
				font-size: 24rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #666666;
			}
		}

		.points {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-top: 30rpx;

			.totalName {
				font-size: 22rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #080F18;
				margin-right: 10rpx;
			}

			.totalContent {
				font-size: 30rpx;
				font-family: PingFang-SC-Heavy, PingFang-SC;
				font-weight: 800;
				color: #080F18;
			}
		}

		.btn {
			margin-top: 30rpx;
			display: flex;
			justify-content: flex-end;

			.btnitem {
				margin-left: 16rpx;
				width: 170rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				border: 2rpx solid #D0D0D0;

				@include flexlayout() text {
					font-size: 26rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #080F18;
				}
			}
		}

	}

	.pop {
		width: 640rpx;
		height: 764rpx;
		background: $bgColor;
		border-radius: 20rpx;
		padding-top: 64rpx;
		box-sizing: border-box;

		.title {
			@include flexlayout();
			margin-bottom: 24rpx;

			text {
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.img {
			margin-top: 10rpx;
			margin-left: 48rpx;
			width: 544rpx;
			height: 468rpx;
			background: $bgColor;
			border-radius: 2rpx;
			@include flexlayout();

			image {
				width: 392rpx;
				height: 390rpx;
			}
		}

		.btn {
			margin-top: 40rpx;
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;

			.cancel {
				@include flexlayout();
				width: 50%;
				height: 100%;
				border-top: #E5E5E5 solid 1rpx;
				border-right: #E5E5E5 solid 1rpx;

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}

			.download {
				border-top: #E5E5E5 solid 1rpx;
				// border-left:#E5E5E5 solid 0.3rpx;
				@include flexlayout();
				height: 100%;
				width: 50%;

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF7119;
				}
			}
		}
	}
</style>
