<template>
	<view class="container" id="container">
		<view class="back-btn" :style="{top:CustomBar + 'rpx'}" @click="backPrevPage()">
			<image src="../../static/xyddImages/back.png" mode=""></image>
		</view>
		<view class="float-light"><image src="https://qiniu.upload.gznl.top/d4bd8c56-2c69-4f1d-b664-8c2cb476f17c.png"></view>
		<view class="float-light float-light2"><image src="https://qiniu.upload.gznl.top/d4bd8c56-2c69-4f1d-b664-8c2cb476f17c.png"></view>
		<view class="float-light float-light3"><image src="https://qiniu.upload.gznl.top/d4bd8c56-2c69-4f1d-b664-8c2cb476f17c.png"></view>
		<view class="tabs-box acea-row row-middle row-center">
			<view class="tab-item" :class="current == 0 ? 'active' : ''" @click="tabClick(0)">点灯祈福</view>
			<view class="col-line"></view>
			<view class="tab-item" :class="current == 1 ? 'active' : ''" @click="tabClick(1)">祈福灯广场</view>
			<view class="col-line"></view>
			<view class="tab-item" :class="current == 2 ? 'active' : ''" @click="tabClick(2)">我的祈福灯</view>
		</view>
		<!-- 点灯祈福 -->
		<view class="content-box content1-box" v-if="current == 0">
			<view class="content1-top-box acea-row row-center-wrapper">
				<view class="top-box-content">
					<view class="acea-row-nowrap">
						<view class="light-box">
							<view class="light-l-box">
								<image :src="topLight[0].lampPic" alt="">
								<text>{{topLight[0].lampName}}</text>
							</view>
						</view>
						<view class="light-desc-box">
							<view class="light-name">{{topLight[0].lampName}}</view>
							<!-- <view class="current-year">{{topLight[0].lampIntroduce}}</view> -->
							<view class="light-desc">{{topLight[0].lampIntroduce}}</view>
						</view>
					</view>
					<view class="btn-box" @click="toLighting(topLight[0].id)">我要点灯</view>
				</view>
				<view class="right-image"><image src="https://qiniu.upload.gznl.top/3a51ab9e-3b02-4dca-aec3-7c7f00a2b6cb.png" ></view>
				<view class="cloud1"><image src="https://qiniu.upload.gznl.top/e5277b85-8a22-4448-931b-b0f0540b1dd7.png" ></view>
				<view class="cloud2"><image src="https://qiniu.upload.gznl.top/f442f228-c6e8-4491-a8cf-feff34be6f61.png" ></view>
			</view>
			<view class="light-list-box acea-row row-between">
				<view class="light-item" v-for="(item,index) in lightList" :key="item.id">
					<view class="light-name">{{item.lampName}}</view>
					<view class="light-box"><image :src="item.lampPic" ></view>
					<view class="btn" @click="toLighting(item.id)"><image src="../../static/xyddImages/btn-bg.png" alt=""></view>
				</view>
			</view>
		</view>
		<!-- 祈福灯广场 -->
		<view class="content-box content2-box" v-if="current == 1">
			<view class="content2-top-box">
				<view class="right-image"><image src="https://qiniu.upload.gznl.top/3a51ab9e-3b02-4dca-aec3-7c7f00a2b6cb.png" ></view>
				<view class="cloud2"><image src="https://qiniu.upload.gznl.top/f442f228-c6e8-4491-a8cf-feff34be6f61.png" ></view>
				<view class="title-box"><image src="https://qiniu.upload.gznl.top/09668a77-149a-4e88-be8b-5d3edff449a6.png" alt=""></view>
				<view class="content2-tabs-box acea-row row-between">
					<view class="content2-tab-item" :class="active == 1 ? 'content2-tab-item-active' : ''" @click="tab2Click(1)">最新祈福灯</view>
					<view class="content2-tab-item" :class="active == 2 ? 'content2-tab-item-active' : ''" @click="tab2Click(2)">本周最亮祈福灯</view>
					<view class="content2-tab-item" :class="active == 3 ? 'content2-tab-item-active' : ''" @click="tab2Click(3)">最亮祈福灯</view>
				</view>
				<view class="lightUp-list">
					<view class="lightUp-item acea-row row-middle" v-for="(item,index) in lightingList" :key="item.id">
						<view class="light-l-box">
							<image :src="item.lampPhoto" alt="">
							<text>{{item.blessingLampName}}</text>
						</view>
						<view class="userInfo-box">
							<view class="user-name red">{{item.blessingPersonRealname}}</view>
							<view class="word line2">{{item.blessingContent}}</view>
							<view class="word2">已有<text class="red">{{item.beBlessedTimes}}</text>人为Ta祈福</view>
						</view>
						<view class="btn-box" 
						:class="!item.isVote ? '' : 'default'" 
						@click="blessingOthers(item)">{{item.isVote ? '已祈福' : '为他祈福'}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的祈福灯 -->
		<view class="content-box content2-box" v-if="current == 2">
			<view class="content2-top-box">
				<view class="right-image"><image src="https://qiniu.upload.gznl.top/3a51ab9e-3b02-4dca-aec3-7c7f00a2b6cb.png" ></view>
				<view class="cloud2"><image src="https://qiniu.upload.gznl.top/f442f228-c6e8-4491-a8cf-feff34be6f61.png" ></view>
				<view class="title-box"><image src="https://qiniu.upload.gznl.top/35dc97c2-5b89-4248-8b78-728fb384d70f.png" alt=""></view>
				<view class="lightUp-list">
					<view class="lightUp-item acea-row row-middle" v-for="(item,index) in lightingList" :key="item.id">
						<view class="light-l-box">
							<image :src="item.lampPhoto" alt="">
							<text>{{item.blessingLampName}}</text>
						</view>
						<view class="userInfo-box">
							<view class="user-name red">{{item.blessingPersonRealname}}</view>
							<view class="word line2">{{item.blessingContent}}</view>
							<view class="word2">已有<text class="red">{{item.beBlessedTimes}}</text>人为Ta祈福</view>
						</view>
						<view class="btn-box">已亮{{item.lightedDays}}天</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getLightList, blessingList, myBlessings, blessingOthers } from '@/api/diandeng.js'
	export default{
		data(){
			return {
				current: 0,
				active: 1,
				CustomBar: this.CustomBar,
				lightList: [],
				topLight:null,
				lightingList:[],
				
			}
		},
		onLoad(){
			uni.showLoading({
				title:'正在加载中...'
			})
			this.getLightList();
		},
		mounted(){
			console.log(this.CustomBar);
		},
		methods: {
			getLightList(){
				getLightList().then((res)=>{
					if(res.success){
						this.lightList = res.data
						this.topLight = res.data.filter((item)=>{
							return item.isTop == 1
						})
					}
					uni.hideLoading()
				})
			},
			tabClick(idx){
				this.current = idx;
				if(idx == 1){
					this.getLihtingList()
				} else if(idx == 2){
					this.getMyLihtingList()
				}
			},
			//获取我的祈福灯
			getMyLihtingList(){
				myBlessings().then((res)=>{
					if(res.success){
						this.lightingList = res.data
					}
				})
			},
			//获取祈福灯广场
			getLihtingList(){
				blessingList(this.active).then((res)=>{
					if(res.success){
						this.lightingList = res.data
					}
				})
			},
			tab2Click(idx){
				this.active = idx;
				this.getLihtingList(idx)
			},
			blessingOthers(item){
				let that = this;
				if(item.isVote){
					uni.showToast({
						title: '已为他祈福过了！',
						icon: 'none'
					})
					return 
				}
				uni.showModal({
				    title: '提示',
				    content: '是否确认为Ta祈福？',
				    success: function (res) {
							if (res.confirm) {
								blessingOthers({blessingId:item.id}).then((res)=>{
									if(res.success){
										uni.showToast({
											title: '祈福成功！'
										})
										that.getLihtingList(that.active)
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
				    }
				});
				
			},
			
			backPrevPage(){
				this.$yrouter.switchTab("/pages/home/index");
			},
			toLighting(i){
				this.$yrouter.push({
				  path: '/pages/diandeng/lighting',
				  query: {
						id: i
				  },
				})
			}
		}
	}
</script>

<style lang="less">
	image{
		width: 100%;
		height: 100%;
	}
	@font-face {
		font-family: mFont;
		src: url('https://www.cyjyyjy.com:8081/static/PangMenZhengDaoCuShuTi-2.ttf');
	}
	.back-btn{
		width: 72rpx;
		height: 72rpx;
		position: fixed;
		left: 40rpx;
		text-align: center;
		line-height: 72rpx;
		z-index: 99;
		image{
			width: 36rpx;
			height: 36rpx;
		}
	}
	.container{
		width: 100%;
		height: 2600rpx;
		overflow: hidden;
		background: url(https://qiniu.upload.gznl.top/c3478068-dcaf-4a09-86e8-f018700edd3d.png) no-repeat center;
		background-size: 100% 100%;
		padding-top: 360rpx;
		position: relative;
	}
	.float-light{
		width: 70rpx;
		height: 154rpx;
		position: absolute;
		animation: lightMove 15s ease-in;
		animation-iteration-count: infinite;
		opacity: 0.4;
	}
	.float-light2{
		animation: lightMove2 25s ease-in;
		animation-iteration-count: infinite;
	}
	.float-light3{
		animation: lightMove3 20s ease-in;
		animation-iteration-count: infinite;
	}
	@keyframes lightMove{
		0%{
			bottom: -100rpx;
			left: 0rpx;
		}
		100%{
			bottom: 100%;
			left: 500rpx;
		}
	}
	@keyframes lightMove2{
		0%{
			bottom: -200rpx;
			left: 300rpx;
		}
		100%{
			bottom: 100%;
			left: 240rpx;
		}
	}
	@keyframes lightMove3{
		0%{
			bottom: -200rpx;
			left: 600rpx;
		}
		100%{
			bottom: 100%;
			left: 0rpx;
		}
	}
	.tabs-box{
		width: 685rpx;
		height: 95rpx;
		background: url(../../static/xyddImages/tabs-box-bg.png) no-repeat center;
		background-size: 100% 100%;
		margin: 0 auto;
		font-size: 32rpx;
		color: #CECECE;
	}
	.tabs-box .active{
		font-size: 32rpx;
		color: #F7D08E;
	}
	.col-line{
		width: 1rpx;
		height: 28rpx;
		background: #F7D08E;
		margin: 0 16rpx;
	}
	.content1-box .content1-top-box{
		width: 685rpx;
		height: 350rpx;
		border: 2rpx solid #F7D08E;
		border-radius: 8rpx;
		margin: 36rpx auto 0; 
		position: relative;
	}
	.content1-box .content1-top-box .top-box-content{
		width: 534rpx;
		height: 314rpx;
		background: #FFDA9B;
		border: 2rpx solid #F7D08E;
		border-radius: 12rpx;
		box-sizing: border-box;
		padding: 20rpx 22rpx 12rpx 34rpx;
		font-size: 28rpx;
		color: #FFDCAB;
		position: relative;
	}
	.light-l-box{
		width: 112rpx;
		height: 244rpx;
		background: url(../../static/xyddImages/light-bg.png) no-repeat center;
		background-size: 100% 100%;
		font-family: mFont;
		box-sizing: border-box;
		padding-top: 48rpx;
		text-align: center;
	}
	.light-l-box image{
		width: 72rpx;
		height: 74rpx;
		display: block;
		margin: 0 auto;
	}
	.light-desc-box{
		margin-left: 28rpx;
		font-family: mFont;
	}
	.light-desc-box .light-name{
		font-size: 36rpx;
		line-height: 50rpx;
		color: #FF322D;
	}
	.current-year{
		font-size: 28rpx;
		color: #FF9C10;
		margin: 6rpx 0 12rpx;
		line-height: 28rpx;
	}
	.light-desc{
	  font-size: 30rpx;
		line-height: 28rpx;
		color: #FF9C10;
	}
	.top-box-content .btn-box{
		width: 232rpx;
		height: 48rpx;
		background: linear-gradient(180deg, #FFD190 0%, #E88739 100%);
		border-radius: 4rpx;
		text-align: center;
		line-height: 48rpx;
		color: #fff;
		font-size: 28rpx;
		position: absolute;
		bottom: 10px;
		left: 50%;
		margin-left: -122rpx;
		z-index: 10;
	}
	.right-image{
		width: 234rpx;
		height: 200rpx;
		position: absolute;
		top: -70rpx;
		right: -30rpx;
	}
	.cloud1{
		width: 212rpx;
		height: 212rpx;
		position: absolute;
		top: 140rpx;
		right: -30rpx;
	}
	.cloud2{
		width: 422rpx;
		height: 212rpx;
		position: absolute;
		bottom: -60rpx;
		left: -40rpx;
	}
	.light-list-box{
		width: 100%;
		box-sizing: border-box;
		padding: 0 32rpx;
		margin-top: 30rpx;
	}
	.light-item{
		width: 202rpx;
		height: 228rpx;
		background: url(../../static/xyddImages/light-border.png) no-repeat center;
		background-size: 100% 100%;
		position: relative;
		font-family: mFont;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 46rpx;
	}
	.light-item .light-name{
		position: absolute;
		left: 12rpx;
		top: 16rpx;
		font-size: 28rpx;
		color: #F7D08E;
		writing-mode:tb-rl;
	}
	.light-item .light-box{
		width: 144rpx;
		height: 156rpx;
	}
	.light-item .btn{
		width: 102rpx;
		height: 34rpx;
	}
	
	.content2-top-box{
		width: 685rpx;
		min-height: 900rpx;
		background: #FFDA9B;
		border: 2rpx solid #F7D08E;
		border-radius: 12rpx;
		position: relative;
		margin: 50rpx auto 0;
	}
	.content2-top-box .right-image{
		position: absolute;
		left: -60rpx;
		top: -100rpx;
		transform: rotateY(180deg) scale(0.9);
	} 
	.content2-top-box .cloud2{
		
	}
	.content2-top-box .title-box{
		width: 466rpx;
		height: 104rpx;
		margin: 20rpx auto;
	}
	.content2-tabs-box{
		font-size: 24rpx;
		color: #B5B5B5;
		padding: 0 28rpx;
		box-sizing: border-box;
	}
	.content2-tab-item-active{
		border-bottom: 6rpx solid #F3B153;
		color: #000;
	}
	.lightUp-list{
		height: 800rpx;
		padding: 0 28rpx;
		overflow-y: scroll;
		box-sizing: border-box;
		margin-top: 24rpx;
	}
	.lightUp-list .lightUp-item{
		width: 632rpx;
		height: 218rpx;
		background: #FFE7BC;
		border-radius: 8rpx;
		font-size: 24rpx;
		margin-bottom: 32rpx;
	}
	.lightUp-item .light-l-box{
		color: #FFDCAB;
		margin-left: 52rpx;
		margin-right: 36rpx;
	}
	.lightUp-item .light-l-box{
		width: 100rpx;
		height: 200rpx;
		padding-top: 32rpx;
	}
	.lightUp-item .light-l-box image{
		width: 68rpx;
		height: 70rpx;
	}
	.userInfo-box{
		width: 286rpx;
		font-size: 24rpx;
		color: #292929;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	.userInfo-box .red{
		color: #F53F3F;
	}
	.user-name{
		margin-top: 30rpx;
	}
	.word{
		margin-top: 32rpx;
		margin-bottom: 8rpx;
		line-height: 34rpx;
	}
	.lightUp-list .btn-box{
		margin-left: 0;
	}
	.btn-box{
		width: 148rpx;
		height: 59rpx;
		background: linear-gradient(180deg, #F7D08E 0%, #ECBE71 100%);
		border-radius: 12rpx;
		text-align: center;
		line-height: 59rpx;
		font-size: 24rpx;
		color: #fff;
		margin-left: 74rpx;
		margin-top: 50rpx;
	}
	.default{
		background: #999;
	}
		
</style>
