
<template>
	<div class="home">
		<div ref="test" class="page-top">		
			<i class="position" @click="show = true"><img src="../assets/images/icon/position.png"/>{{defaultCity}}</i>
			<i class="logo"><img src="../assets/images/icon/logo.png" /></i>
			<i class="text"><a href="tel:400-6080100">联系客服</a></i>
		</div>
		<div class="page-content">
			<div class="banner" v-if="bannerImgList.length > 0">
				<swiper :options="swiperOption" ref="mySwiper">
					<swiper-slide v-for="(item,index) in bannerImgList"  :key="index">
						<div class="swiper-img" :style="{backgroundImage:'url('+item.imgUrl+')'}"></div>
					</swiper-slide>
				</swiper>
				<div class="swiper-pagination"></div>
			</div>
			<div class="coupon" v-if="promotionImgList.imgUrl">
				<a v-if="promotionImgList.linkUrl != '' " :href="promotionImgList.linkUrl"><img :src="promotionImgList.imgUrl"/></a>
				<a v-else href="javascript:void(0)"><img :src="promotionImgList.imgUrl"/></a>
			</div>
			<div class="new-card" v-for="item in goodsList">
				<div class="new-card-top">
					<img :src=" imghost + item.list[0].categoryImage">
				</div>
				<ul class="card-list">
					<li v-for="item1 in item.list">
						<div class="left">
							<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo">
								<img :src=" imghost + item1.bannerImgs" />
							</a>
						</div>
						<div class="right">
							<h3>{{item1.name}}</h3>
							<div class="text">{{item1.shortDesc}}</div>
							<div class="card-name"><i>{{toJSON(item1.smallLabel)}}</i></div>
							<div class="btn-box">
								<span>￥ <em>{{item1.originalPrice > 0 ? item1.originalPrice/100 : item1.price/100}}</em></span>
								<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo">立即购买</a>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		
		<div class="page-bottom">
			<routerFooter></routerFooter>
		</div>
		
		<popup v-model="show">
	        <div class="picke-address">
	        	<div class="status-btn">
	        		<a class="cel-btn" @click="show = false">取消</a>
	        		<a class="complete-btn" @click="getName()">完成</a>
	        	</div>
	         	<picker :data='addressData' :columns=3 v-model='addressValue' @on-change='change' ref="picker1"></picker>
	        </div>
	    </popup>
	    <div class="Loading-box">
	    	<loading v-model="showLoading" text="loading"></loading>
	    </div>
	    
	</div>
</template>

