<template>
	<view>
		<!-- 顶部菜单 -->
		<!-- <view class="mart80" v-if="isdisplay">
			<lottie  :options="defaultOptions" :height="200" :width="200"
				@animCreated="handleAnimation" />
		</view> -->
		<!-- <view class="status"></view> -->
		<view v-for="(item,index) in homeCateList" :key="index">
			<view class="height90 backcorltop" v-if="item.type == 1">
				<view class="category-list">
					<view class="category" style="width: 25%;" v-for="(row, indexs) in item.childCategory" :key="indexs"
						@click="toCategory(row)">
						<view class="img">
							<image :src="imageUrl+row.imgData"></image>
						</view>
						<view class="text fcorfff">{{ row.title }}</view>
					</view>
				</view>
			</view>
			<!-- 顶部活动图片 -->
			<image class="width100" mode="widthFix" :src="imagewxUrl+imgadres" v-if="item.type == 8"></image>

			<!-- 顶部菜单 -->
			<view class="category-list backcorfff" style="margin-top: -5px;" v-if="item.type == 7">
				<view class="category" style="width: 20%;" v-for="(row, indexc) in item.childCategory" :key="indexc"
					@click="toCategory(row)">
					<view class="img">
						<image :src="imageUrl+row.imgData"></image>
					</view>
					<view class="text fcor333">{{ row.title }}</view>
				</view>
			</view>
			<!-- 消息 -->
			<view class="height120 backcorfff" v-if="item.type == 3">
				<view class="height20 width100"></view>
				<view class="width92 message alijus">
					<view class="width100 alijus" style="margin-top: -20px;" @click="test(item.childDate)"
						v-if="item.childDate.length == 1">
						<view class="width80p paddleft10 alijusstart">
							<view class="stus"></view>
							<view class="paddleft10 font14 fcor666 text1 width70">
								{{item.childDate[0].title}}
							</view>
							<view class="width25 font13 fcor999">{{swipers.timeData}}</view>
						</view>
						<view class="width20 alijus">
							<image class="icon15" mode="widthFix" src="../../../static/img/jt.png"></image>
						</view>
					</view>
					<swiper v-else circular="true" autoplay="true" display-multiple-items="2" :vertical="true">
						<swiper-item class="alijus" v-for="(swipers,index) in item.childDate" :key="swipers.id"
							@click="test(index)">
							<view class="width80p paddleft10 alijusstart">
								<view class="stus"></view>
								<view class="paddleft10 font14 fcor666 text1 width70">
									{{swipers.title}}
								</view>
								<view class="width25 font13 fcor999">{{swipers.timeData}}</view>
							</view>
							<view class="width20 alijus">
								<image class="icon15" mode="widthFix" src="../../../static/img/jt.png"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- 轮播图 -->
			<view class="swiper mart20" v-if="item.type == 2">
				<view class="swiper-box">
					<swiper circular="true" autoplay="true" @change="swiperChange">
						<swiper-item v-for="swiper in item.childCategory" :key="swiper.id">
							<image :src="imageUrl+swiper.imgData" @click="jumplottery(swiper)"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- 加油专区 ,天天好券-->
			<view class="width90 mart20 alijusstart" v-if="item.type == 6 || item.type == 9"
				@click="goGoodsList(item.jumpUrl)">
				<view class="width70 font18 fcor333">
					{{item.name}}
				</view>
				<view class="width30 font14 fotrt fcor666">更多</view>
			</view>
			<view class="width94 alijus mart20" v-if="item.type == 6 ">
				<view class="backcorfff spcarea" v-for="(goods,index) in item.childDate" :key="index">
					<image mode="widthFix" class="width100" :src="imageUrl+goods.couponImg"></image>
					<view class="width96 fcor333 font15 fontwig6">{{goods.couponName}}</view>
					<view class="width96 fcor999 font11">{{goods.salesEndTime | timeFormat('yyyy-mm-dd hh:mm:ss')}}
					</view>
					<view class="width94 fcoreb5 font15 fontwig6">¥{{goods.salesPrice}}</view>
				</view>
			</view>
			<view class="width94 alijus mart20" v-if="item.type == 9 ">
				<view class="backcorfff spcarea" v-for="(goods,index) in item.childDate" :key="index">
					<image mode="widthFix" class="width100" :src="imageUrl+goods.listImg"></image>
					<view class="width96 fcor333 font15 fontwig6">{{goods.title}}</view>
					<view class="width96 fcor999 font11" v-if="goods.effectiveTiem">
						{{goods.effectiveTiem | timeFormat('yyyy-mm-dd hh:mm:ss')}}
					</view>
					<view class="width94 fcoreb5 font15 fontwig6">¥{{goods.price}}</view>
				</view>
			</view>
			<!-- 惠享生活 -->
			<view class="width90 mart20 alijusstart" v-if="item.type == 5">
				<view class="width70 font18 fcor333">
					惠享生活
				</view>
			</view>
			<image class="width90 mart10" mode="widthFix" v-if="item.type == 5"
				:src="imageUrl+item.childCategory[0].imgData" @click="goGoodsList(item.childCategory[0].jumpUrl)">
			</image>
			<view class="width90 alijusstart mart10" v-if="item.type == 5">
				<image :src="imageUrl+item.childCategory[1].imgData" mode="widthFix" class="width31"
					@click="goGoodsList(item.childCategory[1].jumpUrl)"></image>
				<image :src="imageUrl+item.childCategory[2].imgData" mode="widthFix" class="width31"
					@click="goGoodsList(item.childCategory[2].jumpUrl)"></image>
				<image :src="imageUrl+item.childCategory[3].imgData" mode="widthFix" class="width31"
					@click="goGoodsList(item.childCategory[3].jumpUrl)"></image>
			</view>

		</view>
		<!-- 弹窗 -->
		<wybPopup ref="popup" type="center" height="850" width="600" bgColor="" radius="6" :showCloseIcon="true">
			<image class="popImg" :src="imageUrl+imgadres3" @click="jumpWeb"></image>
		</wybPopup>
		<view class="height40"></view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getCouponList,
		getCacheParam,
		delCacheParam,
		getCmsContent,
		findByLatAndLng
	} from "../../../Utils/Api.js"; //您的api路径
	import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';

	let app = getApp();
	export default {
		components: {
			wybPopup
		},
		data() {
			return {
				isShowAuth: false,
				city: '',
				currentSwiper: 0,
				imageUrl: app.globalData.imgUrl,
				imagewxUrl: app.globalData.imageWxImg,
				imgadres: '/home/home1.png',
				imgadres1: '/home/home2.png',
				imgadres2: 'jt.png',
				imgadres5: 'unionarea.png',
				imgadres3: '',
				imgadres4: 'cusservice.png',
				webUrl: '',
				//猜你喜欢列表
				productList: [],
				productListleg: '',
				goldproductList: [],
				goldproductListleg: '',
				loadingText: '正在加载...',
				pageNum: 1,
				pageSize: 6,
				homeCateList: [],
				//切换状态
				cpStuats: 1,
				jumpType: '',
				isdisplay: true //是否展示
			};
		},
		onShow() {
			let that = this;
			that.hqaddress();
			uni.getStorage({
				key: "user",
				success(e) {
					app.globalData.userInfo = e.data; //这就是你想要取的token
					uni.getStorage({
						key: 'token',
						success(e) {
							app.globalData.token = e.data;
						}
					})
					that.getCacheParam();
				}
			})
		},
		onLoad() {},
		methods: {
			//等待加载
			handleAnimation: function(anim) {
				this.anim = anim;
			},
			//获取卡券ID
			getCacheParam() {
				let that = this;
				let params = {
					key: app.globalData.userInfo.phone
				}
				getCacheParam(params).then(res => {
					if (res.return_code == '000000' && res.return_data) {
						let datas = res.return_data;
						uni.showModal({
							title: '优惠券领取',
							content: '前往领取优惠券',
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '../../goods/externalCoupon/externalCoupon?id=' +
											datas
									})
									that.delCacheParam();
								} else if (res.cancel) {
									console.log('用户点击取消');
									that.delCacheParam();
								}
							}
						});
					}
				})
			},
			// 删除存的卡券
			delCacheParam() {
				let params = {
					key: app.globalData.userInfo.phone
				}
				delCacheParam(params).then(res => {

				})
			},
			test(item) {
				uni.navigateTo({
					url: '../../user/news/news'
				})
			},
			//定位信息
			hqaddress() {
				let that = this;
				upsdk.pluginReady(function() {
					upsdk.getLocationCity({
						success: function(cityCd) {
							app.globalData.cityId = cityCd;
						},
						fail: function(err) {}
					});
					upsdk.getLocationGps({
						success: function(res) {
							switch (uni.getSystemInfoSync().platform) {
								case 'android':
									let zuob = JSON.parse(res);
									app.globalData.latitude = zuob.latitude;
									app.globalData.longitude = zuob.longitude;
									that.findByLatAndLng(zuob.longitude, zuob.latitude);
									break;
								case 'ios':
									app.globalData.latitude = res.latitude;
									app.globalData.longitude = res.longitude;
									that.findByLatAndLng(res.longitude, res.latitude);
									break;
							}

						},
						fail: function() {}
					});
				});
			},
			//经纬度转换
			findByLatAndLng(item, item1) {
				let datas = {
					lng: item,
					lat: item1
				}
				findByLatAndLng(datas).then(res => {
					if (res.return_code == '000000') {
						// res.return_data.provinceName
						app.globalData.cityName = res.return_data.provinceName;
						app.globalData.qianzhuCityName = res.return_data.cityName;
						app.globalData.cityId = res.return_data.regionId;
						// app.globalData.cityId = '520000';
						app.globalData.companyId = res.return_data.companyId;
						this.getCmsAactibity();
						this.getCmsContentcmsContent();
					}
				});
			},
			//获取首页功能
			getCmsContentcmsContent() {
				let params = {
					companyId: app.globalData.companyId,
					platform: 3,
					categoryCode: 'CMS_HOME'
				}
				getCmsContent(params).then(res => {
					this.isdisplay = false;
					if (res.return_code == '000000') {
						this.homeCateList = res.return_data;
					}
				});
			},
			//首页弹窗
			getCmsAactibity() {
				uni.showToast({
					title: '加载中...'
				})
				let params = {
					companyId: app.globalData.companyId,
					platform: 3,
					categoryCode: 'CMS_UNIONPAY_ALERT'
				}
				getCmsContent(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000' && res.return_data != '') {
						//弹窗首页广告
						this.showPopup();
						this.imgadres3 = res.return_data[0].imgData;
						this.webUrl = res.return_data[0].ext1;
						this.jumpType = res.return_data[0].jumpType;
					}
				});
			},
			//显示弹出
			showPopup() {
				this.$refs.popup.show();
			},
			close() {
				this.isShowAuth = false;
			},
			//关闭弹窗
			closePopup() {
				this.$refs.popup.hide();
			},

			/**
			 * 跳转外链
			 */
			jumpWeb() {
				if (this.jumpType == 1) {
					if (this.webUrl) {
						uni.navigateTo({
							url: '../order/webUrl/webUrl?url=' + this.webUrl
						})
					}
				} else {
					uni.navigateTo({
						url: this.webUrl
					})
				}

				this.closePopup();
			},
			//搜索跳转
			toSearch() {
				uni.navigateTo({
					url: '../../goods/HM-search/HM-search'
				})
			},
			//跳转位置
			goPostion() {
				uni.navigateTo({
					url: '/pages/user/positioning/positioning'
				})
			},
			//商品跳转
			toGoods(e) {
				uni.navigateTo({
					url: '../../goods/goods?id=' + e
				});
			},
			//积分卡券列表
			getCouponListgold() {
				let params = {
					regionId: app.globalData.cityId,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					displayArea: 2
				}
				getCouponList(params).then(res => {
					if (res.return_code == '000000' && res.return_data.list) {
						this.goldproductList = res.return_data.list;
						this.goldproductListleg = res.return_data.total;
						if (res.return_data.total > 4) {
							this.goldproductListleg = 4;
							return;
						}
						this.goldproductListleg = res.return_data.total;
					}
				})
			},
			//拨打客服电话
			playPhone() {
				uni.showModal({
					title: '客服',
					content: '4006780738',
					success: function(res) {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: '4006780738', //电话号码
								success: function(e) {
									console.log(e);
								},
								fail: function(e) {
									console.log(e);

								}
							})
						}
					}
				})
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			//跳转菜单
			toCategory(item) {
				uni.navigateTo({
					url: item.jumpUrl
				})
			},
			//轮播跳转活动
			jumplottery(item) {
				if (item.ext1) {
					uni.navigateTo({
						url: item.ext1
					})
				}
			},
			//调整商品列表
			goGoodsList(item) {
				uni.navigateTo({
					url: item
				})
			},
		},

	};
