<template>
	<view class="content">
		<uni-nav-bar left-icon="left" color="#000000" style="" backgroundColor="transparent" :fixed="true"
			:statusBar="true" :border="false" @clickLeft="back">
			<view style="width: 100%; font-size: 32rpx; display: flex; align-items: center; justify-content: center;">
				换箱
			</view>
		</uni-nav-bar>

		<view class="header" :style="{top: `calc(${$sys().statusBarHeight}px + 88rpx)`}">
			<view v-for="(v, i) in huanxiang_arr" :key="i" @click="change_head(v.page_no)"
				:class="page_no == v.page_no ? 'header_view_sel' : 'header_view'">
				{{ v.title }}箱
			</view>
		</view>
		<!-- 商品展示 -->
		<view class="goods_v">
			<view class="flex_center" @click="change_saixuan(1, page_no)">
				<text :style="saixuan_index == 1 ? 'color:#333333;' : 'color:#8A8A8A;'">箱号</text>
				<image v-if="saixuan_index == 1" :src="$img('/static/img/bottom_act.png')" class="goods_v_1"></image>
				<image v-else :src="$img('/static/img/bottom.png')" class="goods_v_1"></image>
			</view>
			<view class="flex_center" @click="change_saixuan(2, page_no)" style="margin-left: 40rpx">
				<text :style="saixuan_index == 2 ? 'color:#333333;' : 'color:#8A8A8A;'">余量</text>
				<image v-if="saixuan_index == 2" :src="$img('/static/img/bottom_act.png')" class="goods_v_1"></image>
				<image v-else :src="$img('/static/img/bottom.png')" class="goods_v_1"></image>
			</view>
		</view>
		<!-- 赏品余量 -->
		<view class="yuliang">
			<view class="yuliang_list" v-for="(v, i) in goodsDetail" :key="i" @click="todetail(v.num)">
				<view v-if="v.surplus_all_stock == 0" class="shadow">
					<image :src="$img1('common/yishoukong.png')" mode="scaleToFill" />
				</view>
				<view class="box-num">第{{ v.num }}箱</view>
				<!-- <view class="has-num">
					剩余
					<text>{{ v.surplus_all_stock }}</text>
					张
				</view> -->
				<view class="box column align-center">
					<image :src="$img1('common/box.png')"></image>
					<text class="mt10">
						{{ v.surplus_all_stock }}
					</text>
				</view>
				<view class="type-list">
					<view v-for="(a, b) in v.goodslist" :key="b" class="type-item br10"
						:style="{background: a.shang_info.color}">
						<view class="type-item-title">{{ a.shang_info.title }}</view>
						<view class="type-item-num">
							{{ a.surplus_stock }}/{{ a.stock }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getGoodsPrizeCount, getGoodsPrizeContent } from '@/common/server/goods'
	export default {
		components: {
		},
		data() {
			return {
				z_imgPath: this.$z_img2 + 'shouye/detail/',
				huanxiang_arr: [],
				// '1 - 10箱', '11 - 20箱', '21 - 30箱', '31 - 40箱', '41 - 50箱'
				header_index: 1,
				saixuan_index: 1,
				page_no: 0,
				show: 1,
				goodsDetail: [],

				id: '',
				count: '',
				type_text: '',
				type: ''
			}
		},
		async onLoad(v) {
			this.id = v.id
			this.type_text = v.type_text
			this.type = v.type
			this.getData()
			
			const res = await getGoodsPrizeCount(this.id)
			if (res.status == 1) {
				this.huanxiang_arr = res.data
			}
		},

		methods: {
			back() {
				uni.navigateBack()
			},

			todetail(e) {
				if (this.type == '3') {
					this.$customRouter.navigateTo('/package/index/leitai', {
						goods_id: this.id,
						goods_num: e,
						type_text: this.type_text
					}, 'redirectTo');
				} else {
					this.$customRouter.navigateTo('detail', {
						goods_id: this.id,
						goods_num: e,
						type_text: this.type_text
					}, 'redirectTo');
				}
			},
			change_saixuan(a, b) {
				this.saixuan_index = a
				this.page_no = b
				this.getData()
			},
			change_head(e) {
				this.page_no = e
				this.getData()
			},
			async getData(e) {
				const res = await getGoodsPrizeContent(this.id, this.page_no, this.saixuan_index)
				this.goodsDetail = res.data
			}
		}
	}
</script>

