<template>
	<view class="i-page">
		<view class='i-header' v-show='isFixed!=true'>
			多典花
		</view>
		<view class='i-boxs'>
			<view class='i-banner'>
				<!-- :indicator-dots="true" -->
				<swiper  :autoplay="true" :interval="3000" :duration="1000" style="height: 359rpx;">
					<swiper-item class='swiper-item-i' v-for="item in bannerList" :key="item.id"
						                       @click='bannerItem(item)'>
						<image :src='item.url' class='banner-item'></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="i-list">
				<view class='mian-item' v-for="item in list" :key="item.id" @click="goItem(item)">
					<image class='item-img' :src='item.url'></image>
					<view class='item-text'>{{item.name}}</view>
				</view>
			</view>
			<view class="i-malll">
				<view v-if='isFixed!=true' class="hot-tab">
					<view :class="hotIndex==item.id ?'hot-header-text':'hot-show'"   v-for="item in hotList" :key='item.id' >
						<view class='hot-ative' @click="hotShow(item)">{{item.title}}</view>
						<view v-show="hotIndex!=item.id" class='hot-icon'></view>
						<view v-show='hotIndex==item.id' :class="showUP==false ?'hot-icon-show-down':'hot-icon-show'" @click="goUP(item.id)"></view>
					</view>
				</view>
				<view v-else class="hot-fixed-show">
					<view class="hot-text">多典花</view>
					<view  class="hot-tab-fixed">
						<view :class="hotIndex==item.id ?'hot-header-text':'hot-show'"  v-for="item in hotList" :key='item.id'>
							<view class='hot-ative' @click="hotShow(item)">{{item.title}}</view>
							<view v-show="hotIndex!=item.id" class='hot-icon'></view>
							<view v-show='hotIndex==item.id' :class="showUP==false ?'hot-icon-show-down':'hot-icon-show'" @click="goUP(item.id)"></view>
						</view>
					</view>
				</view>
				<scroll-view
					class='box-at-home'
					scroll-y="true" 
					refresher-default-style="none"
					@scrolltoupper="toupperTop"
					@scrolltolower="lowerMore">
						<view class='main-box' v-show="IndexList && IndexList.length>0">
							<view class='box-item' v-for="item in IndexList" :key="item.id" @click="goDetail(item)">
								<view class='item-top'>
									<image :src="item.goodsImage" class='top-img'></image>
									<i class='top-icon'></i>
								</view>
								<view class='item-footer'>
									<view class='footer-des'>{{item.goodsName}}</view>
										<view class='footer-box'>
											<view class='box-num'>
												<view class='num-icon'>¥</view>
													{{item.goodsMoney}}
											</view>
										</view>
									<view class='footer-line'>
										<view class='box-btn'>可置换</view>
										<view class="box-last">{{item.lookSum}}次浏览</view>
									</view>
								</view>
							</view>
						</view>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				hotList:[
					{title:'浏览量',id:0},
					{title:'价格',id:1},
				],
				hotIndex:0,
				isFixed: false,
				showUP:false,
				headerHeight: 0,
				scrollTop:0,
				IndexList:[],
				bannerList:[],
				pageNum: 1,
				pageSize: 50,
				total: 0,
				hasNextText:'上拉加载更多',
				loadFlag:true,
				hasNextPage:false,
				sort:'look_sum desc',
				token:''
			}
		},
		onPageScroll(e) {
		    // 页面滚动时设置isFixed和scrollTop
			console.log(e.scrollTop,'876')
		    this.scrollTop = e.scrollTop;
			if( e.scrollTop > 220){
				this.isFixed = true;
			}else{
				this.isFixed = false;
			}
		},
		onReady() {
			const isAgree = uni.getStorageSync('m-agreement')
			if (!isAgree) {
				this.Go('uni:/pages/agreement/index')
			}
		},
		onLoad() {
			const token=uni.getStorageSync('token')
			this.token=token
			// 获取头部的高度
			// const query = uni.createSelectorQuery().in(this);
			//     query.select('.i-header').boundingClientRect(data => {
			// 		console.log(data.height,'98767')
			//       this.headerHeight = data.height;
			// }).exec();
			this.init()
			this.searchGood()
		},
		methods:{
			init(){
				const self=this
				self.$request('/pawn/index','GET').then(res => {
					const {goodList,shortcutList,bannerList }=res.result
					if(shortcutList){
						self.list=JSON.parse(shortcutList)
					}
					if(bannerList){
						self.bannerList=JSON.parse(bannerList)
					}
				}).catch(err=>{
				  console.log(err,'请求出错')
				})
			},
			goDetail(item){
				// console.log(item,'8766')
				const params={
					goodId:item.id
				}
				uni.navigateTo({
					url:'/pages/productDetails/productDetails?mydata='+encodeURIComponent(JSON.stringify(params))
				})
				
			},
			hotShow(item){
				console.log(item.id,'7766')
				this.hotIndex=item.id
				
				if(item.id==0){
					this.sort='look_sum desc'
					this.showUP=!this.showUP
				}else{
					this.sort='goods_money desc'
					this.showUP=!this.showUP
				}
				this.pageNum=1
				this.searchGood()
			},
			bannerItem(item){
				if(this.token==''){
					this.Go('uni:/pages/login/login')
				}else{
				
					const { tager }=item
					this.Go(tager)
				}
				
			},
			goItem(item){
				if(this.token==''){
					this.Go('uni:/pages/login/login')
				}else{
					const { tager }=item
					this.Go(tager)
				}
			},
			goUP(val){
				console.log(val,'val33')
				this.showUP=!this.showUP
				if(val==0){
					//浏览量
					if(this.showUP==false){
						
						this.sort='look_sum desc'
					}else{
						
						this.sort='look_sum asc'
					}
					
				}else{
					//价格
					if(this.showUP==false){
						
						this.sort='goods_money desc'
					}else{
						
						//倒序
						this.sort='goods_money asc'
					}
				}
				this.pageNum=1
				this.searchGood()
			},
			// 查询商品
			searchGood(){
				const self=this
				const { sort,pageSize,pageNum}=self
				const params={
					 
					  "current":pageNum,
					  "size":pageSize,
					  "sort":sort
				}
				console.log(params,'查询商品')
				self.$request('/pawn/category/getGoodsPage','POST',params).then(res => {
					
					const {current,total,size,records }=res.result
					const hasNextPage=total-self.pageSize*self.pageNum>0?true:false //是否有下一页
					if(self.loadFlag){
						
						self.IndexList=self.IndexList.concat(records)
					}else{
						
						self.IndexList=records
					}
					self.hasNextPage=hasNextPage
					self.loadFlag=false
				
					
				}).catch(err=>{
				  console.log(err,'请求出错')
				})
			},
			toupperTop:function(e){
				console.log(e,'到顶了');
			},
			lowerMore:function(e){
				console.log(e,'触底了');
				if(!this.hasNextPage){
					uni.showToast({
						icon: 'none',
						title: '到底了',
					})
					return false;
				} 
				if(this.loadFlag) return;
				this.loadFlag=true,
				this.pageNum=this.pageNum+1
				this.searchGood();
			},
		},
		onShow() {
			const token=uni.getStorageSync('token')
			this.token=token
			this.init()
			this.searchGood()
		}
	}
</script>

<style src='./index.less' lang="less" scoped></style>