<template>
	<view class="appCotent" v-if="show">
		<view class="index-content">
			<view class="head">
				<image src="http://jdnc-oss.uzosp.com/2022/06/15/99131cbc49c2444ea09083abdd2f2750.png"></image>
				<view class="swiper">
					<image src="http://jdnc-oss.uzosp.com/2022/07/07/f4010ad03ccf40439e01a1c07f299776.png"></image>
					<view>
						<u-swiper radius="0 16rpx 16rpx 16rpx" :height="130" :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>
					</view>
				</view>
				
				<view class="banner">
					<view :class="indexCommodityList.length == 1 ? 'banner-bg' : 'banner-bg banner-bg-1'" v-if="indexCommodityList && indexCommodityList.length == 1">
						<image src="http://jdnc-oss.uzosp.com/2022/12/28/b1679b5da1b84fa1827039fe4fadd91c.png"></image>
						<view class="item" style="margin-right: 15rpx;" @click="goJdShop(item)" v-for="(item, i) in indexCommodityList[0]" :key="i">
                            <image :src="item.mainImgUrl"></image>
                            <view class="banner-btn-bg">
                                <view class="banner-btn">
                                	<image src="../static/index/ban-btn.png"></image>
                                	<text>立即购买</text>
                                </view>
                            </view>
						</view>
					</view>
                    <view v-else>
                        <view class="banner-bg">
                        	<image src="http://jdnc-oss.uzosp.com/2022/12/28/b1679b5da1b84fa1827039fe4fadd91c.png"></image>
                        	<swiper :indicator-dots="true" :autoplay="true" indicator-color	="rgba(255, 255, 255, 0.35)" indicator-active-color="#FEE83A" style="height: 430rpx;width:100%">
                               <swiper-item v-for="(item, i) in indexCommodityList" :key="i">
                                   <u-grid align="left" :col="2">
                                       <u-grid-item v-for="(t, tj) in indexCommodityList[i]" :key="tj"  @click="goJdShop(t)">
                                           <view class="item" style="display: inline-flex;">
                                               <image :src="t.mainImgUrl"></image>
                                               <view class="banner-btn-bg">
                                                   <view class="banner-btn">
                                                       <image src="../static/index/ban-btn.png"></image>
                                                       <text>立即购买</text>
                                                   </view>
                                               </view>
                                           </view>
                                       </u-grid-item>
                                   </u-grid>
                               </swiper-item>
                        	</swiper>
                        </view>
                    </view>
                    
                    <view class="banner-other" v-if="levitationList && levitationList.length > 0">
                        <view v-for="(item, i) in levitationList" :key="i" @click="$goToLocation(item)">
                            <view v-if="i !== 0" style="margin-top: 50rpx;">
                                <u--image :src="item.imageUrl" width="160rpx" height="120rpx"></u--image>
                            </view>
                            <view v-else>
                                 <u--image :src="item.imageUrl" width="160rpx" height="120rpx"></u--image>
                            </view>
                            
                        </view>
                    </view>
					<u-gap bgColor="transparent" height="20"></u-gap>
				</view>
				
			</view>
			
			
			<!-- bg-img2为视频播放 -->
			<view class="bg-img2" v-if="videoObj">
                <image src="http://jdnc-oss.uzosp.com/2022/12/27/6a1ef562576f4e86a98118c9e343b9da.png"></image>
                <video id="myvideo" @fullscreenchange="screenChange" :src="videoObj.videoLink" :poster="videoObj.thumbnail" controls>
                </video>
            </view>
            <!-- bg-img没有视频播放，纯图片 -->
			<view class="bg-img" v-else>
				<image src="http://jdnc-oss.uzosp.com/2022/06/15/079440f5eea541bba67ea3d5f8097162.png"></image>
			</view>
			
			
			<!-- 已领取优惠券后弹框 -->
			<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, // 立即领取 防抖
                videoObj: null, //视频对象
                videoContext: null,
                levitationList: [],//悬浮数组对象
                indexCommodityList: [],
			};
		},
		methods: {
            screenChange(e) {
                if (!e.detail.fullScreen) {
                    this.videoContext.stop()
                }
            },
            // 跳转 其他小程序页面
			goJdShop(d){
				uni.navigateToMiniProgram({
					appId: 'wx91d27dbf599dff74', // 跳转目标小程序的id
					path: d.link, // 目标小程序的页面路径
					extraData: { // 需要携带的参数
						
					},
					success:(res)=> {
						// 打开成功
						
					},
					fail:()=>{
						
					}
				})
			},
			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
					}
				})
			},
            async getVideoList() {
                await this.$http.request({
                	url:'/app/index/video/1',
                	method:'get',
                	data:{
                		
                	},
                }).then(res => {
                    if(res &&  res.length > 0) {
                        this.videoObj = res[0]
                    }
                })
            },
            getLevitationList() {
                this.$http.request({
                	url:'/app/index/levitation/1',
                	method:'get',
                	data:{
                		
                	},
                }).then(res => {
                    if(res && res.length > 0) {
                        this.levitationList = res
                    } else {
                        this.levitationList = []
                    }
                })
            },
            //获取首页商品
            getIndexCommodityList() {
                this.$http.request({
                	url:'/app/index/mall/index',
                	method:'get',
                	data:{
                		
                	},
                }).then(res => {
                    if(res && res.length > 0) {
                        let resultArr = []
                        let startIdx = 0
                        res.forEach(function (value, index) {
                            if(index % 2 == 0) {
                                resultArr[startIdx] = []
                                resultArr[startIdx].push(value)
                            } else {
                                 resultArr[startIdx].push(value)
                                 startIdx++
                            }
                        });
                        this.indexCommodityList = resultArr
                    } else {
                        this.indexCommodityList = []
                    }
                })
            },
            
			// 轮播跳转其他页面
			goOtherLink(index) {
				let item = this.list5[index]
				this.$goToLocation(item)
			},
			// 获取爱车列表
			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()
            this.getVideoList()
            this.getLevitationList()
            this.getIndexCommodityList()
		},
		mounted() {
			setTimeout(() => {
				this.show = true
			}, 100);
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: '京东汽车挪车牌'
			});
            
            // 获取 video 上下文 videoContext 对象
            this.videoContext = uni.createVideoContext('myvideo')
            // 进入全屏状态
            this.videoContext.requestFullScreen()
		}
	};
