<!--
 * @Date: 2023-11-17 15:19:49
 * @LastEditTime: 2023-12-02 17:20:01
 * @Description: content
-->
<template>
	<view class="content">
		<uni-nav-bar left-icon="left" title="权益中心" color="#000000" backgroundColor="transparent" :fixed="true"
			:statusBar="true" :border="false" @clickLeft="$c.back"></uni-nav-bar>
		<view class="">
			<view v-if="pageData" class="user-card br20">
				<!-- 	<view class="avatar">
							<image :src="pageData.user_img" lazy-load mode="aspectFill"></image>
						</view> -->
				<view class="lv">LV.{{ pageData.quan_yi_level.level }}</view>

				<view class="rule-btn" @click="toRule">
					<uni-icons type="info-filled" color="#8A8A8A"></uni-icons>
				</view>


				<view class="" style="position: absolute; top: 90rpx; left: 32rpx;">
					<view class="need">
						<template v-if="pageData.quan_yi_level.cha >= 0">
							差{{ pageData.quan_yi_level.cha }}欧气值升级
						</template>
						<template v-else-if="pageData.quan_yi_level.cha == -1">已满级</template>
					</view>
					<view class="progress-buy">
						<view class="progress">
							<cmd-progress :percent="pageData.quan_yi_level.jindu" :show-info="false"
								stroke-color="#FF862D;" :strokeWidth="5"></cmd-progress>
						</view>
					</view>
				</view>
				<view class="buy" @click="$c.to({ type: 3, url: '/pages/shouye/index' })">
					<text>去购买</text>
				</view>

			</view>

			<view v-if="pageData" class="prize-card">

				<view class="mask flex">
					<view class="prize-item1" :key="-1">
						<view class=""></view>

						<view class="center" style="color: #333333; font-size: 24rpx;">
							普通奖励
						</view>

						<view class="center" style="color: #333333; font-size: 24rpx;">
							高级奖励
						</view>
						<view class="get-btn">

						</view>
					</view>
					<scroll-view class="prize-list" scroll-x :scroll-into-view="curLvId">
						<view class="prize-item" v-for="(item, i) in pageData.level_list" :key="i"
							:id="`prize-item${item.level}`">
							<view class="lv">{{ item.level }}级</view>

							<view class="prize center" @click="preview(item)">
								<image :src="$img1('my/quan.png')" mode="aspectFit"></image>
							</view>

							<view class="prize center" @click="preview(item)" style="background: #FFFFFF;">
								<image :src="$img1('my/liwu.png')" mode="aspectFit"></image>
							</view>
							<view v-if="item.is_ling == 1 && item.pu_jiang.length>0" class="get-btn center"
								@click="doReceive(item)">
								领取
							</view>
						</view>
					</scroll-view>
				</view>

			</view>
		</view>


		<view class="task">
			<view class="task-tab center">
				<view class="task-tab-item align-end" v-for="(item, i) in tabList" :key="i" :class="{
					act: tabCur == i
				  }" @click="tabChange(i)">
					<!-- <image v-if="i == 0" :src="$img1('index/ljLeft.png')"></image> -->
					<text class="center">{{ item.title }}</text>
					<!-- <image v-if="i == 1" :src="$img1('index/ljRight.png')"></image> -->
				</view>
			</view>

			<view class="task-item" v-for="(item, i) in taskList" :key="i">
				<view class="task-l">
					<view class="title">{{ item.title }}<text
							class="ml10">({{ item.ywc_count }}/{{ item.number }})</text></view>

					<view class="num">欧气值
						<text>+{{ item.z_number }}</text>
					</view>

					<!-- 	<view class="progress">
						<view class="progress-inner">
							<cmd-progress :percent="item.percentage" :show-info="false" stroke-color="#B07AF3;"
								:strokeWidth="8"></cmd-progress>
						</view>
					</view> -->
				</view>

				<view class="task-r">
					<view v-if="item.is_complete == 0" class="btn act" @click="toPage(item.id)">
						<text>去完成</text>
					</view>

					<view v-if="item.is_complete == 1" class="btn" style="background-color: #333333; color: #D8FD24;"
						@click="completeTask(item)">
						<text>待领取</text>
					</view>

					<view v-if="item.is_complete == 2" class="btn dis">
						<text>已领取</text>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="detailPop" type="center" mask-background-color="rgba(0,0,0,0.9)">
			<view v-if="previewData" class="detail-pop">

				<view class="title">
					{{ previewData.level }}级普通奖励
				</view>
				<view class="prize-desc">
					<view>只有等级达到了当前等级，方可领取下方奖励哦~</view>

					<view>每一级奖励只可领取一次，领取后请在有效期内使用!</view>
				</view>
				<scroll-view class="jiang-list" scroll-x>
					<view class="jiang-item" v-for="(item, i) in previewData.pu_jiang" :key="i">
						<view class="pic">
							<image :src="$img1('my/quan.png')" mode="aspectFit"></image>

							<!-- <view v-if="item.z_num" class="num">×{{ item.z_num }}</view> -->
						</view>

						<view class="item-title hang1">{{ item.title }}</view>
					</view>
				</scroll-view>
				<view class="border" v-if="previewData.gao_jiang.length>0"></view>
				<template v-if="previewData.gao_jiang.length>0">
					<view class="title" style="color: #F5C783;">
						<text>{{ previewData.level }}级高级奖励</text>
					</view>
					<view class="prize-desc">
						<view>完成任务后您将从以下奖品中随机获得一件</view>
					</view>

					<scroll-view class="jiang-list" scroll-x>
						<view class="jiang-item" v-for="(item, i) in previewData.gao_jiang" :key="i">
							<view class="pic">
								<image :src="item.imgurl" lazy-load></image>

								<!-- <view v-if="item.z_num" class="num">×{{ item.z_num }}</view> -->
							</view>
							<view class="item-title hang1">{{ item.title }}</view>
						</view>
					</scroll-view>
				</template>

			</view>
			<view class="close icon" @click="$refs.detailPop.close()">
				<image :src="$img('/static/common/close.png')" lazy-load></image>
			</view>
		</uni-popup>

		<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
			<view class="res-pop common_bg column center">
				<view class="res-pop-hd"></view>
				<view class="res-pop-main justify-evenly align-center">
					<view class="column align-center" v-for="(item, i) in prizeRes" :key="i">
						<view class="ziti">
							<text v-if="i==0">普通奖励</text>
							<text v-if="i==1" style="color: #F4C783;">高级奖励</text>
						</view>
						<image :src="i==1?$img1('my/liwu.png'):$img1('my/quan.png')" mode="aspectFit"></image>
						<text class="mt10">{{item.title}}</text>
					</view>
				</view>
				<view class="res-pop-ft mt20 center">
					<view class="ft-btn common_bg justify-center align-center" :style="{
					  backgroundImage: `url(${$img1('common/jixuchou.png')})`
					}" @click="$refs.resPop.close()">
						<text>确定</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
						id: 1,
						title: '每日任务'
					},
					{
						id: 2,
						title: '每周任务'
					}
				],
				tabCur: 0,
				pageData: '',
				taskList: [],
				curLvId: '',
				previewData: '',
				prizeRes: ''
			}
		},

		onLoad(options) {
			// this.getUserInfo()
			this.getData()
			this.tabChange(this.tabCur)
		},

		onReady() {
			// this.$refs.detailPop.open()
			// this.$refs.resPop.open()
		},

		methods: {
			toRule() {
				uni.setStorageSync('_qy_rule', this.pageData.danye_list)

				this.$c.to({
					url: '/package/mine/qy-rule'
				})
			},

			preview(item) {
				this.previewData = item
				this.$refs.detailPop.open()
			},

			doReceive(item) {
				this.req({
					url: 'quan_yi_ling',
					data: {
						id: item.id
					},
					success: res => {
						if (res.status == 1) {
							this.prizeRes = res.data

							this.$refs.resPop.open()

							this.getData()
						}
					}
				})
			},

			completeTask(item) {
				this.req({
					url: 'ling_task',
					data: {
						task_list_id: item.id
					},
					success: res => {
						if (res.status == 1) {
							this.$c.toast({
								title: res.msg,
								duration: 500,
								success: () => {
									this.getData()
									this.tabChange(this.tabCur)
								}
							})
						}
					}
				})
			},

			getTask() {
				this.req({
					url: 'task_list',
					data: {
						type: this.tabList[this.tabCur].id
					},
					success: res => {
						if (res.status == 1) {
							this.taskList = res.data.task_list
						}
					}
				})
			},

			getData() {
				this.req({
					url: 'quan_yi',
					data: {},
					Loading: true,
					success: res => {
						if (res.status == 1) {
							this.curLvId = `prize-item${res.data.quan_yi_level.level}`

							this.pageData = res.data
						}
					}
				})
			},

			getUserInfo() {
				this.req({
					url: 'user',
					data: {},
					Loading: true,
					success: res => {
						if (res.status == 1) {
							this.userInfo = res.data.userinfo
						}
					}
				})
			},

			tabChange(i) {
				this.tabCur = i

				this.getTask()
			},

			//跳转页面
			toPage(id) {
				if (id == 1) {
					this.$c.to({
						url: '/pages/user/tui-guang'
					})
				} else {
					this.$c.to({
						type: 3,
						url: '/pages/shouye/index'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 30rpx;
		background-color: #F7F7F7;
		min-height: 100vh;

		.user-card {
			margin: 40rpx auto 0;
			width: 686rpx;
			height: 150rpx;
			box-sizing: border-box;
			position: relative;
			padding: 38rpx 40rpx 48rpx 52rpx;
			background: #FFFFFF;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				background: #9d9d9d;
				border: 1px solid #cccccc;
				border-radius: 50%;
				overflow: hidden;

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

			.lv {
				position: absolute;
				left: 32rpx;
				top: 24rpx;
				font-weight: 700;
				font-size: 48rpx;
				color: #333333;
			}

			.need {
				margin-top: 10rpx;
				font-size: 16rpx;
				font-weight: 400;
				color: #4C4C4C;
			}

			.progress-buy {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 8rpx;

				.progress {
					width: 430rpx;
					height: 14rpx;

					/deep/.cmd-progress-inner {
						background: #CCCCCC;
					}
				}
			}

			.buy {
				position: absolute;
				top: 48rpx;
				right: 32rpx;
				width: 150rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #333333;
				border-radius: 16rpx;

				text {
					font-size: 20rpx;
					color: #CDEF27;
				}
			}

			.rule-btn {
				position: absolute;
				left: 142rpx;
				top: 36rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #ffffff;
			}
		}

		.common_bg {}

		.prize-card {
			margin: 20rpx auto 0;
			width: 686rpx;
			box-sizing: border-box;
			display: flex;
			background-color: #FFFFFF;
			border-radius: 16rpx;

			.mask {
				overflow: auto;
			}

			.prize-list {
				white-space: nowrap;
				width: calc(100% - 140rpx);
				border-radius: 20rpx;
				height: 460rpx;
				margin-top: -3rpx;
			}

			.prize-item1 {
				display: inline-flex;
				flex-direction: column;
				width: 140rpx;
				height: 100%;
				box-sizing: border-box;

				>view:nth-child(1) {
					width: 100%;
					height: 46rpx;
					line-height: 46rpx;
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;
				}

				>view:nth-child(2) {
					width: 100%;
					height: 154rpx;
					font-weight: 400;
					font-size: 36rpx;
					color: #FFFFFF;
				}

				>view:nth-child(3) {
					width: 100%;
					height: 152rpx;
					font-weight: 400;
					font-size: 36rpx;
					color: #F4E1CF;
				}
			}

			.prize-item {
				display: inline-flex;
				flex-flow: column;
				align-items: center;
				width: 144rpx;
				height: 100%;
				box-sizing: border-box;
				// background-color: #FFFFFF;

				.lv {
					width: 100%;
					height: 46rpx;
					line-height: 46rpx;
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #4C4C4C;
				}

				.prize {
					background: #FFFFFF;
					width: 144rpx;
					height: 154rpx;

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

				.get-btn {
					margin-top: 30rpx;
					width: 104rpx;
					height: 56rpx;
					background: url($imgurl+'common/jixuchou.png') no-repeat 0 0 / 100% 100%;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}

				&.out {
					.prize {
						background: none;

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

					.line {
						background: none;
					}
				}
			}
		}

		.task {
			margin: 30rpx auto 0;
			width: 690rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 0 30rpx 20rpx;
			border-radius: 16rpx;

			.task-tab {
				padding: 30rpx 0;

				.task-tab-item {
					position: relative;
					font-weight: 400;
					font-size: 24rpx;
					color: #8A8A8A;

					>text {
						width: 140rpx;
						height: 60rpx;
						text-align: center;
					}

					>image {
						width: 39rpx;
						height: 42rpx;
					}

					&.act {
						font-weight: 400;
						color: #333333;

						&::before {
							content: '';
							display: block;
							width: 32rpx;
							height: 4rpx;
							background: #333333;
							border-radius: 30rpx;
							position: absolute;
							left: 50%;
							bottom: 4rpx;
							transform: translateX(-50%);
						}
					}
				}
			}

			.task-item {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.task-l {
					.title {
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
					}

					.num {
						margin: 20rpx 0 4rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: #8A8A8A;

					}

					.progress {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						font-weight: 400;
						color: #cccccc;

						.progress-inner {
							width: 300rpx;
							margin-right: 6rpx;

							/deep/.cmd-progress-inner {
								background: #F0F0F0;
							}
						}
					}
				}

				.task-r {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					padding-left: 30rpx;

					.btn {
						width: 128rpx;
						height: 60rpx;
						border-radius: 56rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 24rpx;
						background: rgba(10, 6, 15, 0);
						border-radius: 16rpx;

						&.act {
							background: #E6F791;
							border: 0;

							text {
								font-weight: 400;
								color: #333333;
							}
						}

						&.dis {
							background: #D1D1D1;

							text {
								color: #999999;
							}
						}
					}
				}
			}
		}

		.close {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: -86rpx;
			width: 48rpx;
			height: 48rpx;
		}

		.detail-pop {
			width: 650rpx;
			display: flex;
			flex-flow: column nowrap;
			align-items: center;
			position: relative;
			box-sizing: border-box;
			padding: 1rpx 30rpx 30rpx;
			background: #FFFFFF;
			border-radius: 30rpx;



			.icon {}

			.title {
				margin-top: 50rpx;
				width: 380rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;


				&.act {
					text {
						font-size: 32rpx;
						font-weight: 400;
						color: transparent;

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

			.common_bg {}

			.prize-desc {
				margin-top: 40rpx;
				text-align: center;
				font-size: 20rpx;
				font-weight: 500;
				color: #8A8A8A;

				view+view {
					margin-top: 10rpx;
				}
			}

			.jiang-list {
				width: auto;
				max-width: 100%;
				white-space: nowrap;
				margin-top: 40rpx;
				// width: 500rpx;

				.jiang-item {
					width: 150rpx;
					display: inline-block;
					margin-left: 30rpx;

					&:first-child {
						margin-left: 0;
					}

					.pic {
						width: 100%;
						height: 150rpx;
						background: #FFF1AF;
						border-radius: 10rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;
						overflow: hidden;

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

						.num {
							padding: 0 14rpx;
							height: 32rpx;
							display: flex;
							align-items: center;
							background: linear-gradient(90deg, #729fdb 0%, #d0dbff 100%);
							position: absolute;
							left: 0;
							bottom: 0;
							z-index: 1;
							border-radius: 0 10rpx 0 10rpx;

							font-size: 20rpx;
							font-weight: 400;
							color: #222222;
						}
					}

					.item-title {
						width: 100%;
						margin-top: 10rpx;
						text-align: center;
						font-size: 20rpx;
						font-weight: 400;
						color: #333333;
					}
				}
			}

			.border {
				margin-top: 40rpx;

				width: 570rpx;
				height: 1rpx;
				background: #666666;
			}

			.detail-list {
				margin-top: 30rpx;
				width: 580rpx;
				max-height: 400rpx;

				.list-content {
					display: flex;
					flex-flow: row wrap;
					justify-content: space-evenly;

					.list-item {
						width: 150rpx;
						height: 150rpx;
						background: #111111;
						border: 1px solid #666666;
						border-radius: 10rpx;
						overflow: hidden;
						margin: 0 0 30rpx;

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

		.res-pop {
			width: 100%;
			height: 100vh;
			position: relative;

			.res-pop-hd {
				width: 380rpx;
				height: 104rpx;
				background: url($imgurl+'common/gxhd.png') no-repeat 0 0 / 100% 100%;
			}

			&-main {
				width: 660rpx;
				height: 430rpx;
				margin: 40rpx 0 0;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 16rpx;

				>view {
					>view {
						font-weight: 400;
						font-size: 36rpx;
						color: #333333;
					}

					>image {
						width: 130rpx;
						height: 130rpx;
					}

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

			&-ft {
				width: 750rpx;
				margin-top: 40rpx;

				.ft-btn {
					width: 220rpx;
					height: 72rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	}
</style>