<!--
 * @Date: 2023-11-14 10:09:45
 * @LastEditTime: 2023-12-08 16:50:43
 * @Description: content
-->
<template>
	<view class="content">
		<uni-nav-bar title="签到任务" color="#000000" left-icon="left" backgroundColor="transparent" :border="false"
			:statusBar="true" :fixed="true" @clickLeft="$c.back()"></uni-nav-bar>

		<view class="" style="width: 686rpx; height: 328rpx; background-color: #D8D8D8; border-radius: 16rpx; margin: 56rpx auto 0;">

		</view>

		<view class="page-hd">
			<view class="title">签到任务</view>

			<view class="icon" @click="$refs.rulePop.getRule(16, '签到规则')">
				<image :src="$img('/static/img/info.png')" lazy-load></image>
			</view>
		</view>

		<view v-if="signData" class="sign-box common_bg" :style="{
			backgroundImage: `url(${$img('/static/img/1_sign_bg.png')})`
		}">
			<template v-for="(item, i) in signData.sign_info">
				<view v-if="i < 6" class="sign-item" :key="i" :class="{
					act: i + 1 <= signData.days
				}">
					<view class="day">{{ i + 1 }}天</view>

					<view class="icon">
						<!-- <image
              v-if="i + 1 <= signData.days"
              :src="$img('/static/img/1_coin.png')"
              lazy-load
            ></image> -->

						<image src="/static/common/signImg.png" lazy-load></image>
					</view>

					<view class="num">{{ item }}{{$config.getAppSetting('currency1_name')}}</view>
				</view>

				<view v-else class="sign-item large" :key="i" :class="{
					act: i + 1 <= signData.days
				}">
					<view class="item-l column justify-center">
						<view class="day">第七天</view>

						<view class="num">{{ item }}{{$config.getAppSetting('currency1_name')}}</view>
					</view>
					<view class="icon relative">
						<image src="/static/common/signImg.png" lazy-load></image>
						<image src="/static/common/signImg.png" lazy-load></image>
					</view>
				</view>
			</template>
		</view>

		<view class="sign-btn" :class="!is_sign ? 'signYes' : 'signNo'" @click="doSign">
			<template v-if="!is_sign">立即签到</template>
			<template v-else>已签到</template>
		</view>

		<uni-popup ref="sucPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
			<view v-if="sucData" class="suc-pop common_bg center" :style="{
				backgroundImage: `url(${$img('/static/img/signBg.png')})`

			}">
				<image class="coin-img" :src="$img('/static/img/signJinbi.png')" mode=""></image>
				<view class="coin-num">恭喜获得 {{ sucData.num }} {{$config.getAppSetting('currency1_name')}}</view>
				<view class="close icon" @click="$refs.sucPop.close()">
					<image :src="$img('/static/img/zdl.png')" lazy-load></image>
				</view>
			</view>
		</uni-popup>

		<rule-pop ref="rulePop"></rule-pop>
	</view>
</template>

<script>
	import { getSignData, doSignAdd } from '@/common/server/welfare.js';

	export default {
		data() {
			return {
				signData: [],
				sucData: '',
				is_sign: 0
			}
		},

		onLoad(options) {
			this.getData()
		},
		methods: {
			async doSign() {
				try {
					const res = await doSignAdd();
					if (res.status == 1) {
						this.sucData = res.data

						this.$refs.sucPop.open()

						this.getData()
					}
				} catch (error) {
					console.error('签到失败:', error);
				}
			},

			async getData() {
				try {
					const res = await getSignData();
					if (res.status == 1) {
						this.signData = res.data.sign
						this.is_sign = res.data.sign.is_sign
					}
				} catch (error) {
					console.error('获取签到数据失败:', error);
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
		box-sizing: border-box;
		padding: 1rpx 0 40rpx;

		.page-hd {
			padding: 20rpx 30rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 60rpx;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				color: #ffffff;
				text-shadow: 0rpx 0rpx 12rpx rgba(255, 135, 58, 0.8);
			}

			.icon {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.sign-box {
			width: 710rpx;
			box-sizing: border-box;
			padding: 30rpx 40rpx 40rpx;
			margin: 30rpx auto 0;
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;

			.sign-item {
				width: 150rpx;
				height: 165rpx;
				background: #ff873a;
				border-radius: 20rpx;
				display: flex;
				flex-flow: column nowrap;
				justify-content: space-evenly;
				align-items: center;
				margin-top: 10rpx;
				border: 2rpx solid #FFFFFF;

				.day {
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #dddddd;
				}

				.icon {
					width: 50rpx;
					height: 50rpx;
				}

				.num {
					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
				}

				&.act {
					position: relative;

					&::after {
						content: '已签';
						position: absolute;
						width: 100%;
						height: 100%;
						font-family: Alimama ShuHeiTi;
						font-weight: 700;
						font-size: 28rpx;
						color: #FFFFFF;
						background: rgba(0, 0, 0, 0.4);
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				&.large {
					width: 310rpx;
					height: 165rpx;
					flex-flow: row nowrap;
					justify-content: space-around;
					align-items: center;

					.item-l {
						height: 120rpx;
						display: flex;
						flex-flow: column nowrap;
						align-items: center;

						.num {
							margin-top: 20rpx;
						}
					}

					.icon {
						width: 120rpx;
						height: 100rpx;

						>image:nth-child(1) {
							width: 34rpx;
							height: 34rpx;
							position: absolute;
							left: 10rpx;
							bottom: 10rpx;
							transform: rotate(-28deg);
						}

						>image:nth-child(2) {
							width: 72rpx;
							height: 72rpx;
							position: absolute;
							top: 10rpx;
							right: 10rpx;
						}
					}
				}
			}
		}

		.sign-btn {
			margin: 40rpx auto 0;
			width: 400rpx;
			height: 96rpx;
			border-radius: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			background: #03D8F4;
			color: #404040;
		}

		.signYes {
			color: #404040;
		}

		.signNo {
			color: #404040;
			filter: grayscale(100%);
		}

		.suc-pop {
			width: 100vw;
			height: 642rpx;
			position: relative;
			display: flex;
			flex-flow: column nowrap;
			justify-content: space-between;
			align-items: center;


			.coin-img {
				width: 345rpx;
				height: 345rpx;
			}

			.coin-num {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #ffffff;
			}

			.close {
				width: 378rpx;
				height: 80rpx;
				position: absolute;
				left: 50%;
				bottom: 40rpx;
				transform: translate(-50%, 200%);
			}
		}
	}
</style>