<template>
    <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" class="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 :classifyList="couponGroupList"></group>
        <image class="lingquan"></image>
        <youhq></youhq>
        <list ref="recommendGoods"></list>
		<view class="cart" @click="toCartPage">
			<image src="/static/image/common/3.png"></image>
		</view>
		<u-picker mode="region" :params="areaParams" v-model="chooseArea" @confirm="setArea"></u-picker>
    </scroll-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,
			areaParams: {
				province: true,
				city: true,
				area: false
			},
            keyword: "",
			list: [],
			goodsClassify: [], // 商品分类
			classifyList: [],
			recommendedSpike: {}, // 秒杀推荐
			spikeList: [], // 全部秒杀列表
			seckillTime: {}, // 秒杀时间
			couponGroupList: [], // 优惠券拼团分类
			pinTuanPush: {}, // 拼团推荐
        }
	},
	onLoad() {
		this.getShopTopList();
	},
	onShow() {
		this.getRecommendedSpike();
		this.getSpikeList();
		this.getGoodsClass();
		this.getPinTuanPush();
	},
	methods: {
        sousuo() {
            // console.log(123)
            this.$u.route({
                url:"pageB/search/index"
            })
        },
		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,
						})
					})
					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;
				}
			})
		},
		// 获取优惠券拼团分类
		getGoodsClass() {
			this.$u.api.getGoodsClass().then(res => {
				if(res.errCode == 0) {
					this.couponGroupList = 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(index);
			console.log(this.list[index]);
		},
		// 下拉加载更多推荐商品
		onreachBottom() {
			this.$refs.recommendGoods.loadMore();
		},
		setArea(e) {
			// console.log(e);
			this.area = e.city.label;
		},
		toCartPage() {
			uni.navigateTo({
				url: '/pageC/cart/index'
			});
		},
		toClassifyPage() {
			uni.navigateTo({
				url: '/pageC/classify/index'
			});
		},
	},
}
</script>
<style lang="scss" scoped>
.shop {
	height: calc(100vh - var(--window-top));
	box-sizing: border-box;
	background-color: #F0EDF1;
    .top {
		padding: 0 30rpx;
		background-color: #ffffff;
        width: 100%;
        height: 88rpx;
        display: flex;
        align-items: center;
        .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: 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 {
		padding: 30rpx;
		background-color: #ffffff;
        display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
		> view {
			margin-bottom: 30rpx;
			&:not(:nth-child(5n)) {
				margin-right: 70rpx;
			}
		}
    }
    .lingquan {
        width: 750rpx;
        height: 177rpx;
        margin-left: -33rpx;
        margin-top: 29rpx;
        background-color: #ececec;
    }
	.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>