<template>
	<view class="appCotent" v-if="show">
		<view class="index-content">
			<u-swiper radius="0 0 0 30px" :height="210" :list="list5" circular @change="e => current = e.current"
				:autoplay="true" keyName="imageUrl" @click="goOtherLink">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
			<u-gap bgColor="transparent" height="15"></u-gap>
			<div class="content__code" v-if="freeCode || freeCode.mainImgUrl">
				<div class="code__img">
					<image :src="freeCode.mainImgUrl" class="code__img"></image>
				</div>
				<div class="code__money">
					<div class="money__title">
						<text>{{freeCode.title}}</text>
					</div>
					<div class="code__tips clamp1">
						<text>{{freeCode.spec}}</text>
					</div>
					<div class="money__num">
						<text class="num__one">￥0.00</text>
						<text class="num__two">￥{{freeCode.originalPrice/100}}</text>
					</div>
				</div>
				<div class="code__get" @click="getPrice">
					<div>
						立即
					</div>
					<div>
						领取
					</div>
				</div>
			</div>
			<u-gap bgColor="transparent" height="15"></u-gap>
			<div class="index__item3">
				<image src="@/static/index/index23.png"></image>
			</div>
			<u-gap bgColor="transparent" height="15"></u-gap>
			<div class="index__item3-1">
				<image src="@/static/index/index14.png"></image>
			</div>
			<u-gap bgColor="transparent" height="15"></u-gap>
			<div class="index__item4">
				<image src="@/static/index/index20.png"></image>
			</div>
			<u-gap bgColor="transparent" height="15"></u-gap>
			<div class="index__item5">
				<image src="@/static/index/index8.png"></image>
			</div>
			<u-gap bgColor="transparent" height="60"></u-gap>
			
			<!-- 已领取优惠券后弹框 -->
			<view class="pooup-get-coupon" v-if="pooupCoupon">
				<view class="coupon-box">
					<image src="../../../static/index/coupon3.png"></image>
					<view class="close" @click="closeCoupon">
						X
					</view>
					<view class="title">
						<view style="margin-bottom:10rpx;font-weight: bold;">
							您无优惠券可用
						</view>
						<view class="">
							正在跳转中......({{timerNum}}秒)
						</view>
					</view>	
					<view class="coupon-btn" @click="goBuy">
						去原价购买
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/pages/login/util.js'
	let plugin = requirePlugin("loginPlugin");
	export default {
		data() {
			return {
				show: false,
				current: 0,
				balance: "0.00",
				list5: [],
				//免费挪车码
				freeCode: {},
				carList:[], // 爱车列表
				pooupCoupon:false,
				timerNum:3,
				timer:null,
				clickState:false, // 立即领取 防抖
			};
		},
		methods: {
			goJdLogin(){
				let returnPage= '/pages/main';
				let pageType = "reLaunch"
				uni.navigateTo({
					url:"/pages/login/index/index?returnPage="+returnPage+'&pageType='+pageType
				})
			},
			getPrice() {
				if(this.clickState == false){
					uni.showLoading({
						title:"加载中",
						mask:true
					})
					this.clickState = true
					let that = this
					let token = uni.getStorageSync('userToken');
					if (!token) {
						uni.hideLoading()
						this.clickState = false
						uni.showModal({
							title: "未绑定账号",
							content: "您没有绑定京东账号,请绑定后再领取",
							success:function(res){
								if (res.confirm) {
									that.goJdLogin()
								}
							}
						});
						// uni.navigateTo({
						// 	url: '/pages/binding/index?url=/pages/main&index=0'
						// })
						return;
					}
					
					let opts = {
						url: '/app/user/info',
						method: 'get'
					}
					that.http.httpTokenRequest(opts, {}).then(res => {
						if (res.data.code == 200) {
							let freeMoveFlag = res.data.data.freeMoveFlag
							if (freeMoveFlag) {
								uni.hideLoading()
								// uni.showToast({
								// 	title: "您的免费领取次数已用完",
								// 	icon: 'none',
								// 	duration: 2000,
								// 	success:function(){
										
								// 	}
								// });
								this.pooupCoupon = true
								this.timer = setInterval(()=>{
									if(this.timerNum > 0){
										this.timerNum  --
									}else{
										this.pooupCoupon = false
										this.timerNum = 3
										this.clickState = false
										uni.navigateToMiniProgram({
											appId: 'wx91d27dbf599dff74', // 跳转目标小程序的id
											path: 'pages/item/detail/detail?sku=100023585323', // 目标小程序的页面路径
											extraData: { // 需要携带的参数
												
											},
											success(res) {
												// 打开成功
											}
										})
										clearInterval(this.timer)
									}
								},1000)
							} else {
								//跳转到领取优惠卷页面
								// uni.navigateTo({
								// 	url: '/pagesA/pages/index/getPrice?orderId=' + this.freeCode.id
								// });
								// uni.showLoading({
								// 	title: '加载中'
								// });
								setTimeout(()=>{
									this.getCarList()
								},500)
							}
						}else{
							uni.hideLoading()
							uni.showToast({
								title: res.data.msg,
								icon: "error",
							});
						}
					})
				}
			},
			closeCoupon(){
				this.pooupCoupon = false
				this.timerNum = 3
				this.clickState = false
				clearInterval(this.timer)
			},
			// 已领取优惠券按钮
			goBuy(){
				this.timerNum = 3
				this.clickState = false
				clearInterval(this.timer)
				uni.navigateToMiniProgram({
					appId: 'wx91d27dbf599dff74', // 跳转目标小程序的id
					path: 'pages/item/detail/detail?sku=100023585323', // 目标小程序的页面路径
					extraData: { // 需要携带的参数
						
					},
					success:(res)=> {
						// 打开成功
						this.pooupCoupon = false
					},
					fail:()=>{
						this.pooupCoupon = false
					}
				})
			},
			getMoveCode() {
				let opts = {
					url: '/app/index/free/code',
					method: 'get'
				};
				this.http.httpRequest(opts, {}).then(res => {
					if (res.data.code == 200) {
						this.freeCode = res.data.data
					}
				})
			},
			getRotationList() {
				let opts = {
					url: '/app/index/carouse/1',
					method: 'get'
				};
				this.http.httpTokenRequest(opts, {}).then(res => {
					if (res.data.code == 200) {
						let data = []
						data = res.data.data
						let imgList = []
						data.forEach(e => {
							imgList.push(e)
						})
						this.list5 = imgList
					}
				})
			},
			// 轮播跳转其他页面
			goOtherLink(index) {
				let item = this.list5[index]
				let link = item.link;
				if(link) {
					var newStr = link.indexOf("http");
					var newStr2 = link.indexOf("https");
					if (newStr == 0 || newStr2 == 0) {
						uni.navigateTo({
					 	url: '/pages/webview/webview?url=' + link
						})
						return
					}
					uni.navigateTo({
						url: link
					})
				}
			},
			// 获取爱车列表
			getCarList(){
				let opts = { url: '/app/vehicleAdmin/list', method: 'get' };
				this.http.httpTokenRequest(opts, {}).then(res => {
					uni.hideLoading()
					if (res.statusCode == 200) {
						this.carList = res.data
						if(res.data.length == 0){
							uni.navigateTo({
								url: '/pages/transitionPage',
								success:()=>{
									this.clickState = false
								}
							});
							uni.setStorageSync('firstCoupon',true)
							// let url = "car.m.jd.com/h5/list.html?final-action=closewebview&source=licenseprocedure"
							// util.redirectToH5({page:url})
						}else{
							// uni.navigateTo({
							// 	url: '/pagesA/pages/index/getPrice?orderId=' + this.freeCode.id
							// });
							uni.navigateTo({
								url: '/pagesA/pages/index/getCoupon',
								success:()=>{
									this.clickState = false
								}
							});
						}
					}else{
						this.clickState = false
					}
				})
			},
		},
		created() {
			this.getMoveCode()
			this.getRotationList()
		},
		mounted() {
			setTimeout(() => {
				this.show = true
			}, 100);
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: '京东汽车挪车牌'
			});
		}
	};