</script>
<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.status {
		width: 100%;
		height: 44px;
		background-color: #6fbdee;
	}

	.popImg {
		width: 100%;
		height: 430px;
	}

	.h5xfimg {
		width: 80rpx;
		bottom: 140rpx;
		position: fixed;
		right: 40rpx;
	}

	.xfimg {
		width: 80rpx;
		bottom: 60rpx;
		position: fixed;
		right: 40rpx;
	}

	@font-face {
		font-family: 'HMfont-home';
		src: url('data:application/x-font-woff2;charset=utf-8;base64,[encoded data, 5768 characters]') format('woff2');
	}

	button::after {
		border: none
	}

	.pullDown-effects {
		position: fixed;
		//top: calc(100upx - 36vw);
		top: 0;
		z-index: 9;
		width: 100%;
		height: 36vw;
		/*  #ifdef  APP-PLUS  */
		padding-top: var(--status-bar-height);

		/*  #endif  */
		image {
			width: 100%;
			height: 36vw;
		}
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}

	.header {
		width: 92%;
		padding: 0 4%;
		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		background-color: #3da7e7;
		top: 0;
		z-index: 10;

		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */

		.addr {
			width: 120upx;
			height: 45rpx;
			flex-shrink: 0;
			display: flex;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			align-items: center;
			font-size: 28upx;
			color: #FFFFFF;

			.icon {
				height: 60upx;
				margin-right: 5upx;
				display: flex;
				align-items: center;
				font-size: 42upx;
				color: #ffc50a;
			}
		}

		.input-box {
			width: 100%;
			height: 70rpx;
			background-color: #f5f5f5;
			border-radius: 10rpx;
			position: relative;
			display: flex;
			align-items: center;

			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 60upx;
				height: 60upx;
				font-size: 34upx;
				color: #c0c0c0;
			}

			input {
				padding-left: 28upx;
				height: 28upx;
				font-size: 28upx;
				width: 100%;
			}
		}

		.icon-btn {
			width: 60upx;
			height: 60upx;
			flex-shrink: 0;
			margin-left: 5px;
			display: flex;

			.icon {
				width: 60upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 42upx;
				background-color: transparent;
			}
		}
	}

	//弹窗
	button::after {
		border: none
	}

	.category-list {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

		.category {
			margin-top: 40upx;
			display: flex;
			flex-wrap: wrap;

			.img {
				width: 100%;
				display: flex;
				justify-content: center;

				image {
					width: 9vw;
					height: 9vw;
				}
			}

			.text {
				margin-top: 16upx;
				width: 100%;
				display: flex;
				justify-content: center;
				font-size: 24upx;
			}
		}
	}


	.swiper {
		width: 100%;
		display: flex;
		justify-content: center;

		.swiper-box {
			width: 92%;
			height: 100px;
			overflow: hidden;
			border-radius: 15upx;
			box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;

			swiper {
				width: 100%;
				height: 100px;

				swiper-item {
					image {
						width: 100%;
						height: 100px;
					}
				}
			}
		}
	}

	.spcarea {
		width: 31%;
		margin-right: auto;
		margin-left: auto;
		border-radius: 10px 10px 0px 0px;
		padding-bottom: 10px;
	}

	.message {
		border: 1px solid #f1f1f1;
		height: 60px;
		border-radius: 8px;
		overflow: hidden;
		position: relative;
		z-index: 1;
		padding-top: 5px;
		padding-bottom: 5px;

		swiper {
			width: 100%;
			height: 60px;

			swiper-item {
				view {
					height: 20px;
				}
			}
		}

		.stus {
			width: 5px;
			height: 5px;
			background-color: red;
			border-radius: 50%;
		}
	}
</style>
