<template>
	<!-- 盒柜子 -->
	<view class="cabinet">
		<!-- 状态栏 -->
		<view class="status_bar"></view>
		<!-- 标头 -->
		<view class="cabinetTitle">
			<image class="cabinetLogo" :src="require('@/static/myBox.png')" mode=""></image>
			<view @click="jumpConversion" class="exchange">
				<image class="shopImg" :src="require('@/static/shop.png')" mode=""></image>
				<span>兑换订单</span>
			</view>
		</view>
		<!-- 选项卡 -->
		<u-tabs-swiper height="100" gutter="40" bar-width="75" bar-height="8" inactive-color="gray"
			class="cabinetTabControl" font-size="30" :bold="false" active-color="black" @change="tabsChange"
			:current="swiperCurrent" ref="tabs" :list="list" :is-scroll="false"></u-tabs-swiper>
		<!-- 滚动提示字体 -->
		<u-notice-bar bg-color="#FFFDEE" color="#97702D" class="scroll" type="warning" :list="listScroll">
		</u-notice-bar>
		<!-- 订单列表-->
		<view class="orderList">
			<!-- 全部订单 -->
			<view class="orderBoxAll">
				<!--待提货-->
				<view class="orderSingle" v-for="el in staySend" :key="el.id" v-show="swiperCurrent==0">
					<!-- 信息 -->
					<view class="orderDetail" v-if="el.useIntegration==null">
						<!-- 商品图片 -->
						<img class="orderPicture" :src="el.boxPic" alt="">
						<!-- 商品标题 -->
						<view class="orderTitle">
							<p>{{el.boxName}}</p>
							<span>{{$u.timeFormat(el.createTime, 'yyyy/mm/dd hh:MM:ss')}}</span>
						</view>
						<!-- 待提货 -->
						<view class="awaitBox">
							<view class="await">待提货</view>
						</view>
					</view>

					<!-- 订单货物 -->
					<view class="orderCommodity" v-if="el.useIntegration==null">
						<ul class="orderCommodityList">
							<li v-for="(item,index) in el.orderItemList" :key="index">
								<img :src="item.productPic" alt="">
							</li>
						</ul>
					</view>
					<!-- 商品兑换物品 -->
					<view class="orderCommodity" v-if="el.useIntegration!=null">
						<view class="orderShopList">
							<img  :src="el.orderItemList[0].productPic" alt="">
							<p>{{el.orderItemList[0].productName}}</p>
							<span>待提货</span>
						</view>
					</view>
					<!-- 发货 -->
					<view class="orderDeliver">
						<!-- 价格 -->
						<view class="orderPrice" >
							<span v-if="el.useIntegration==null" class="small">￥</span>{{el.boxPrice}}
							<span v-if="el.useIntegration!=null" class="reminder"><span>*</span> 该商品为兑换商品，不能兑换成幸运石</span>
						</view>
						<!-- 按钮发货 -->
						<view class="btnDeliver" @click="navSubmit(el.id)">
							立即发货
						</view>

						<!-- 回收 -->
						<view class="recycle" @click="recycle(el)" v-if="el.useIntegration==null">
							<image class="magic" :src="require('@/static/Bitmap.png')" mode=""></image>
							<span>回收成幸运石</span>
						</view>
					</view>
				</view>

				<!-- 待发货 -->
				<view class="orderSingle" v-for="el in stayPut" :key="el.id" v-show="swiperCurrent==1">
					<!-- 信息 -->
					<view class="orderDetail">
						<!-- 商品图片 -->
						<img class="orderPicture" :src="el.boxPic" alt="">
						<!-- 商品标题 -->
						<view class="orderTitle">
							<p>{{el.boxName}}</p>
							<span>{{$u.timeFormat(el.createTime, 'yyyy/mm/dd hh:MM:ss')}}</span>
						</view>
						<!-- 待提货 -->
						<view class="awaitBox">
							<view class="await">待发货</view>
						</view>
					</view>

					<!-- 订单货物 -->
					<view class="orderCommodity">
						<ul class="orderCommodityList">
							<li v-for="(item,index) in el.orderItemList" :key="index">
								<img :src="item.productPic" alt="">
							</li>
						</ul>
					</view>
					<!-- 发货 -->
					<view class="orderDeliver">
						<!-- 价格 -->
						<view class="orderPrice">
							<span class="small">￥</span>{{el.boxPrice}}
						</view>
						<!-- 按钮发货 -->
						<view class="btnDeliver1">
							等待收货
						</view>

						<!-- 回收 -->
						<!-- <view class="recycle" @click="recycle(el)">
							<image class="magic" :src="require('@/static/Bitmap.png')" mode=""></image>
							<span>回收成幸运石</span>
						</view> -->
					</view>
				</view>

				<!-- 已完成 -->
				<view class="orderSingle" v-for="el in accomplishOrder" :key="el.id" v-show="swiperCurrent==2">
					<!-- 信息 -->
					<view class="orderDetail">
						<!-- 商品图片 -->
						<img class="orderPicture" :src="el.boxPic" alt="">
						<!-- 商品标题 -->
						<view class="orderTitle">
							<p>{{el.boxName}}</p>
							<span>{{$u.timeFormat(el.createTime, 'yyyy/mm/dd hh:MM:ss')}}</span>
						</view>
						<!-- 待提货 -->
						<view class="awaitBox">
							<view class="await">已完成</view>
						</view>
					</view>

					<!-- 订单货物 -->
					<view class="orderCommodity">
						<ul class="orderCommodityList">
							<li v-for="(item,index) in el.orderItemList" :key="index">
								<img :src="item.productPic" alt="">
							</li>
						</ul>
					</view>
					<!-- 发货 -->
					<view class="orderDeliver">
						<!-- 价格 -->
						<view class="orderPrice">
							<span class="small">￥</span>{{el.boxPrice}}
						</view>
						<!-- 按钮发货 -->
						<view class="btnDeliver1" @click="navSubmit(el.id)">
							已收货
						</view>

						<!-- 回收 -->
						<!-- 	<view class="recycle" @click="recycle(el)">
							<image class="magic" :src="require('@/static/Bitmap.png')" mode=""></image>
							<span>回收成幸运石</span>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 内容为空 -->
		<view class="contentEmpty" v-if="!orderEmpty">
			<view class="iconEmpty">
				<image class="iconEmptyImg" :src="require('@/static/empty.png')" mode=""></image>
				<span>空空如也</span>
			</view>
		</view>

		<!-- 下拉列表回收 -->
		<view class="Details">
			<u-popup :mask-close-able="false" v-model="show" mode="bottom" :mask="true" width="750rpx"
				close-icon-color="#FFFFFF" :closeable="true" close-icon-size="60" close-icon="close-circle">

				<!-- 回收物品盒子 -->
				<view class="recycleBox">
					<!-- 滚动视图 -->
					<scroll-view class="scrollBox" :scroll-y="true" :show-scrollbar="true">
						<!-- 头部 -->
						<view class="recycleBoxHeader">
							回收一旦完成将不可逆，操作请留意
						</view>
						<!-- 标题 -->
						<view class="recycleBoxTitle">
							<view class="recycleBoxSize">
								<p v-if="accomplish">确认回收</p>
								<p v-if="!accomplish">回收完成</p>
								<span>幸运石只可用于在商城兑换商品，请确认后进行操作</span>
							</view>
						</view>
						<!-- 回收物品 -->
						<view class="recycleGoods" v-if="accomplish">
							<!-- 每个物品 -->
							<view class="Goods" v-for="el in recycleId.orderItemList" :key="el.id">
								<!-- 信息 -->
								<view class="orderDetail" v-if="recycleId.orderItemList">
									<!-- 商品图片 -->
									<img class="orderPicture" :src="el.productPic" alt="">
									<!-- 商品标题 -->
									<view class="orderTitle">
										<p>{{el.productName}}</p>
									</view>
									<!-- 待提货 -->
									<view class="awaitBox">
										x 1
									</view>
								</view>
							</view>


						</view>

						<!-- 回收已完成 -->
						<view class="accomplish" v-if="!accomplish">
							<image class="accomplishImg" :src="require('@/static/money.png')" mode=""></image>
							<view class="income">
								<image :src="require('@/static/Bitmap.png')" mode=""></image>
								<span>{{money}}</span>
								已入账
							</view>
							<view class="remind">
								您可使用幸运石在商城中 兑换您喜爱的商品,如需查询幸运石余额请移步至[我的]查看
							</view>
							<view class="btnAccomplish" @click="btnAccomplish">
								完成
							</view>
						</view>
					</scroll-view>
					<!-- 确认回收 -->
					<view class="affirm" v-if="accomplish">
						<view class="leftSize">
							<view class="quantity">
								<p>回收魔石数量：</p>
								<image :src="require('@/static/Bitmap.png')" mode=""></image>
								<span>{{money}}</span>
							</view>
							<p class="number">共5件商品</p>
						</view>
						<view class="btnRecycle" @click='btnRecycle'>
							确认回收
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		name: "Cabinet",
		data() {
			return {
				// 选项卡
				list: [{
						name: '待提货'
					}, {
						name: '待发货'
					}, {
						name: '已完成'
					},
					// {
					// 	name: '已回收'
					// },
				],
				// 选项卡下标
				swiperCurrent: 0,

				listScroll: [
					'滚动信息条',
					'产品送达时间请参考个人中心物流时间'
				],
				// 下拉物品
				show: false,
				//回收完成
				accomplish: true,
				// 数组
				orderArr: ["待提货", "待提货", "待提货", "待提货", "待提货", "待提货", "已回收"],
				recycleId: "",
				money: 0,
				// 全部订单
				// listOrder: [],
				// 待发货
				staySend: null,
				// 待收货
				stayPut: null,
				// 已完成
				accomplishOrder: null,
				//空空如也
				orderEmpty: false
			}
		},
		methods: {
			// tabs通知swiper切换
			async tabsChange(index) {
				this.swiperCurrent = index;
				switch (index) {

					case 0:
						await this.$store.dispatch("gainOrderAll", {
							status: 1,
							isToken: uni.getStorageSync("isToken")
						});
						// 获取待发货订单
						this.staySend = this.$store.state.order.orderStatus
						if (this.staySend == null) {
							this.orderEmpty = false
						} else {
							this.orderEmpty = true
						}
						break;
					case 1:
						await this.$store.dispatch("gainOrderAll", {
							status: 2,
							isToken: uni.getStorageSync("isToken")
						});
						// 获取待收货订单
						this.stayPut = this.$store.state.order.orderStatus
						if (this.stayPut == null) {
							this.orderEmpty = false
						} else {
							this.orderEmpty = true
						}
						break;
					case 2:
						await this.$store.dispatch("gainOrderAll", {
							status: 3,
							isToken: uni.getStorageSync("isToken")
						});
						// 获取已完成订单
						this.accomplishOrder = this.$store.state.order.orderStatus
						if (this.accomplishOrder == null) {
							this.orderEmpty = false
						} else {
							this.orderEmpty = true
						}
						break;
					default:
						// n不为1，也不为2 执行的代码块
				}

			},
			//跳转至兑换页面、
			jumpConversion() {
				// this.$Router.push({
				// 	name: "conversionorder"
				// })
				this.$refs.uToast.show({
					title: '敬请期待',
					type: 'info'
				})
			},
			//跳转提交订单页
			navSubmit(isId) {
				this.$Router.push({
					path: "/pages/cabinet/submit/submit",
					query: {
						isID: isId
					}
				})
			},
			// 回收物品下拉栏
			recycle(el) {
				console.log(el);
				this.accomplish = true
				this.show = !this.show
				this.recycleId = el
				this.money = 0
				el.orderItemList.forEach(ele => {
					this.money += 100 * parseInt(ele.productPrice)
				})
			},

			// 确认回收物品
			async btnRecycle() {
				this.accomplish = false
				try {
					await this.$store.dispatch("gainRecycle", {
						isToken: uni.getStorageSync("isToken"),
						isId: this.recycleId.id
					})
					this.$refs.uToast.show({
						title: '回收成功',
						type: 'success',
					})
					//更新
					this.$store.dispatch("gainInfo", uni.getStorageSync("isToken"))
					//获取订单a
					await this.$store.dispatch("gainOrderAll", {
						status: 1,
						isToken: uni.getStorageSync("isToken")
					});
					this.staySend = this.$store.state.order.orderStatus
					if (this.staySend == null) {
						this.orderEmpty = false
					} else {
						this.orderEmpty = true
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e)
				}

			},

			// 回收完成按钮
			btnAccomplish() {
				this.accomplish = true
				this.show = !this.show
			},

		},
		async onShow() {
			// 获取待发货订单
			await this.$store.dispatch("gainOrderAll", {
				status: 1,
				isToken: uni.getStorageSync("isToken")
			});

			this.staySend = this.$store.state.order.orderStatus
			if (this.staySend == null) {
				this.orderEmpty = false
			} else {
				this.orderEmpty = true
			}
			// 获取待收货订单
			await this.$store.dispatch("gainOrderAll", {
				status: 2,
				isToken: uni.getStorageSync("isToken")
			});


			this.stayPut = this.$store.state.order.orderStatus
			

			// 获取已完成订单
			await this.$store.dispatch("gainOrderAll", {
				status: 3,
				isToken: uni.getStorageSync("isToken")
			});

			this.accomplishOrder = this.$store.state.order.orderStatus
			
		}

	}