</script>

<style lang="scss">
	.index-content {
		/deep/ .u-swiper__indicator {
			position: absolute;
			right: 30rpx !important;
		}

		background-color: #f9f9f9;
		height: 100%;

		.index__item3 {
			width: 100%;
			height: 356rpx;

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

		.index__item3-1 {
			width: 100%;
			height: 711rpx;

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

		.index__item4 {
			width: 100%;
			height: 646rpx;

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

		.index__item5 {
			width: 100%;
			height: 1289rpx;

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

		.content__code {
			padding: 28rpx;
			box-sizing: border-box;
			width: 630rpx;
			height: 220rpx;
			background: #ffffff;
			box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
			border-radius: 10rpx 40rpx 10rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: 30rpx;
			position: relative;

			.code__img {
				width: 160rpx;
				height: 160rpx;
				background: #3699ff;
				border-radius: 10rpx;
			}

			.code__money {
				width: 390rpx;
				margin: 0 20rpx;

				.money__title {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 42rpx;

				}

				.code__tips {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 42rpx;
					margin-bottom: 20rpx;
				}

				.money__num {
					.num__one {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #e1251b;
						line-height: 42rpx;
					}

					.num__two {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						line-height: 42rpx;
						position: relative;
					}

					.num__two::before {
						content: '';
						width: 100%;
						height: 1rpx;
						background: #999;
						position: absolute;
						bottom: 16rpx;
						left: 8rpx;
					}
				}
			}

			.code__get {
				position: absolute;
				right: -60rpx;
				width: 90rpx;
				height: 90rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				padding-top: 4rpx;
				box-sizing: border-box;
				text-align: center;
				background: url("@/static/index/index26.png") no-repeat;
				background-size: contain;
			}
		}

		/deep/ .u-swiper {
			border-radius: 0 0 0 100rpx !important;
		}

		.indicator {
			@include flex(row);
			justify-content: center;

			&__dot {
				height: 20rpx;
				width: 20rpx;
				border-radius: 100%;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 10rpx;
				transition: background-color 0.3s;

				&--active {
					background-color: #e1251b;
				}
			}
		}

		.indicator-num {
			padding: 4rpx 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100%;
			width: 35px;
			text-align: right;
			@include flex;
			justify-content: center;

			&__text {
				color: #ffffff;
				font-size: 24rpx;
			}
		}
		
		.pooup-get-coupon{
			position: fixed;
			top:0;right:0;
			bottom:0;left:0;
			background-color: rgba(0,0,0,.5);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index:100;
			.coupon-box{
				width:500rpx;height:620rpx;
				border-radius:20rpx;
				text-align: center;
				position: relative;
				top:-120rpx;
				image{
					position: absolute;
					top:0;left:0;
					width:100%;height:100%;
					z-index:-11;
				}
				.close{
					padding:20rpx 30rpx;
					font-size:32rpx;
					position: absolute;
					top:0;right:0;
				}
				.title{
					width:100%;
					position: absolute;
					bottom:180rpx;left:0;
					font-size: 32rpx;
				}
				.coupon-btn{
					width:360rpx;height:80rpx;
					line-height:80rpx;
					position: absolute;
					bottom:64rpx;left:50%;
					margin-left:-170rpx;
					border-radius:50rpx;
					font-size: 36rpx;
					font-weight: bold;
					background: linear-gradient(0deg, #F72B43, #F15C43);
					color:#fff;
				}
			}
		}
	}
</style>
