<template>
	<view class="page">
		<navbar-line :bgColor="bgColor" :hasPlacer="false">
			<view class="header-loc  align-center" >
				<image src="/static/mang-loc.png" class="image_19" mode="aspectFill"  />
				<text class="text_43 clamp" v-if="addrInfo.address" @tap="golocAddr">
				    {{addrInfo.address}}
				</text>
				<text class="text_43 clamp" v-else @tap="golocAddr">
					请选择您的位置
				</text>
			</view>
		</navbar-line>
		<!-- /static/mang-bg.png -->
		<view class="p-header"><image :src="banner" mode="aspectFill" class="img"></image></view>
		<view class="align-center p-ads" v-if="ads.length>0">
			<image src="/static/mang-sear.png" class="image_20" mode="aspectFill" @tap="navTo('/pages/mang/search')" />

			<view class="group_20">
				<zetank-notice :noticeList="ads" :interval="3000"/>
			</view>
		</view>
		<view class="p-entry">
			<view class="flex-col items-center grid-item" 
			  v-for="(item,i) in cats" :key="i" @tap="navTo('/pages/mang/list',{id:item.id,name:item.cate_name})"
			>
				<image
					:src="item.cate_logo"
					class="image"
					mode="aspectFill"
				/>
				<text class="text">{{item.cate_name}}</text>
			</view>
		</view>
	
	    <view class="p-tabs align-center justify-between">
			  <view class="flex-col text-wrapper" :class="{active: i === tabCurrentIndex}" 
			   v-for="(item,i) in tabs" :key="i"  @tap="tapTab(i)"
			  >
				   <image
					  src="/static/mang-tabbg.png"
					  class="image_8"
				   />
				  <text class="text_9">{{item.name}}</text>
			  </view>
		</view>
		
		<view class="p-list">
            <proItem :info="item" v-for="(item,i) in tabs[tabCurrentIndex].list" :key="i" />
			<empty v-if="tabs[tabCurrentIndex].list.length == 0 && tabs[tabCurrentIndex].loaded "/>
		</view>
	</view>
</template>

<script>
import navbarLine from '@/components/navbar-line.vue';
import zetankNotice from './components/zetank-notice.vue';
import proItem from './components/pro-item.vue'
export default {
	components: {
		proItem,
		navbarLine,
		zetankNotice
	},
	data() {
		return {
			// defaultAddr:{},
			banner:'', // 首页图片
			ads: [],
			bgColor:'transparent',
			cats:[],
			tabCurrentIndex: 0,
			tabs:[
				{name:'智能排序',type:1,loadingType: 'more', list: [], page: 1,loaded:false},
				{name:'距离最近',type:2,loadingType: 'more', list: [], page: 1,loaded:false},
				{name:'评分最高',type:3,loadingType: 'more', list: [], page: 1,loaded:false},
			],
			pageSize: 20,
		};
	},
	onPageScroll(e) {
		let scrollTop = e.scrollTop;
		if(scrollTop > this.CustomBar - 10){
			this.bgColor = "#ffffff";
		}else{
			this.bgColor = "transparent";
		}
	},
	// onLoad() {
		//app.vue已调用
	// 	this.getDefaultAddr();
	// },
	onShow() {
		this.getList('refresh')
		this.getCats();
		this.getAds();
		this.getBanner();
	},
	// onPullDownRefresh() {
	// 	this.getList('refresh')
	// 	this.getCats();
	// 	this.getAds();
	// 	this.getBanner();
	// 	this.getDefaultAddr();
	// },
	onReachBottom() {
		this.getList()
	},
	methods:{
		// async getDefaultAddr(){
		// 	this.$store.dispatch('userInfo/getDefaultAddr');
		// },
		async getBanner(){
			let res = await this.$request('goods.banner');
			this.banner = res.data.image;
		},
		async getAds(){
			let res = await this.$request('goods.energy');
			let data = res.data
			this.ads= data ? [data] : [];
		},
		async getCats(){
			let res = await this.$request('goods.catelist')
			let cats =res.data || [];
			this.cats = cats.slice(0,7);
			this.cats.push({cate_logo:'/static/mang-all.png',cate_name:'全部',id:0})
		},
		async getList(source){
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.tabs[index];
			if (source === 'refresh') {
				if(navItem.loadingType == 'loading'){
					return;
				}
				navItem.loadingType = 'more';
				navItem.page=1;
				navItem.list=[];
				navItem.loaded=false;
			}
			if (navItem.loadingType === 'loading' || navItem.loadingType == 'noMore') {
				//防止重复加载
				return;
			}
			navItem.loadingType = 'loading';
			let res = await this.$request('goods.list',{
				sort_type:navItem.type,
				page: navItem.page,
				limit: this.pageSize,
				lng: this.addrInfo.address ? this.addrInfo.address_lng : '',
				lat: this.addrInfo.address ? this.addrInfo.address_lat : '',
			});
			uni.stopPullDownRefresh();
			let result = res.data.row || [];
			if ( this.pageSize > result.length) {
				navItem.loadingType = 'noMore';
			} else {
				navItem.loadingType = 'more';
			}
			// 页数加一
			navItem.page++;
			navItem.loaded = true;
			if(source === 'refresh'){
				navItem.page=2;
				navItem.list = result;
				return;
			}
			result.forEach(item => {
				navItem.list.push(item);
			});
		},
		async golocAddr(){
			//有地址进入地址列表选择，无新增
			// let res = await this.$request('addr.list')
			// let list = res.data || [];
			// if(list.length > 0){
				
			// }
			this.navTo('/pages/address/address',{sourcePage:'mang'},{isCheckLogin:true})
		},
		
		async tapTab(idx){
			if(idx === this.tabCurrentIndex){
				return;
			}
			
			if(idx === 1 && !this.addrInfo.address){
				let [mErr,mRes] = await uni.showModal({title:'请选择您的地址'})
				if(mRes.cancel){
					return ;
				}
				this.golocAddr();
				return;
			}
			this.tabCurrentIndex = idx;
			this.getList('refresh');
		},
		// tapCat(item){
		// 	this.navTo('/pages/mang/list',{goods_cate:item.name})
		// }
	}
};
</script>