</script>
<style>
	page {
		background-color: #F7F7F7;
	}
</style>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.cabinet {
		width: 750rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: #F7F7F7;

		// 状态栏
		.status_bar {
			background-color: #ffffff;
			height: var(--status-bar-height);
			width: 100%;
		}

		// 标头
		.cabinetTitle {
			width: 750rpx;
			height: 300rpx;
			display: flex;
			justify-content: space-between;
			padding: 150rpx 50rpx 0;
			background-color: white;
			border-bottom: 1px solid rgba(211, 211, 211, 0.2);

			.cabinetLogo {
				width: 300rpx;
				height: 110rpx;
			}

			.exchange {
				width: 150rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.shopImg {
					width: 60rpx;
					height: 64rpx;
					margin-bottom: 10rpx;

				}
			}


		}

		// 选项卡
		.cabinetTabControl {

			// background-color: sandybrown!important;
			// 选项条设置
			::v-deep.u-tabs-scroll-box {
				justify-content: flex-start !important;

				// 部落
				.UEl_0 {
					width: 140rpx !important;
					flex: 0 !important;
					margin-left: 20rpx !important;
				}

				//待提现
				.UEl_1 {
					width: 140rpx !important;
					flex: 0 !important;
					margin-left: 10rpx !important;
				}

				//已完成
				.UEl_2 {
					width: 140rpx !important;
					flex: 0 !important;
					margin-left: 10rpx !important;
				}

				//已回收
				.UEl_3 {
					width: 140rpx !important;
					flex: 0 !important;
					margin-left: 10rpx !important;
				}

				.u-scroll-bar {
					margin-left: 18rpx !important;
				}
			}

		}

		.scroll {
			width: 750rpx !important;
		}

		//订单
		.orderList {
			width: 750rpx;
			display: flex;
			justify-content: center;

			//全部订单
			.orderBoxAll {
				display: flex;
				flex-direction: column;
				margin-top: 30rpx;
				background-color: white;
				width: 680rpx;
				background-color: #F7F7F7;

				// 每一个订单
				.orderSingle {
					background-color: white;
					border-radius: 15rpx;
					width: 680rpx;
					display: flex;
					margin-bottom: 25rpx;

					align-items: center;
					flex-direction: column;

					// 信息
					.orderDetail {
						width: 640rpx;
						height: 240rpx;
						display: flex;
						// background-color: red;
						justify-content: space-between;
						align-items: center;

						//商品图片
						.orderPicture {
							width: 200rpx;
							height: 200rpx;
						}

						// 商品标题
						.orderTitle {
							width: 300rpx;
							height: 200rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							p {
								font-size: 14px;
								overflow: hidden;
								/* 设置元素为弹性伸缩盒 */
								display: -webkit-box;
								/* 设置弹性盒纵向排列 */
								-webkit-box-orient: vertical;
								/* 你要显示多少行 而且设置这个属性后，不需要单独设置ellipsis就可以显示为省略号*/
								-webkit-line-clamp: 2;
							}

							span {
								font-size: 13px;
								color: darkgray;
							}
						}

						//待提货
						.awaitBox {
							width: 110rpx;
							height: 200rpx;
							display: flex;
							align-items: flex-start;

							.await {
								text-align: center;
								font-size: 15px;
								color: #D34431;
							}
						}

					}

					// 订单货物
					.orderCommodity {
						width: 680rpx;
						height: 150rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.orderCommodityList {
							width: 640rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							li {
								width: 120rpx;
								height: 120rpx;
								list-style: none;

								img {
									width: 120rpx;
									height: 120rpx;
								}
							}
						}
						//幸运石
						.orderShopList {
							width: 640rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							img{
								width: 120rpx;
								height: 120rpx;
							}
							p{
								width: 300rpx;
								height: 120rpx;
							}
							span{
								width: 110rpx;
								height: 120rpx;
								text-align: center;
								font-size: 15px;
								color: #D34431;
							}
						}
					}

					// 发货
					.orderDeliver {
						width: 640rpx;
						height: 130rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						// 价格
						.orderPrice {
							font-size: 24px;
							font-weight: 700;

							.small {
								font-weight: 200;
								font-size: 13px;
							}
							.reminder{
								span{
									color: red;
								}
								color: darkgray;
								font-size: 12px;
							}
						}

						// 发货按钮
						.btnDeliver {
							width: 170rpx;
							height: 75rpx;
							line-height: 75rpx;
							font-size: 15px;
							color: white;
							text-align: center;
							border-radius: 5px;
							background-image: linear-gradient(to bottom right, #FFCB93, #F72934);
						}

						// 已发货
						.btnDeliver1 {
							width: 170rpx;
							height: 75rpx;
							line-height: 75rpx;
							font-size: 20px;
							color: gray;
							text-align: center;
							border-radius: 5px;
						}


						// 回收
						.recycle {
							width: 250rpx;
							height: 78rpx;
							border: 1px solid gainsboro;
							display: flex;
							align-items: center;
							justify-content: space-around;
							font-size: 15px;
							border-radius: 5px;
							padding-left: 12rpx;

							.magic {
								width: 20rpx;
								height: 40rpx;
							}
						}
					}


				}
			}


		}

		//内容为空
		.contentEmpty {
			width: 750rpx;
			height: 600rpx;
			background-color: #F7F7F7;
			display: flex;
			justify-content: center;
			align-items: center;

			.iconEmpty {
				width: 250rpx;
				height: 350rpx;
				display: flex;
				align-items: center;
				flex-direction: column;

				// background-color: green;	
				.iconEmptyImg {
					width: 250rpx;
					height: 250rpx;
				}

				span {
					display: block;
					width: 250rpx;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					font-size: 16px;
					color: gray;
				}
			}
		}


		// 下拉商品内容
		// 下拉商品
		.Details {

			// 关闭按钮
			::v-deep .u-drawer-content {
				// background-color: red!important;

				.u-close {
					top: -85rpx !important;
					right: 35rpx !important;
				}

			}

			// 上边框颜色
			::v-deep .u-drawer-content-visible {
				// overflow: hidden;
				// border-radius: 20rpx !important;

				.u-drawer__scroll-view {
					// border-top: 25rpx solid #CA81F7 !important;
					// border-radius: 20rpx !important;
					// border-image: linear-gradient(#CA81F7, #79ECFF, #FFE7BE) 250 50 20 20 !important;

				}
			}


			// 回收盒子
			.recycleBox {
				width: 750rpx;
				height: 950rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				// 滚动视图
				.scrollBox {
					position: relative;
					width: 750rpx;
					height: 1000rpx;
					display: flex;
					align-items: center;
					flex-direction: column;

					// 头部
					.recycleBoxHeader {
						width: 750rpx;
						height: 80rpx;
						background: #FFFDEE;
						border-radius: 20px 20rpx 0 0;
						text-align: center;
						line-height: 80rpx;
						color: #97702D;
						font-size: 17px;
					}

					//标题
					.recycleBoxTitle {
						width: 750rpx;
						height: 160rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						// background-color: green;
						.recycleBoxSize {
							width: 700rpx;
							height: 100rpx;

							// background-color: red;
							p {
								font-size: 20px;
								margin-bottom: 20rpx;
							}

							span {
								font-size: 13x;
								color: darkgray;
							}
						}

					}

					// 回收盒子
					.recycleGoods {
						width: 750rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						background-color: white;
						margin-bottom: 170rpx;

						.Goods {
							background-color: #F7F7F7;
							width: 700rpx;
							display: flex;
							margin-bottom: 25rpx;
							align-items: center;
							flex-direction: column;

							// 信息
							.orderDetail {
								width: 640rpx;
								height: 240rpx;
								display: flex;
								// background-color: red;
								justify-content: space-between;
								align-items: center;

								//商品图片
								.orderPicture {
									width: 200rpx;
									height: 200rpx;
									border: 1px solid yellow;
								}

								// 商品标题
								.orderTitle {
									width: 300rpx;
									height: 200rpx;
									display: flex;
									flex-direction: column;
									justify-content: space-between;

									p {
										font-size: 14px;
										overflow: hidden;
										/* 设置元素为弹性伸缩盒 */
										display: -webkit-box;
										/* 设置弹性盒纵向排列 */
										-webkit-box-orient: vertical;
										/* 你要显示多少行 而且设置这个属性后，不需要单独设置ellipsis就可以显示为省略号*/
										-webkit-line-clamp: 2;
									}

									span {
										font-size: 13px;
										color: darkgray;
									}
								}

								//商品数量
								.awaitBox {}

							}



						}
					}

					// 完成
					.accomplish {
						width: 750rpx;
						height: 800rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						.accomplishImg {
							width: 270rpx;
							height: 270rpx;
							margin-top: 80rpx;
						}

						.income {
							margin-top: 50rpx;
							display: flex;
							align-items: center;
							font-size: 20px;

							image {
								width: 20rpx;
								height: 40rpx;
								margin-right: 10rpx;
							}
						}

						.remind {
							width: 600rpx;
							text-align: center;
							color: darkgray;
							font-size: 14px;
						}

						.btnAccomplish {
							width: 270rpx;
							height: 100rpx;
							margin-top: 20rpx;
							background: linear-gradient(140deg, #FFCB93 0%, #F72934 100%);
							text-align: center;
							line-height: 100rpx;
							box-shadow: 0px 4px 0px 0px rgba(146, 45, 45, 0.5000);
							font-size: 16px;
							color: white;
							border-radius: 10rpx;
						}
					}

				}

				// 确认回收
				.affirm {
					width: 750rpx;
					padding: 0 15rpx;
					height: 150rpx;
					position: fixed;
					bottom: 0;
					background-color: white;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.leftSize {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						font-size: 16px;

						.quantity {
							display: flex;
							align-items: center;

							span {
								font-size: 22px;
							}

							image {
								width: 20rpx;
								height: 40rpx;
								margin: 0 15rpx;
							}
						}

						.number {
							color: darkgray;
						}
					}

					// 确认回收
					.btnRecycle {
						width: 170rpx;
						height: 75rpx;
						line-height: 75rpx;
						font-size: 15px;
						color: white;
						text-align: center;
						border-radius: 5px;
						background-image: linear-gradient(to bottom right, #FFCB93, #F72934);
					}
				}
			}
		}

	}
</style>