<template>
	<view class="mg-lr-24">
		<view class="tab-list u-f u-f-jcc u-f-aic mg-bot-24">
			<view class="list-item" v-for="(item, index) in tabList" :key="item.id">
				<common-tab :acitve-tab="activeTab" :item="item" @tab-item="handleTabItem"></common-tab>
			</view>
		</view>

		<view v-if="activeTab=='tingche'">
			<view class="jifen-card mg-bot-46">
				<view class="u-f u-f-jcsb u-f-aic mg-bot-18">
					<view class="u-f u-f-jcfs u-f-aic">
						<image style="width: 76rpx;height: 76rpx;border-radius: 50%;" :src="pointsInfres.avatarUrl"
							class="mg-right-10" />
						<text class="fs28 fw400 white-color">{{pointsInfres.nickName}}</text>
					</view>
				</view>
				<view class="jifen-card-content u-f u-f-jcsb u-f-aifs">
					<view class="u-f u-f-fdc u-f-aifs">
						<view class="u-f u-f-jcfs u-f-aic mg-bot-12">
							<text class="mg-right-10 fs24 fw400 light-black">当前可用积分</text>
							<image class="wenhao" style="width: 32rpx;height: 32rpx;"
								src="../.././static/common/wenhao.png"></image>
						</view>
						<view class="fw700 light-black fs36 mg-bot-30">5,000</view>
						<view class="u-f u-f-jcfs u-f-aic fs24">
							<text class="light-gray mg-right-16">即将过期</text>
							<text class="light-black">5,000</text>
						</view>
					</view>
					<view class="u-f u-f-aic u-f-jcfe">
						<image style="width: 290rpx;height: 162rpx;" :mode="'widthFix'"
							src="../.././static/common/default_car.png"></image>
					</view>
				</view>
			</view>

			<view class="mg-bot-20">
				<common-title :msg="'兑换积分'"></common-title>
			</view>

			<view class="white-bg-wrap mg-bot-36">
				<view class="form-input">
					<input class="uni-input my-input" placeholder="请输入要兑换的积分" />
				</view>
			</view>

			<view class="mg-bot-20">
				<common-title :msg="'兑换说明'"></common-title>
			</view>

			<view class="white-bg-wrap mg-bot-56">
				<view class="u-f u-f-jcfs u-f-aifs fs28 light-gray mg-bot-30">
					<text class="fl-1">有效日期</text>
					<text class="fl-3">购买后30天有效</text>
				</view>

				<view class="u-f u-f-jcfs u-f-aifs fs28 light-gray mg-bot-30">
					<text class="fl-1">使用时间</text>
					<text class="fl-3">营业时间内可用</text>
				</view>

				<view class="u-f u-f-jcfs u-f-aifs fs28 light-gray mg-bot-38">
					<text class="fl-1">适用规则</text>
					<text class='fl-3'>适用规则适用规则适用规则 适用规则适用规则适用规则</text>
				</view>
			</view>

			<view class="fix-bot u-f u-f-jcc">
				<view class="line-gradient-btn" style="padding: 24rpx 0;width: calc(100% - 48rpx)" @click="sureDuHuan">
					确认兑换
				</view>
			</view>
		</view>

		<view v-else>
			<view class="jifen-card mg-bot-46">
				<view class="u-f u-f-jcsb u-f-aic mg-bot-18">
					<view class="u-f u-f-jcfs u-f-aic">
						<image style="width: 76rpx;height: 76rpx;border-radius: 50%;" :src="pointsInfres.avatarUrl"
							class="mg-right-10" />
						<text class="fs28 fw400 white-color">{{pointsInfres.nickName}}</text>
					</view>
				</view>
				<view class="jifen-card-content u-f u-f-jcsb u-f-aifs">
					<view class="u-f u-f-fdc u-f-aifs">
						<view class="u-f u-f-jcfs u-f-aic mg-bot-66">
							<text class="mg-right-10 fs24 fw400">当前可用积分</text>
							<image class="wenhao" style="width: 32rpx;height: 32rpx;"
								src="../.././static/common/wenhao.png"></image>
						</view>
						<view class="fw600 light-black fs36">{{pointsInfres.availablePoints}}</view>
					</view>
					<view class="u-f u-f-aic u-f-jcfe">
						<image style="width: 144rpx;height: 144rpx;" :mode="'widthFix'"
							src="../.././static/common/jifen.png"></image>
					</view>
				</view>
			</view>

			<view class="white-bg-wrap mg-bot-36">
				<view class="fs30 fw600 light-black mg-bot-14">已连续签到{{continuousDays}}天</view>
				<view class="light-gray fs24 mg-bot-24">{{signDescribe}}</view>
				<view class="u-f fs24">
					<view class="u-f u-f-fdc u-f-1 mg-left-10 mg-right-10" v-for="(item, index) in userSignListList"
						:key="index">
						<view
							:class="[activeDay == item.signTime&&item.signStatus==1?'sign-bgsel':'sign-bg','u-f u-f-fdc u-cc']"
							style="height: 153rpx; border-radius: 43rpx;">
							<text class="mg-bot-20">{{item.signPoints}}</text>
							<image v-if="activeDay != item.signTime" style="width: 42rpx;height: 42rpx;"
								:src="item.signStatus==2?'../../static/icon_jf_qd2.png':'../../static/icon_jf_qd.png'">
							</image>
							<image v-if="activeDay == item.signTime" style="width: 42rpx;height: 42rpx;"
								:src="item.signStatus==2?'../../static/icon_jf_qd3.png':'../../static/icon_jf_qd.png'">
							</image>
						</view>
						<view :class="[item.signStatus==1?'sign-text1':'sign-text2','u-f u-f-fdc u-cc']">
							<text>{{item.week}}</text>
							<text class="fs22">{{item.signTime}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="line-gradient-btn mg-bot-40" style="padding: 24rpx;" @click="quickSign">
				立即签到
			</view>

			<view class="mg-bot-20">
				<common-title :msg="'签到说明'"></common-title>
			</view>

			<view class="white-bg-wrap mg-bot-56">
				<view class="u-f u-f-jcfs u-f-aifs fs28 light-gray mg-bot-30">
					<text class="fl-1">有效日期</text>
					<text class="fl-3">购买后30天有效</text>
				</view>

				<view class="u-f u-f-jcfs u-f-aifs fs28 light-gray mg-bot-30">
					<text class="fl-1">使用时间</text>
					<text class="fl-3">营业时间内可用</text>
				</view>

				<view class="u-f u-f-jcfs u-f-aifs fs28 light-gray mg-bot-38">
					<text class="fl-1">适用规则</text>
					<text class='fl-3'>适用规则适用规则适用规则 适用规则适用规则适用规则</text>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import commonTab from "../../components/common-tab/common-tab.vue"
	import commonTitle from "../.././components/common-title/common-title.vue"
	export default {
		components: {
			commonTab,
			commonTitle
		},
		data() {
			return {
				activeTab: 'meiri',
				tabList: [{
						name: "停车积分",
						id: "tingche"
					},
					{
						name: "每日签到",
						id: "meiri"
					}
				],
				pointsInfres: "",
				continuousDays: 0,
				signDescribe: "",
				userSignListList: [],
				activeDay: ''
			}
		},
		onShow() {
			this.getGetUserPointsInfoData()
			this.getSigList()
			this.getCurrentDay()
		},
		methods: {
			handleTabItem(item) {
				this.activeTab = item.id
			},
			sureDuHuan() {
				uni.showToast({
					icon: "none",
					title: "兑换成功",
					duration: 500
				})
			},
			getGetUserPointsInfoData() {
				this.$http.post('/api/client/pointsRecord/getUserPointsInfo').then(res => {
					console.log(res.data);
					this.pointsInfres = res.data.data
					console.log(this.pointsInfres, "pointsInfres");
				})
			},
			getSigList() {
				this.$http.get('/api/client/sign/list').then(res => {
					let resData = res.data.data
					this.continuousDays = resData.continuousDays
					this.signDescribe = resData.signDescribe
					this.userSignListList = resData.userSignListList
				})
			},
			quickSign() {
				this.$http.get('/api/client/sign/addSign').then(res => {
					let resData = res.data
					this.getSigList()
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				})
			},
			getCurrentDay() {
				const currentTime = new Date();
				const month = ("0" + (currentTime.getMonth() + 1)).slice(-2);
				const day = ("0" + currentTime.getDate()).slice(-2);
				this.activeDay = `${month}.${day}`
			}
		}
	}
</script>


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

<style lang="scss" scoped>
	.tab-list {
		.list-item {
			font-size: 30rpx;
			margin-right: 88rpx;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	.jifen-card {
		padding: 18rpx 12rpx 12rpx 12rpx;
		background: linear-gradient(92deg, #FF4502 0%, #FF8903 100%);
		border-radius: 18rpx 18rpx 18rpx 18rpx;

		.jifen-card-content {
			background-color: #FFF6EE;
			padding: 20rpx 18rpx 38rpx 18rpx;
			border-radius: 10rpx;
		}
	}

	.form-input {
		.my-input {
			width: 100%;
			height: 100%;
			background-color: #ffffff;
		}
	}

	.fl-1 {
		flex: 1;
	}

	.fl-3 {
		flex: 3;
	}

	.card {
		flex: calc(100% / 7 - 7rpx);
		max-width: calc(100% / 7 - 7rpx);
		margin-right: 7rpx;

		&:last-child {
			margin-right: 0;
		}

		.gray-card {
			padding-top: 24rpx;
			width: 100%;
			background: #FAFBFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;

			.top-text {
				color: #333333;
			}

			.top-high-text {
				color: #FF8903;
			}

			.bottom-text {
				color: #999999;
			}

			&.highlight-card {
				background-color: #FFF6EA;

				.top-text {
					color: #FF8903;
				}
			}
		}
	}

	.fix-bot {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 10rpx 0;
		padding-bottom: 28rpx;
		background-color: #ffffff;
	}

	.sign-bg {
		background-color: #FAFBFF;
		color: #999999;
	}

	.sign-bgsel {
		background-color: #FFEF61;
		color: #333333;
	}

	.sign-text1 {
		color: #999999;
	}

	.sign-text2 {
		color: #333333;
	}
</style>