<template>
	<view v-if="istrue" class="">
		<view class="t1 pos">
			<view class="f-center f32" style="color: #FFF;margin-top: 190rpx;letter-spacing: 18rpx;">最高可领500元立减金</view>
			<view class="abs flex_column flex_items" style="right: 10rpx;top: 120rpx;">
				<image @click="gomy" :src="jpsl" style="width: 50rpx;height: 64rpx;" mode=""></image>
				<image @click="tk('guize')" :src="gz" style="width: 50rpx;height: 64rpx;margin-top:20rpx;" mode="">
				</image>
			</view>
			<view class="flex_items flex_column" style="margin-top:240rpx;">
				<view v-if="zjtitle==''" class="f26" style="color: #FA483D;">限时领取微信立减金,翻牌享惊喜</view>
				<view v-else class="f26" style="color: #333;">
					恭喜您获得{{zjtitle}},<text class="bold" @click="createState()" style="color: #FA483D;">点此再次领取</text>
				</view>
				<view class="flex_items flex_center">
					<view v-if="cardStateArray.length!=0" class="flex_warp flex_items ml10 drawBox" style="">
						<view v-for="(item,index) in cardStateArray" :key="index"
							:class="[index!=2&&index!=5?'mr15':'','mt10','draw-card']" @click="flip(index)">
							<view :class="[item.state?'front_reverse':'','front']">
								<image :src="imgs[index].src" style="width:145rpx;height:216rpx;" mode="aspectFit">
								</image>
							</view>
							<view :class="[item.state&&index==curindex?'back_reverse':'','back','pos']">
								<view class="f-center f22 abs"
									style="color:#FFF2A3;width: 100%;left: 0;top:12rpx;z-index: 1;">
									{{item.name}}
								</view>
								<image :src="zj" style="width:145rpx;height:216rpx;" mode="aspectFit"></image>
								<view @click="godui" class="abs"
									style="width: 100%;height: 40rpx;background:none;bottom: 15rpx;"></view>
							</view>
							<view :class="[item.state&&index!=curindex?'back_reverse':'','back','pos']">
								<view class="f-center f22 abs"
									style="color:#818181;width: 100%;left: 0;top:12rpx;z-index: 1;">
									{{item.name}}
								</view>
								<image :src="wjz" style="width:145rpx;height:216rpx;" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="f30 count" style="color: #FFF2A3;">
				<text>剩余<text class="" style="color: #fff;">{{receive_num}}</text>次机会</text>
			</view>
		</view>
		<view class="flex_items flex_center pos" style="margin-top: -106rpx;z-index: 1;overflow: hidden;">
			<view class="t2 flex_column flex_items" style="">
				<image :src="jptitle" style="width: 439rpx;height: 25rpx;margin-top: 166rpx;margin-bottom: 20rpx;" mode=""></image>
				<view class="flex_start flex_items mt10" style="width: calc(100% - 180rpx);">
					<view style="width:460rpx;">
						<u-line-progress :percentage="process_rate" inactiveColor="#FF5937" activeColor="#FFE7B8">
							<view class="u-percentage-slot"></view>
						</u-line-progress>
					</view>
					<view class="ml30 f26" style="color: #FF5937;width: 204rpx;">已领：{{process_rate}}%</view>
				</view>
				<view class="flex_items flex_center" style="width: 100%;">
					<view v-if="prizes.length!=0" class="flex_warp flex_items ml20" style="width: calc(100% - 80rpx);">
						<view v-for="(item,index) in prizes" :key="index"
							:class="[index!=2&&index!=5?'mr50':'','mt30']">
							<view class="jcb pos">
								<view class="abs f-center f22" style="width: 100%;left: 0;bottom:15rpx;color: #FFE0A8;">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
					<view v-else class="p30 f26 f-center" style="color: #9a9a9a;margin-top:50rpx;">--暂无数据--
					</view>
				</view>
			</view>
		</view>
		<view class="flex_items flex_center">
			<view class="t4 flex_items flex_column" style="">
				<view class="f28" style="color: #8E4D41;width:calc(100% - 130rpx);margin-top: 80rpx;">
					<view>活动期间:</view>
					<view class="mt20">1.单击右上角奖品按钮，进入奖品列表页面</view>
					<view class="mt20">2.选择奖品，点击去兑换</view>
					<view class="mt20">3.进入兑换页，点击立即兑换</view>
				</view>
			</view>
		</view>
		<view class="flex_items flex_center">
			<view class="t3 flex_items flex_column" style="">
				<view class="f28" style="color: #8E4D41;width:calc(100% - 130rpx);margin-top: 80rpx;">
					<view>活动期间:</view>
					<view class="mt20">1.成功签约积存金有机会获得1次领取机会</view>
					<view class="mt20">2.成功签约柜台债有机会获得1次领取机会</view>
					<view class="mt20">3.成功签约结构性存款有机会获得2次领取机会</view>
					<view class="mt20">4.成功买入1笔2000元面值(含)以上二级流通柜台债，有机会获得1次领取机会</view>
				</view>
			</view>
		</view>
		<overlay v-if="isshow" :istype="istype" :isshow="isshow" :title="zjtitle" :link="link" @backshow="backshow">
		</overlay>
	</view>
