<template>
	<view>
		<view class="header-back">
			<!-- 轮播图 -->
			<view class="banner">
				<swiper class="banner-swiper" indicator-color="#8b64fd" indicator-active-color="#f8f8f8"
					indicator-dots autoplay>
					<swiper-item v-for="(item, index) in banners" :key="index">
						<image class="cover" :src="item.cover" mode="aspectFill" @click="swiperClick(item.url)" />
					</swiper-item>
				</swiper>
			</view>
			<!-- 分类 -->
			<view class="classify">
				<view class="classify-item" v-for="(item, index) in classify" :key="index"
					@click="onClassify(item.category_id,item.name)">
					<image class="cover" :src="item.cover" mode="aspectFill"></image>
					<view class="title">{{item.name}}</view>
				</view>
				<view class="classify-item" @click="onClassify('','全部')">
					<image class="cover" src="../../static/icons/equity_nav.png" mode="aspectFill"></image>
					<view class="title">查看全部</view>
				</view>
			</view>
			<!-- 每日推荐 -->
			<view class="block-title">
				<view class="title">
					每日推荐<text>链商精选 推荐好物</text>
				</view>
			</view>
			<view class="goods-push" v-if="JSON.stringify(position) != '{}'">
				<view class="itme item-mian" @click="onGoods(position.one)">
					<image class="cover" :src="position.one.cover" mode="aspectFill"></image>
					<view class="title">	
						<span class='is_allow_values' v-if='position.one.specal_tags.is_allow_values'>{{position.one.specal_tags.is_allow_values}}</span>
						{{position.one.name}}
					</view>
					<view class="price"><text>¥</text>{{position.one.original_price}}
					<span style='font-size: 26rpx;color: #555;font-weight: normal;padding-left: 10rpx;' v-if='position.one.price.pv>0'>
						+ <span>{{position.one.price.pv}}</span><image style="width: 20rpx;" src="/static/icons/crystal-icon.png" mode="widthFix" /> 
					</span>
					</view>
					<span class='is_self' v-if='position.one.specal_tags.is_self'>{{position.one.specal_tags.is_self}}</span>
				</view>
				<view class="itme">
					<view class="itme-list" v-for="(item, index) in position.two" :key="index" @click="onGoods(item)">
						<image class="cover" :src="item.cover" mode="aspectFill"></image>
						<view class="title">{{item.name}}</view>
						<view style='font-size: 24rpx;color: #999;font-weight: normal;' v-if='item.price.pv>0'>
							+ <span>{{item.price.pv}}</span><image style="width: 22rpx;" src="/static/icons/crystal-icon.png" mode="widthFix" /> 
						</view>
						<view class="price" style="font-size: 28rpx;"><text>¥</text>{{item.original_price}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 优惠券 -->
		<!-- 		<view class="block-title">
			<view class="title">
				限时抢购<text>海量商家优惠券</text>
			</view>
			<view class="more" @click="onCoupons('more')">查看更多</view>
		</view> -->
		<view class="coupons" v-if="coupons.length < 0">
			<view class="coupons-item" v-for="(item, index) in coupons" :key="index">
				<view class="content">
					<view class="coupons-title">
						<view class="coupons-title-tips" v-if="item.type">
							<!-- value == 1服务券    value == 2代金券   value == 3提货券 -->
							<image v-if="item.type.value == '1'" class="coupons-title-icon"
								src="../../static/icons/equity_coupons_01.png" mode="aspectFill"></image>
							<image v-else-if="item.type.value == '2'" class="coupons-title-icon"
								src="../../static/icons/equity_coupons_02.png" mode="aspectFill"></image>
							<image v-else-if="item.type.value == '3'" class="coupons-title-icon"
								src="../../static/icons/equity_coupons_03.png" mode="aspectFill"></image>
						</view>
						<view class="coupons-title-name">
							{{item.title}}
						</view>
					</view>
					<view class="sun-text">{{item.title}}</view>
				</view>
				<view class="logo">
					<image class="logo-img" :src="item.cover" mode="aspectFill"></image>
				</view>
				<button class="btn" :disabled="!item.can.get"
					@click="onCoupons('get', item.coupon_id, index)">{{item.can.get ? '立即领取' : '已领取'}}</button>
			</view>
		</view>
		<view class="block-title">
			<view class="title">
				优选商品<text>海量商家商品优选</text>
			</view>
		</view>
		<!-- 优选商品 -->
		<goods-list :list="goods" priceType="CNY" @on-goods="onGoods">
			<template #statistics="good">
				<view class="goods-pv">
					<block v-if="good.value.price.pv > 0">
						+ {{good.value.price.pv}}
						<image class="goods-pv-icon" src="/static/icons/crystal-icon.png" mode="widthFix" />
					</block>
				</view>
			</template>
		</goods-list>
		<!-- 分页 -->
		<uni-load-more :status="pageStatus" :iconSize="16"></uni-load-more>
	</view>
</template>

<script>
	import { mall, list, managesCoupons } from '@/apis/interfaces/goods'
	import goodsList from '@/components/goods-list/goods-list'
	import industryList from '@/components/industry-list/industry-list'
	import userAuth from '@/public/userAuth'
	import { config } from '@/apis/index.js'
	export default {
		comments: {
			goodsList,
			industryList
		},
		data() {
			return {
				// 易货部分
				banners: [],
				classify: [],
				coupons: [],
				position: {},
				goods: [],
				goodsPage: 1,
				// 分页
				pageStatus: '',
				imgUrl: config.apiUrls
			};
		},
		created() {
			this.getMall()
		},
		onNavigationBarButtonTap() {
			this.$Router.push({
				name: 'Search'
			})
		},
		methods: {
			// 点击轮播图
			swiperClick(url) {
				if (url === 'goBaoDanList') {
					uni.navigateTo({
						url: 'pages/goods/lists?type=baodan'
					})
				}
			},
			// 易货首页
			getMall() {
				mall().then(res => {
					this.classify = res.categories.slice(0, 9)
					this.banners = res.banners
					this.banners = [...this.banners, {
						cover: config.apiUrls + 'images/baodan-banner.png',
						url: 'goBaoDanList'
					}]
					this.coupons = res.coupons
					this.position = res.positions
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
				this.getGoods()
			},
			// 商品列表
			getGoods() {
				list({
					page: this.goodsPage
				}).then(res => {
					if (res.page.current === 1) {
						this.goods = []
					}
					this.goods = this.goods.concat(res.data)
					this.goodsPage = res.page.current
					this.pageStatus = res.page.has_more ? 'more' : 'noMore'
				})
			},
			// 商品详情
			onGoods(e) {
				this.$Router.push({
					name: 'goodsDetails',
					params: {
						id: e.goods_id
					}
				})
			},
			// 易货分类
			onClassify(id,name) {
				if(id){
					uni.navigateTo({
						url: `/pages/goods/lists?type=id&id=${id}&name=${name}`
					})
				}else{
					uni.navigateTo({
						url: `/pages/goods/goodsClassify`
					})
				}
			},
		},
		// 下拉加载
		onReachBottom() {
			if (this.pageStatus == 'more') {
				this.pageStatus = 'loading'
				this.goodsPage += 1
				this.getGoods()
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 易货
	.header-back {
		background-image: linear-gradient(to bottom, white, #f8f8f8);
		padding-top: $padding;

		// 易货轮播
		.banner {
			position: relative;
			background: white;
			margin: 0 $margin;
			border-radius: $radius/2;
			padding-top: calc(50% - #{$margin * 2});
			overflow: hidden;

			.banner-swiper {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;

				.cover {
					width: 100%;
					height: 100%;
					border-radius: $radius/2;
				}
			}
		}

		// 分类
		.classify {
			display: flex;
			margin: $margin/2;
			flex-wrap: wrap;

			.classify-item {
				margin: $margin/2;
				width: calc(20% - #{$margin});
				text-align: center;
				position: relative;


				.cover {
					width: 98rpx;
					height: 98rpx;
					vertical-align: top;
					margin-bottom: $margin/2;
				}

				.title {
					line-height: 40rpx;
					font-size: $title-size-sm;
					color: $text-gray;
					.is_allow_values {
						color: #fff;
						background-image: linear-gradient(to left,$mian-color,$mian-color-light);
						padding: 2rpx 14rpx;
						font-size: 20rpx;
						text-align: center;
						border-radius: 30rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}

	// 每日推荐
	.goods-push {
		margin: 0 $margin;
		background: white;
		border-radius: $radius/2;
		display: flex;

		.itme {
			width: 50%;
		}

		.item-mian {
			width: 50%;
			padding: $padding/2;
			height: 450rpx;
			box-sizing: border-box;
			text-align: center;
			border-right: solid 1rpx $border-color;
			@extend .vertical;
			position: relative;
			
			.is_self {
				position: absolute;
				top: 14rpx;
				right: 20rpx;
				background-image: linear-gradient(to bottom, #ee4c47, #9e312f);
				// background-color: #ee4c47;
				box-shadow: 0 4rpx 10rpx 2rpx rgba($color: #000, $alpha: .3);
				color: #fff;
				font-size: 26;
				padding: 2rpx 20rpx 10rpx 20rpx;
				border-radius: 0 0 50rpx 50rpx;
			}
			.title {
				font-weight: bold;
				font-size: $title-size;
				@extend .nowrap;
				line-height: 50rpx;
				.is_allow_values {
					color: #fff;
					background-image: linear-gradient(to left,$mian-color,$mian-color-light);
					padding: 2rpx 14rpx;
					font-size: 20rpx;
					text-align: center;
					border-radius: 30rpx;
					margin-right: 20rpx;
				}
			}

			.price {
				color: $text-price;
				font-size: $title-size;
				font-weight: bold;
				line-height: 50rpx;

				text {
					font-size: 80%;
					margin-right: 10rpx;
				}
			}

			.cover {
				margin-bottom: 20rpx;
				width: 320rpx;
				height: 300rpx;
				vertical-align: top;
			}
		}

		.itme-list {
			position: relative;
			padding: 25rpx $padding/2;
			padding-left: 150rpx;
			height: 150rpx;
			box-sizing: border-box;

			.title {
				font-size: $title-size-lg;
				@extend .nowrap;
				line-height: 50rpx;
			}

			.price {
				color: $text-price;
				font-size: $title-size;
				font-weight: bold;
				line-height: 40rpx;

				text {
					font-size: 80%;
					margin-right: 10rpx;
				}
			}

			.cover {
				position: absolute;
				left: $padding/2;
				top: $padding/2;
				width: calc(150rpx - #{$padding});
				height: calc(150rpx - #{$padding});
			}
		}
	}

	// 优惠券
	.coupons {
		display: flex;
		flex-wrap: wrap;
		margin: -10rpx ($margin - 10rpx);

		.coupons-item {
			background: white;
			width: calc(50% - 20rpx);
			margin: 10rpx;
			border-radius: $radius/2;
			padding: $padding - 10;
			box-sizing: border-box;
			// display: flex;
			align-items: center;
			justify-content: space-between;

			.content {
				width: 100%;

				.coupons-title {
					font-size: $title-size-lg;
					font-weight: 600;
					margin-bottom: 10rpx;
					line-height: 54rpx;
					display: flex;
					@extend .nowrap;

					.coupons-title-tips {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						overflow: hidden;
						background-color: #f5f5f5;
						text-align: center;
						margin-right: 10rpx;

						.coupons-title-icon {
							width: 28rpx;
							height: 28rpx;
							margin: 11rpx;
						}
					}
				}

				.sun-text {
					font-size: $title-size-sm;
					color: $text-gray;
					line-height: 54rpx;
					@extend .nowrap;
				}

				.btn {
					color: $text-price;
					border: solid 1rpx $text-price;
					display: inline-block;
					font-size: $title-size-sm;
					padding: 0 ($padding/2);
					height: 45rpx;
					line-height: 45rpx;
					border-radius: 22rpx;
				}
			}

			.logo {
				width: 100%;
				padding-top: 70%;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;

				.logo-img {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
			}

			.btn {
				background-color: #faf2dd;
				border-radius: 8rpx;
				margin-top: 20rpx;
				color: #fd5f3c;
				text-align: center;
				line-height: 64rpx;
				font-size: 28rpx;
				font-weight: 600;

				&[disabled] {
					background: rgba($color: #faf2dd, $alpha: .8);
					color: rgba($color: #fd5f3c, $alpha: .5);
				}

				&::after {
					border: none;
				}
			}
		}
	}

	// 模块标题
	.block-title {
		padding: $padding;
		display: flex;
		justify-content: space-between;

		.title {
			font-weight: bold;

			text {
				padding-left: $padding/2;
				font-weight: normal;
				font-size: $title-size-m;
				color: $text-gray;
			}
		}

		.more {
			font-size: $title-size-m;
			font-weight: normal;
			color: $text-gray;
		}
	}
	// 加水晶
	.goods-pv{
		.goods-pv-icon{
			width: 20rpx;
			vertical-align: middle;
			margin-left: 5rpx;
			margin-bottom: 5rpx;
		}
	}
</style>