</script>

<style lang="scss">
	.index-content {
		.head{
			width:100%;height:1477rpx;
			padding:530rpx 20rpx;
			box-sizing: border-box;
			position: relative;
			>image{
				position: absolute;
				top:0;left:0;
				width:100%;height:100%;
			}
			.swiper{
				box-sizing: border-box;
				padding:0 16rpx;
				position: relative;
				border-radius:16rpx;
				>image{
					position: absolute;
					top:-12px;left:-17rpx;
					width:744rpx;height:161px;
				}
			}
		}

		background-color: #f9f9f9;

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

		.indicator {
			@include flex(row);
			justify-content: center;
			position: absolute;
			right:240rpx; bottom:0rpx;

			&__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;
			}
		}
		
		.banner{
			width:100%;
			margin-top:70rpx;
            position: relative;
			.banner-bg,
			.banner-btn{
				image{
					position: absolute;
					top:0;left:0;
					width:100%;height:100%;
				}
				view,text{
					position: relative;
				}
			}
            .banner-btn-bg {
                display: flex;
                justify-content: center;
                width: 100%;
            }
			.banner-bg{
				width: 710rpx ;height:542rpx;
				box-sizing: border-box;
				padding:100rpx 80rpx 0;
				display:flex;
				justify-content: space-between;
                .item {
                    width:268rpx;
                    height:366rpx;
                }
                .banner-btn{
                    width:200rpx;height:66rpx;
                    font-weight: bold;
                    color: #674600;
                    top:280rpx;left:-2rpx;
                    font-size: 30rpx;
                    text-align: center;
                    line-height:66rpx;
                }
			}
            .banner-bg-1 {
                justify-content: center;
            }
            
            .banner-other{
                position: absolute;
                right:-22rpx;top:-80rpx;
                // z-index:100;
            }
			
		}
		
		.bg-img{
			width:750rpx;
			image{
				width:750rpx;height:4420rpx;
			}
		}
        
        .bg-img2{
        	width:750rpx;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        	image{
        		width:750rpx;height:4959rpx;
        	}
            video {
                position: absolute;
                top: 660rpx;
                width: 620rpx;
                height: 310rpx;
            }
        }
		
		// 弹框
		.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>