<style lang="scss">
page {
	background-color: #F7FEFA;
}
.header-loc {
	position: absolute;
	width: 100%;
	padding: 0 30rpx;
	top: 50%;
	transform: translateY(-50%);
	.image_19 {
		width: 26rpx;
		height: 28rpx;
	}
	.text_43 {
		margin-left: 12rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: PingFang;
		letter-spacing: 1.12rpx;
		max-width: 400rpx;
	}
}
.p-header {
	.img {
		width: 750rpx;
		height: 532rpx;
	}
}
.p-ads {
	margin: -32rpx auto 0;
	width: 690rpx;
	height: 72rpx;
	padding: 0 22rpx;
	background-image: url('/static/mang-ads.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	position: relative;
	z-index: 2;
	.image_20 {
		width: 35rpx;
		height: 35rpx;
	}
	.group_20 {
		width: 100%;
	}
}
.p-entry {
	width: 690rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(42,42,42,0.08);
	
	margin: 30rpx auto 0;
	padding: 9.5rpx 12rpx 20.5rpx;
	background-color: #ffffff;
	box-shadow: 0px 6rpx 10rpx #2a2a2a14;
	border-radius: 20rpx;
	height: 350rpx;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	.grid-item {
		padding: 17rpx 4rpx;
	}
	.image {
		width: 96rpx;
		height: 96rpx;
	}
	.text {
		margin-top: 7rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: PingFang;
		line-height: 23rpx;
		letter-spacing: 1.44rpx;
	}
}
.p-tabs{
	margin-left: 30rpx;
	width: 530rpx;
	.text-wrapper {
		height: 85rpx;
		position: relative;
		&.active{
			.image_8{
				display: block;
			}
			.text_9{
			  color: #333333;
			}
		}
	  .image_8{
		  width: 36rpx;
		  height: 36rpx;
		  display: none;
		  position: absolute;
		  z-index: 2;
		  right: -14rpx;
		  top:40%;
		  transform: translateY(-50%);
	  }
		.text_9 {
		  color: #999999;
		  font-size: 30rpx;
		  font-family: PingFang;
		  letter-spacing: 1.2rpx;
		  line-height: 85rpx;
		}	  
	}

}
.p-list{
}
</style>