</template>

<script>
	import overlay from "@/components/overlay.vue"
	import {Debounce} from "@/util/common.js"
	export default {
		data() {
			return {
				t1: require('@/static/lhj.png'),
				zj: require('@/static/zj.png'),
				wjz: require('@/static/wzj.png'),
				jptitle: require('@/static/jptitle.png'),
				hj: require('@/static/hj.png'),
				jpsl: require('@/static/jpsl.png'),
				gz: require('@/static/gz.png'),
				out: require('@/static/out.png'),
				lu: require('@/static/gtz.png'),
				imgs: [{
					src: require('@/static/gtz.png'),
				}, {
					src: require('@/static/jcj.png'),
				}, {
					src: require('@/static/xxy.png'),
				}, {
					src: require('@/static/jcj.png'),
				}, {
					src: require('@/static/xxy.png'),
				}, {
					src: require('@/static/gtz.png'),
				}, {
					src: require('@/static/jcj.png'),
				}, ],
				cardStateArray: [],
				prizes: [],
				istype: 'login',
				isshow: true,
				istrue: true,
				receive_num: null,
				ids: "",
				process_rate: 0,
				zjtitle: "",
				link: "",
				zjlink: "",
			}
		},
		onLoad() {
			// this.isshow = false
			// this.getData()			
			if (uni.getStorageSync('token')) {
				getApp().globalData.token = uni.getStorageSync('token')
				this.isshow = false
				this.getData()
			} else {
				this.isshow = true
			}
		},
		components: {
			overlay
		},
		methods: {
			getData(aa) {
				if (!aa) {
					uni.showLoading({
						title: '加载中...',
					})
				}
				this.api.homedata().then((res) => {
					if (res.data.code == '200') {
						this.receive_num = res.data.data.receive_num
						this.gethome(aa)
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			getAccountInfo(){
				this.api.homedata().then((res) => {
					if (res.data.code == '200') {
						this.receive_num = res.data.data.receive_num
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			gethome(aa) {
				this.api.getprizes({
					activity_id: 1
				}).then((res) => {
					console.log(res)
					if (res.data.code == '200') {
						this.ids = res.data.data.id
						this.process_rate = res.data.data.process_rate
						
						if(this.cardStateArray.length>0){
							this.cardStateArray.forEach((item, index) => {
								item.state = false
							})
						}
						this.prizes = res.data.data.prizes
						
						const temp = res.data.data.prizes.slice();
						const arrayLen = temp.length
						while(temp.length < 6){
							const randomNumber = Math.floor(Math.random() * arrayLen);
							temp.push(res.data.data.prizes[randomNumber])
						}
						console.log(temp)
						temp.forEach((item, index) => {
							item.state = false
						})
						this.cardStateArray = this.shuffleArray(temp)
						
						
						this.istrue = true
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			flip:Debounce(function(index) {
				let that = this
				console.log(that.cardStateArray)
				if (that.cardStateArray[index].state) {
					return
				}
				that.api.takeit({
					ids: 1
				}).then((res) => {
					console.log(res)
					if (res.data.code == '200') {
						that.link = res.data.data.link
						that.zjtitle = res.data.data.name
						that.cardStateArray[index].name = res.data.data.name
						that.curindex = index
						that.cardStateArray.forEach((item, index) => {
							item.state = true
						})
						setTimeout(function() {
							that.istype = 'iszj'
							that.isshow = true
						}, 800);
						that.getAccountInfo()
						// that.getData('tip')
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
				// }, 600);
			},1000),
			godui() {
				window.open(this.link, "_blank")
			},
			createState() {
				this.cardStateArray.forEach((item, index) => {
					item.state = false
				})
				// this.cardStateArray = this.shuffleArray(this.cardStateArray);
				this.curindex = null
				this.zjtitle = ""
				this.getData('aa')
			},
			shuffleArray(array) {
			    return array.sort(() => Math.random() - 0.5);
			},
			tk(val) {
				this.istype = val
				this.isshow = true
			},
			gomy() {
				uni.navigateTo({
					url: "/pages/my/index"
				})
			},
			backshow(e) {
				this.isshow = false
				if (e.types == 'loginok') {
					this.getData()
				}
				if (e.types == 'go') {
					this.createState()
				}
			},
		},
		onReachBottom() {

		},
		onPullDownRefresh() {

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #FFE4BD !important;
	}

	.u-line-progress {
		overflow: initial !important;
	}

	.t1 {
		background-image: url('~@/static/lhj.png') !important;
		background-size: 100% 100%;
		height: 1344rpx;
		overflow: hidden;

		.count {
			background-image: url('~@/static/count.png') !important;
			background-size: 100% 100%;
			width: 263rpx;
			height: 63rpx;
			line-height: 63rpx;
			text-align: center;
			position: absolute;
			left: 50%;
			transform: translate(-50%);
			bottom: 70rpx;
		}
	}

	.t2 {
		background-image: url('~@/static/jpzs.png') !important;
		background-size: 100% 100%;
		width: 726rpx;
		height: 902rpx;

		.u-percentage-slot {
			background-image: url('~@/static/hj.png') !important;
			background-size: 100% 100%;
			width: 55rpx;
			height: 38rpx;
			margin-right: -5px;
		}

		.jcb {
			background-image: url('~@/static/jcbg.png') !important;
			background-size: 100% 100%;
			width: 179rpx;
			height: 250rpx;
		}
	}

	.t3 {
		background-image: url('~@/static/rwzx.png') !important;
		background-size: 100% 100%;
		width: 728rpx;
		height: 497rpx;
	}
	
	.t4 {
		background-image: url('~@/static/flow.png') !important;
		background-size: 100% 100%;
		width: 728rpx;
		height: 370rpx;
	}

	.drawBox {
		width: calc(100% - 280rpx);
		height: 464rpx;
		// margin-top: 50rpx;
		// padding: 0 20rpx;
		flex-wrap: wrap;
		justify-content: space-evenly;

		.draw-card {
			position: relative;
			width: 145rpx;
			height: 216rpx;
			perspective: 1000rpx;
			/* 设置透视投影 */
			// margin: 0 10rpx;

			.front,
			.back {
				width: 100%;
				position: absolute;
				backface-visibility: hidden;
				/* 隐藏背面元素 */
			}

			.front {
				z-index: 2;
				/* 设置正面元素位于背面元素之上 */
				transform: rotateY(0deg);
				/* 初始状态正面朝上 */
				transition: transform 0.6s ease;

				/* 添加过渡效果 */
				&_reverse {
					transform: rotateY(-180deg);
					/*正面翻转为背面 */
				}
			}

			.back {
				transform: rotateY(180deg);
				/* 初始状态背面朝上 */
				transition: transform 0.6s ease;

				/* 添加过渡效果 */
				&_reverse {
					transform: rotateY(0deg);
					/*背面翻转为正面 */
				}
			}

		}
	}
</style>