<template>
	<view class="container">
		<view class="vheigh"></view>
		<view class="top" @click="clickSearch()">
			<view class="top-icon">
				<image src="../../static/icon/icon.png" mode=""></image>
			</view>
			<view class="top-main">
				输入你要查找的内容
			</view>
		</view>
		<swiper class="banner" autoplay="true" duration="400" interval="5000">
			<swiper-item class="banner-item" v-for="(item, index) in carouselList">
				<image src="../../static/img/banner.png" />
			</swiper-item>
		</swiper>
		<view class="navbar flex">
			<view class="navbar-item">
				<view class="navbar-image">
					<image src="../../static/icon/index1.png" mode=""></image>
				</view>
				<view class="navbar-font">
					全部商品
				</view>
			</view>
			<view class="navbar-item">
				<view class="navbar-image">
					<image src="../../static/icon/index2.png" mode=""></image>
				</view>
				<view class="navbar-font">
					公司介绍
				</view>
			</view>
			<view class="navbar-item">
				<view class="navbar-image">
					<image src="../../static/icon/index3.png" mode=""></image>
				</view>
				<view class="navbar-font">
					联系客服
				</view>
			</view>
			<view class="navbar-item">
				<view class="navbar-image">
					<image src="../../static/icon/index4.png" mode=""></image>
				</view>
				<view class="navbar-font">
					邀请好友
				</view>
			</view>
		</view>
		<view class="xian"></view>
		<view class="hot-box">
			<view class="hot-title flex">
				<view class="hot-title-item flex">
					<view class="hot-title-image">
						<image src="../../static/icon/fire.png" mode=""></image>
					</view>
					<view class="hot-title-font">
						好货上新
					</view>
				</view>
				<view class="hot-title-item flex">
					<view class="hot-title-more">
						更多
					</view>
					<view class="hot-title-jt">
						<image src="../../static/icon/jt.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="hot-main flex">
				<view class="hot-main-item" v-for="(item,index) in hotList">
					<view class="hot-main-image">
						<image src="../../static/img/banner.png" mode=""></image>
					</view>
					<view class="hot-name clamp">
						护肤品面膜套装
					</view>
					<view class="hot-price">
						￥69.9 <text class="yuan-price">￥89.9</text>
					</view>
				</view>
			</view>
		</view>
		<view class="xian"></view>
		<view class="guess-section-box">
			<view class="guess-section-title">
				<view class="guess-section-xian"></view>
				<view class="guess-section-title-font">
					爆款推荐
				</view>
				<view class="guess-section-xian"></view>
			</view>
			<view class="guess-section">
				<view v-for="(item, index) in bastList" :key="index" class="guess-item" @click="navToDetailPage(item)">
					<view class="image-wrapper">
						<image :src="item.image" mode="scaleToFill"></image>
					</view>
					<text class="title clamp margin-c-20">{{ item.store_name }}</text>
					<view class="cmy-hr"></view>
					<view class="price margin-c-20 flex">
						<view>
							￥{{ item.price }}
							<text class="yuan-price">￥{{item.yuan}}</text>
						</view>
						<!-- <view class="font-size-sm">
									<text class="font-color-gray">{{ item.sales }}人购买</text>
								</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loadIndexs
	} from '@/api/index.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		setCoupons
	} from '@/api/functionalUnit.js';
	import {
		getBargainList
	} from '@/api/product.js';
	import {
		interceptor
	} from '@/utils/loginUtils';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				carouselList: [''],
				hotList: ['', '', ''],
				bastList: [{
						image: '../../static/img/banner.png',
						store_name: '爆款推荐康养跨店联fsadfsdsdfsda',
						price: '26.90',
						yuan: '36'
					},
					{
						image: '../../static/img/banner.png',
						store_name: '爆款推荐康养跨店联fsadfsdsdfsda',
						price: '26.90',
						yuan: '36'
					},
					{
						image: '../../static/img/banner.png',
						store_name: '爆款推荐康养跨店联fsadfsdsdfsda',
						price: '26.90',
						yuan: '36'
					},
				]
			};
		},
		computed: {
			...mapState('user', ['hasLogin', 'userInfo'])
		},
		onLoad: function(option) {
			// #ifndef MP
			if (option.spread) {
				// 存储其他邀请人
				uni.setStorageSync('spread', option.spread);
			}
			// #endif
			// #ifdef MP
			if (option.scene) {
				// 存储小程序邀请人
				uni.setStorage({
					key: 'spread_code',
					data: option.scene
				});
			}
			// #endif
		},
		onShow: function() {
			// 判断是否强制登录
			if (this.loginInterceptor && !this.hasLogin) {
				// 登录拦截
				interceptor();
			}
			// this.loadData();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData();
		},
		methods: {
			//砍价商品推荐详情页
			navToDetailPages(item) {
				let id = item.product_id;
				//let type = 2;

				uni.navigateTo({
					url: '/pages/product/product?id=' + id
				});
			},
			openSubscribe: function(e) {
				let page = e;
				// #ifndef MP
				uni.navigateTo({
					url: page
				});
				// #endif
				// #ifdef MP
				uni.showLoading({
					title: '正在加载'
				});
				openBargainSubscribe()
					.then(res => {
						uni.hideLoading();
						uni.navigateTo({
							url: page
						});
					})
					.catch(err => {
						uni.hideLoading();
					});
				// #endif
			},
			Tocancel() {
				this.shareShow = false;
			},
			// 點擊搜索框
			clickSearch() {
				uni.navigateTo({
					url: '/pages/product/search'
				});
			},
			// 请求载入数据
			async loadData() {
				loadIndexs({})
					.then(({
						data
					}) => {
						let goods = data.info;
						this.carouselList = data.banner;
						this.swiperLength = this.carouselList.length;
						this.menusList = data.menus;
						this.goodsList = goods.firstList; //最新商品
						this.bastList = goods.bastList; //精品推荐
						this.bastBanner = data.benefit; //促销单品
						this.$set(this, 'couponArray', data.couponList); //保存卡包券

						uni.stopPullDownRefresh();
					})
					.catch(e => {
						uni.stopPullDownRefresh();
					});

			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			//详情页
			navToDetailPage(item) {
				let id = item.id;
				uni.navigateTo({
					url: '/pages/product/product?id=' + id
				});
			},

			// 轮播图跳转
			bannerNavToUrl(item) {
				// #ifdef H5
				if (item.wap_url.indexOf('http') > 0) {
					window.location.href = item.wap_url;
				}
				// #endif
				//测试数据没有写id，用title代替
				uni.navigateTo({
					url: item.wap_url
				});
			}
		}
	};
