<template>
	<view>
		<view class="status_bar"></view>
		<scroll-view class="shop" scroll-y @scrolltolower="onreachBottom">
			<view class="top">
				<image src="/static/image/shop/1.png" class="local"></image>
				<view class="add" @click="chooseArea=true">
					<text class="u-line-1">{{ area }}</text>
					<image src="/static/image/shop/2.png"></image>
				</view>
				<view @click="sousuo">
					<u-search placeholder="输入您喜欢的宝贝" v-model="keyword" :show-action="false" bg-color="#fff" border-color="#999999" :disabled="true"></u-search>
				</view>
				<image src="/static/image/shop/3.png" class="mnue" @click="toClassifyPage"></image>
			</view>
			<view class="swiper-image">
				<u-swiper :list="list" mode="dot" @click="clickImage"></u-swiper>
			</view>
			<view class="chengnuo">
				<view>
					<image src="/static/image/shop/4.png"></image>
					<text>免费洗衣</text>
				</view>
				<view>
					<image src="/static/image/shop/5.png"></image>
					<text>全国包邮</text>
				</view>
				<view>
					<image src="/static/image/shop/6.png"></image>
					<text>延误必赔</text>
				</view>
				<view>
					<image src="/static/image/shop/7.png"></image>
					<text>上门取件</text>
				</view>
			</view>
			<view class="fenlei">
				<shopitem v-for="item in goodsClassify" :key="item.gc_id" :info="item"></shopitem>
			</view>
			<!-- 秒杀 -->
			<recommend v-if="JSON.stringify(recommendedSpike) != '{}'" :recommendData="recommendedSpike" type="spike"></recommend>
			<!-- 秒杀列表 -->
			<seckill v-if="spikeList.length" :list="spikeList" :time="seckillTime"></seckill>
			<!-- 拼团推荐 -->
			<pintuan v-if="JSON.stringify(pinTuanPush) != '{}'" :recommendData="pinTuanPush"></pintuan>
			<!-- 拼团列表 -->
			<group></group>
			<view class="activity-view">
				<image class="lingquan" :src="activityInfo.adv_code" @click="activityLink({ type: activityInfo.url_type, id: activityInfo.info_id })"></image>
			</view>
            <!-- 优惠券 -->
			<youhq></youhq>
            <!-- 商品列表 -->
			<list ref="recommendGoods"></list>
            <!-- 购物车 -->
			<view class="cart" @click="toCartPage">
				<image src="/static/image/common/3.png"></image>
			</view>
			<u-picker mode="selector" :range="areaList" v-model="chooseArea" range-key="area_name" @confirm="setArea"></u-picker>
		</scroll-view>
	</view>