<script>
	import homeApi from "../models/home-model.js";
	import Swiper from '@/common/swiper';
	import { Alert, Toast,Popup,Picker,Loading } from "vux";
	import routerFooter from "../components/nav-bottom";
	export default {
		data() {
			return {
				show: false,
				defaultCity: '天河区',
				merchantNo: '', //商户编号
				districtId: '', //区id
				addressData: [],
				addressValue: [],
				bannerImgList:[], //轮播图
				promotionImgList: {}, //优惠券，
				goodsList:[],
				imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/",
				swiperOption: {//swiper3
			      	autoplay: {
			      		disableOnInteraction: false,
			      	},
			      	speed: 1000,
			      	pagination: {
            			el: '.swiper-pagination'
          			}
			    },
			    showLoading: true,
			};
		},
		components: {
			Toast,
			Popup,
			Picker,
			routerFooter,
			Loading
		},
		watch: {
			
		},
		computed: {
//	      	swiper() {
//	        	return this.$refs.mySwiper.swiper
//	      	}
	    },
		methods: {
			getName (){
				let arr = this.addressValue[2].split('&') || ''
				this.districtId = arr[0]	
				this.merchantNo = arr[2]
				this.getGoodsList()
				this.defaultCity = arr[1]
				this.show = false
				localStorage.setItem('cityName',this.addressValue)
				
			},
			change (name) {
		      	this.addressValue = name
		   	},
		   	getGoodsList (){
		   		let that = this
		   		that.showLoading = true
		   		var params = {
		   			"merchantNo": this.merchantNo,
		   			"selectedDistrictId": this.districtId
		   		}
		   	//	console.log(params)
		   		homeApi.getGoods(params).then(res => {
		   			that.showLoading = false
					if ( res.code == 0 ){
						this.bannerImgList = res.response.bannerImgList
						this.promotionImgList =  res.response.promotionImgList[0] || {};
						let goodsList = res.response.goodsList
						let arr = [];
						for(let i=0;i<goodsList.length;i++){
							goodsList[i].categoryNo&&goodsList[i].isRelease==1?arr.push(goodsList[i].categoryNo):"";
						}
						let set =new Set(arr);
						let list=Array.from(set);
						let lastList=[];
						for(let i=0;i<list.length;i++){
							lastList.push({
								type:list[i],
								list:[],
								
							})
							for(let x=0;x<goodsList.length;x++){
								if(lastList[i].type==goodsList[x].categoryNo&&goodsList[x].isRelease==1){
									lastList[i].list.push(goodsList[x]);
								}
							}
						}
						this.goodsList = lastList.slice();
						
					} else {
						this.$vux.toast.text(res.msg,"middle");
					}
				});
		   	},
		   	getAddress (){
		   		homeApi.getAddress().then(res => {
		   			if ( res.code == 0 ){
		   				this.addressData = res.data
		   			} else {
						this.$vux.toast.text(res.msg,"middle");
					}
				});
		   	},
		   	toJSON (data){
		   		if (data){
		   			return JSON.parse(data)[0].labelText
		   		}else {
		   			return ;
		   		}
		   	},
		   	//获取默认地址信息
		   	getdefaultAddress (){
		   		homeApi.getdefaultAddress().then(res => {
		   			console.log('默认地址信息',res)
		   			if ( res.code == 0 ){
		   				if ( !res.data ){
		   					this.show = true
		   					this.merchantNo = 2
		   				} else {
		   					this.defaultCity = res.data.districtName || ''
		   					this.districtId = res.data.districtId || ''
		   					this.merchantNo = res.data.merchantNo || 2
		   					this.addressValue = []
		   					this.addressValue.push(res.data.provinceId)
		   					this.addressValue.push(res.data.cityId)
		   					this.addressValue.push(res.data.districtId)
		   				}
		   			} else {
		   				this.$vux.toast.text(res.msg,"middle");
		   			}
		   			console.log(this.merchantNo)
		   			this.getGoodsList()
				});
				
		   	},
		},
		mounted() {
	        //异步加载
	      	this.getdefaultAddress()
	      	this.getAddress()
		}
	};
</script>