</script>

<style lang="scss">
	.vheigh {
		height: var(--status-bar-height);
		background-color: #ffffff;
	}

	.container,
	page {
		height: auto;
		min-height: 100%;
		background: #ffffff;
	}

	.top {
		width: 689rpx;
		height: 58rpx;
		background: #EDEDED;
		border-radius: 29rpx;
		margin: 20rpx auto 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.top-icon {
			width: 32rpx;
			height: 32rpx;

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

		.top-main {
			margin-left: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #CBCBCB;
		}
	}

	.banner {
		margin: 20rpx auto 0;
		width: 690rpx;
		height: 350rpx;

		.banner-item {
			width: 690rpx;
			height: 350rpx;

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

	.navbar {
		justify-content: space-around;
		margin-top: 50rpx;

		.navbar-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.navbar-image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.navbar-font {
				margin-top: 24rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}
	}

	.xian {
		margin-top: 50rpx;
		width: 750rpx;
		height: 20rpx;
		background: #EFEFEF;
		opacity: 0.61;
	}

	.hot-box {
		padding: 0 30rpx;

		.hot-title {
			padding-top: 50rpx;

			.hot-title-item {
				justify-content: flex-start;

				.hot-title-image {
					width: 36rpx;
					height: 36rpx;

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

				.hot-title-font {
					margin-left: 7rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #303030;
				}

				.hot-title-more {
					margin-right: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}

				.hot-title-jt {
					width: 10rpx;
					height: 19rpx;
					position: relative;
					top: -8rpx;

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

		.hot-main {
			margin-top: 25rpx;

			.hot-main-item {
				width: 220rpx;
				background: #FFFFFF;
				border: 4rpx solid #F0E7D2;
				border-radius: 10rpx;
				padding: 0 0 34rpx;

				.hot-main-image {
					width: 212rpx;
					height: 212rpx;

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

				.hot-name {
					padding: 20rpx 12rpx 0;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #0A122B;
				}

				.hot-price {
					padding: 0 12rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #FF4C4C;

					.yuan-price {
						display: inline-block;
						margin-left: 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						text-decoration: line-through;
						color: #969696;
					}
				}
			}
		}
	}

	.guess-section-box {
		margin-top: 20rpx;
		width: 750rpx;
		background: #fff;
		padding-top: 30rpx;

		.guess-section-title {
			display: flex;
			justify-content: center;
			align-items: center;

			.guess-section-xian {
				width: 120rpx;
				height: 1px;
				background: #999999;
			}

			.guess-section-title-font {
				margin: 0 70rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #363636;
			}
		}
	}

	.guess-section {
		margin-top: 40rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 0 30rpx;

		.guess-item {
			padding-bottom: 35rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			width: 48%;
			margin-bottom: 4%;
			border-radius: $border-radius-sm;
			background-color: white;
			box-shadow: $box-shadow;

			&:nth-child(2n + 1) {
				margin-right: 4%;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 330rpx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.title {
			margin-top: 28rpx;
			font-size: $font-base;
			color: $font-color-dark;
			font-weight: bold;
		}

		.price {
			margin-top: 34rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #FF4C4C;
			line-height: 1;

			.yuan-price {
				display: inline-block;
				margin-left: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				text-decoration: line-through;
				color: #969696;
			}


		}

		.icon {
			@extend %icon;
		}

		.detail {
			line-height: 1;
		}

		.tip {
			color: white;
			background-color: $color-yellow;
			line-height: 1.5;
			font-size: $font-sm;
			padding-left: 20rpx;
		}
	}

	/*公用边框样式*/
	%icon {
		margin-right: 10rpx;
		display: inline-block;
		padding: 2rpx 10rpx;
		border: 1rpx solid $color-yellow;
		color: $color-yellow;
		line-height: 1;
		font-size: $font-base;
		border-radius: 10rpx;
	}
</style>