<style lang="scss">
	.list_r text:nth-of-type(2) {
		/* color: #F96026; */
	}

	.list_r>view {
		width: 47%;
		display: flex;
		justify-content: space-between;
		line-height: 44rpx;
	}

	.list_r>view:nth-child(3n-1) {
		margin-left: 15rpx;
	}

	.list_r {
		// margin-left: 40rpx;
		// width: 500rpx;
		display: flex;
		/* justify-content: space-around; */
		flex-wrap: wrap;
		font-size: 24rpx;
		margin-bottom: 15rpx;
		max-height: 183rpx;
		overflow-y: scroll;
	}

	.list_l {
		width: 130rpx;
		height: 116rpx;
		margin: 10rpx auto 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.yuliang {
		padding: 1rpx 0 40rpx;

		&_list {
			padding: 60rpx 30rpx 24rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			width: 710rpx;
			margin: 30rpx auto 0;
			// border: 2rpx solid #ff873a;
			border-radius: 12rpx;
			background-color: #FFFFFF;

			.shadow {
				position: absolute;
				left: 0;
				top: 0;
				background: rgba(0, 0, 0, 0.6);
				width: 100%;
				height: 100%;
				z-index: 1;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 96rpx;
					height: 96rpx;
				}
			}

			.box-num {
				position: absolute;
				right: 22rpx;
				top: 0;
				height: 36rpx;
				display: flex;
				align-items: center;
				padding: 0 16rpx;
				background: #FFCE94;
				border-radius: 0rpx 0rpx 12rpx 12rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
			}

			.has-num {
				position: absolute;
				top: 10rpx;
				right: 30rpx;

				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;

				text {
					color: #08F6BB;
				}
			}

			.box {
				margin-left: 20rpx;

				>image {
					width: 102rpx;
					height: 66rpx;
				}

				>text {
					font-weight: 400;
					font-size: 20rpx;
					color: #333333;
				}
			}

			.type-list {
				width: calc(100% - 150rpx);
				box-sizing: border-box;
				padding-left: 16rpx;
				display: grid;
				grid-template-columns: repeat(3, 146rpx);
				grid-gap: 20rpx 24rpx;

				.type-item {
					width: 146rpx;
					display: flex;
					justify-content: space-between;
					border: 2rpx solid #FFFFFF;
					box-sizing: border-box;
					padding: 8rpx 14rpx;

					&-title {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					&-num {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}
			}
		}
	}

	.qiangguang>image {
		width: 100%;
		height: 100%;
	}

	.qiangguang {
		width: 100%;
		height: 100%;
		/* border-radius: 20rpx; */
		/* background: rgb(0, 0, 0);
		opacity: 0.45; */
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
	}

	.header_view_sel {
		color: #333333;
		border-radius: 10rpx;
		position: relative;
		font-size: 20rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
		background-color: #E6F791;

		// &::after {
		// 	content: '';
		// 	position: absolute;
		// 	left: 50%;
		// 	bottom: 0;
		// 	transform: translateX(-50%);
		// 	width: 48rpx;
		// 	height: 4rpx;
		// 	background: #D8D8D8;
		// }
	}

	.header_view {
		padding-left: 24rpx;
		padding-right: 24rpx;
		font-size: 20rpx;
		color: #8A8A8A;
	}

	.header>view {
		// width: 180rpx;
		height: 58rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.arrow {
			position: absolute;
			left: 50%;
			bottom: -30rpx;
			transform: translateX(-50%);
			width: 34px;
			height: 34px;
		}

		&.active {
			color: transparent;
			background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%);
			background-clip: text;
		}
	}

	.header {
		width: 690rpx;
		height: 88rpx;
		padding: 0 30rpx;
		/* background: #080b15; */
		display: flex;
		align-items: center;
		font-size: 28rpx;
		overflow-x: scroll;
		color: #333333;
		position: fixed;
		/* #ifdef MP */
		top: 0;
		/* #endif */
		/* #ifndef MP */
		top: 88rpx;
		/* #endif */
		z-index: 15;
	}

	.content {
		padding: 1rpx 0 100rpx;
		width: 100vw;
		background-color: #F7F7F7;
		min-height: 100vh;
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}

	.goods_v {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
		margin: 10rpx 0 0;
		padding: 0 30rpx;
		padding-top: 100rpx;
	}

	.goods_v_1 {
		width: 32rpx;
		height: 32rpx;
		margin-left: 10rpx;
	}
</style>