<style>
.home {
	background:rgba(255,255,255,1);
}
.home .page-top {
	background:rgba(255,255,255,1);
	display: flex;
	align-items: center;
	justify-content: space-around;
	z-index: 1000;
}
.home .page-top i {
	font-style: normal;
	display: flex;
	align-items: center;
}
.home .page-top .position {
	font-size:0.26rem;
	font-weight:500;
	color:rgba(153,153,153,1);
}
.home .page-top .position img {
	width:0.2rem;
	height:0.25rem;
	margin-right: 0.07rem;
}
.home .page-top .logo img {
	width:1.77rem;
	height:0.3rem;
}
.home .page-top .text {
	height:0.28rem;
	font-size:0.28rem;
	font-weight:400;
	color:rgba(36,158,108,1);
}
.home .page-top .text a {
	position: relative;
	color:rgba(36,158,108,1);
}
.home .page-content {
	background:rgba(255,255,255,1);
	padding-bottom: 1rem;
	-webkit-overflow-scrolling : touch;
}
.home .page-content .banner {
	max-height: 3rem;
	position: relative;
	-webkit-overflow-scrolling: touch;
}
.home .page-content .banner > div {
	max-height: 3rem;
	-webkit-overflow-scrolling: touch;
}
.home .page-content .banner a {
	display: block;
}
.home .page-content .banner div img {
	width: 100%;
	height: 3rem;
	display: block;
	margin: auto;
}
.swiper-img {
	width: 100%;
	height: 3rem;
	background-size: 100% 100%;
}
.home .page-content .coupon {
	margin-top: 0.05rem;
	margin-bottom: 0.05rem;
}
.home .page-content .coupon img {
	width:6.8rem;
	display: block;
	margin: auto;
}
.home .page-content .new-card {
	/*padding-bottom: 0.5rem;*/
}
.home .page-content .new-card .new-card-top {
	padding: 0rem 0 0.3rem;
}
.home .page-content .new-card .new-card-top img {
	width:7.1rem;
	display: block;
	margin: auto;
}
.home .page-content .new-card .card-list li {
	width:7rem;
	height:2.5rem;
	border:1px solid rgba(238,238,238,1);
	box-sizing: border-box;
	padding: 0.2rem;
	margin: auto;
	margin-bottom: 0.3rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.home .page-content .new-card .card-list li .left {
	width: 2rem;
	height: 2rem;
}
.home .page-content .new-card .card-list li .left img {
	width: 2rem;
	height: 2rem;
	display: block;
}
.home .page-content .new-card .card-list li .right {
	width: 4.3rem;
	height: 2rem;
	position: relative;
}
.home .page-content .new-card .card-list li .right h3 {
	font-size:0.32rem;
	font-weight:400;
	color:rgba(51,51,51,1);	
	margin-bottom: 0.1rem;
}
.home .page-content .new-card .card-list li .right .text {
	font-size:0.24rem;
	font-weight:400;
	color:rgba(153,153,153,1);
	margin-bottom: 0.1rem;
}
.home .page-content .new-card .card-list li .right .card-name {
	height: 0.3rem;
	font-size:0.2rem;
	font-style: normal;
	font-weight:400;
	color:rgba(244,163,83,1);
}
.home .page-content .new-card .card-list li .right .card-name i {
	font-style: normal;
	background:rgba(255,242,229,1);
	padding: 1px 3px;
}
.home .page-content .new-card .card-list li .right .btn {
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.home .page-content .new-card .card-list li .right .btn-box {
	width: 4.3rem;
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 0;
}
.home .page-content .new-card .card-list li .right .btn-box span {
	font-size: 0.22rem;
	font-weight:400;
	color:rgba(153,153,153,1);
	margin-right: auto;
}
.home .page-content .new-card .card-list li .right .btn-box span em {
	font-size:0.38rem;
	font-weight:600;
	font-style: normal;
	color:rgba(51,51,51,1);
}
.home .page-content .new-card .card-list li .right .btn-box a {
	width:1.7rem;
	height:0.56rem;
	border-radius:0rem;
	background-color: #2BB079;
	border: none;
	color: #fff;
	border-radius: 2px;
	font-size: 0.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.home .page-bottom {
	width: 100%;
	height: 1rem;
	position: fixed;
	bottom: 0;
	background:rgba(255,255,255,1);
}
.picke-address .status-btn {
	display: flex;
	height: 0.8rem;
	align-items: center;
	justify-content: space-between;
	font-size: 0.3rem;
}
.picke-address .status-btn a {
	padding: 0.3rem;
	color: #888;
}
.picke-address .status-btn a.complete-btn {
	color: #1aad19;
}
.swiper-pagination {
	width: 100%;
	height: 0.3rem;
	bottom: 0.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.swiper-pagination span {
	width: 0.2rem;
	height: 0.2rem;
	margin: 0 0.1rem;
}
.swiper-pagination-bullet-active {
	background: #5a5a5a;
}
.Loading-box .weui-toast {
	width: 100%;
	min-height: 100% !important;
	overflow: hidden;
	top: 0;
}
.Loading-box .weui-icon_toast.weui-loading {
	margin-top: 75%;
}
</style>