</template>
<script>
	import shopitem from "@/components/shop/shop-item/index";
	import recommend from "@/components/shop/recommend/index";
	import pintuan from "@/components/shop/recommend/pintuan";
	import seckill from "@/components/shop/seckill/index";
	import group from "@/components/shop/group/index";
	import youhq from "@/components/shop/youhq/index";
	import list from "@/components/shop/list/index";
	export default {
		name: "shop",
		components: {
			shopitem,
			recommend,
			seckill,
			group,
			youhq,
			list,
			pintuan
		},
		data() {
			return {
				area: "请选择",
				chooseArea: false,
				keyword: "",
				list: [],
				goodsClassify: [], // 商品分类
				// classifyList: [],
				recommendedSpike: {}, // 秒杀推荐
				spikeList: [], // 全部秒杀列表
				seckillTime: {}, // 秒杀时间
				// couponGroupList: [], // 优惠券拼团分类
				pinTuanPush: {}, // 拼团推荐
				activityInfo: {},
				areaList: [], // 位置信息
			}
		},
		onLoad() {
			this.getShopTopList();
			this.getLocation(); // 获取定位
			this.getStoreActivity();
			// this.area = uni.getStorageSync("address") || "请选择";
		},
		onShow() {
			this.getRecommendedSpike();
			this.getSpikeList();
			this.getPinTuanPush();
			this.getAllLoaction(); // 获取位置
		},
		methods: {
			sousuo() {
				// console.log(123)
				this.$u.route({
					url: "pageB/search/index",
					params: {
						type: 1,
					}
				})
			},
			// 获取定位
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						// console.log(res.address);
						this.area = res.address.city;
					},
					fail: (e) => {
						console.log(e);
					}
				});
			},
			// 获取位置
			getAllLoaction() {
				this.$u.api.getAreaList({pid: 0}).then(res => {
					// console.log(res);
					this.areaList = res.data;
				})
			},
			getShopTopList() {
				this.$u.api.getShopTopList().then((res) => {
					if (res.errCode == 0) {
						let temp = [];
						res.data.banner.forEach(item => {
							temp.push({
								image: item.adv_code,
								adv_link: item.adv_link,
								adv_id: item.adv_id,
                                info_id: item.info_id,
                                url_type: item.url_type,
							})
						})
						this.list = temp;
						this.goodsClassify = res.data.goodsclass;
					}
				})
			},
			getRecommendedSpike() {
				this.$u.api.recommendedSpike().then(res => {
					if (res.errCode == 0) this.recommendedSpike = res.data;
					// console.log(this.recommendedSpike);
				})
			},
			// 拼团推荐
			getPinTuanPush() {
				this.$u.api.getPinTuanPush().then(res => {
					if (res.errCode == 0) {
						this.pinTuanPush = res.data;
					}
				})
			},
			// 全部秒杀
			getSpikeList() {
				this.$u.api.getSpikeList({
					page: 0
				}).then(res => {
					if (res.errCode == 0) {
						this.spikeList = res.data.list;
						this.seckillTime = {
							bigHour: res.data.bigHour,
							littleHour: res.data.littleHour,
						}
					}
				})
			},
			clickImage(index) {
				// console.log(this.list[index]);
                let item = this.list[index];
                this.activityLink({
                	type: item.url_type,
                	id: item.info_id,
                });
			},
            activityLink({
            	type,
            	id
            }) {
                console.log(type,id);
            	if (type == 0) return false;
            	// type 1 商品详情页, 2 店铺详情页
            	const url = type == 1 ? 'pageB/sdetails/index' : 'pageC/merchant/index';
            	let params = {
            		id: id
            	};
            	// type: 1 // 商品详情 1普通 2拼团 3秒杀 4优惠券
            	if (type == 1) Object.assign(params, {
            		type: 1
            	});
            	this.$u.route({
            		url: url,
            		params: params
            	})
            },
			// 下拉加载更多推荐商品
			onreachBottom() {
				this.$refs.recommendGoods.loadMore();
			},
			setArea(e) {
				console.log(e);
				this.area = this.areaList[e[0]].area_name;
			},
			toCartPage() {
				uni.navigateTo({
					url: '/pageC/cart/index'
				});
			},
			toClassifyPage() {
				uni.navigateTo({
					url: '/pageC/classify/index'
				});
			},
			getStoreActivity() {
				this.$u.api.getStoreActivity().then(res => {
					if(res.errCode == 0) {
						this.activityInfo = res.data;
					}
				})
			},
			activityLink({ type, id }) {
				if(type == 0 || type == 2) return false;
				// type 1 商品详情页, 2 店铺详情页
				const url = type == 1 ? 'pageB/sdetails/index' : '';
				let params = { id: id };
				// type: 1 // 商品详情 1普通 2拼团 3秒杀 4优惠券
				if(type == 1) Object.assign(params, { type: 1 });
				this.$u.route({
					url: url,
					params: params
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	.shop {
		height: calc(100% - var(--window-top));
		box-sizing: border-box;
		background-color: #F0EDF1;
        overflow-y: scroll;

		.top {
			padding: 0 30rpx;
			background-color: #ffffff;
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.local {
				width: 31rpx;
				height: 37rpx;
			}
		}

		.swiper-image {
			background-color: #ffffff;
			padding: 0 30rpx;
		}

		.add {
			width: 115rpx;
			height: 25rpx;
			display: flex;
			font-size: 26rpx;
			color: #333;
			justify-content: space-between;
			align-items: center;
			margin-left: 14rpx;
			margin-right: 37rpx;

			>text {
				width: 80rpx;
			}

			>image {
				width: 24rpx;
				height: 15rpx;
			}
		}

		.mnue {
			background-color: #ffffff;
			width: 35rpx;
			height: 26rpx;
			margin-left: 36rpx;
		}

		.chengnuo {
			padding:20rpx 30rpx;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>view {
				display: flex;
				align-items: center;

				>image {
					width: 23rpx;
					height: 23rpx;
				}

				>text {
					font-size: 22rpx;
					color: #999;
					margin-left: 8rpx;
				}
			}
		}

		.fenlei {
			display: flex;
			flex-wrap: wrap;
			padding: 10rpx 30rpx;
			margin-bottom: 20rpx;
			background-color: #ffffff;
		}

		.activity-view {
			padding: 20rpx 30rpx;
			text-align: center;
			.lingquan {
				background-color: #ececec;
				width: 688rpx;
				height: 138rpx;
			}
		}

		.cart {
			z-index: 9;
			position: fixed;
			right: 30rpx;
			bottom: 300rpx;
			width: 100rpx;
			height: 100rpx;
			background: rgba(253, 211, 96, 1);
			box-shadow: 0rpx 10rpx 6rpx 0rpx rgba(253, 211, 96, 0.34);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			>image {
				width: 56rpx;
				height: 54rpx;
			}
		}
	}
</style>
