<template>
	<view id="product">
		<u-navbar :is-back="true"  title="产品列表" title-color="#ffffff" :background="{ background: '#1B85E9' }">
			<view class="slot-wrap">
				<view class="iconfont icon-shaixuan"  @click="goUrl(1)"></view>
			</view>
		</u-navbar>
		<view class="search-box">
			<u-search placeholder="关键搜索" bg-color="#ffffff" search-icon-color="#DCDCDC" :action-style="{color:'#333333'}" v-model="searchValue" @search="searchClick" @custom="searchClick"></u-search>
		</view>
		<scroll-view  class="scroll-box" scroll-y  @scrolltolower="reachBottom">
			<view class="product-list">
				<view class="product-item" v-for="(item,index) in productList" :key="item.prodId"  @click="goUrl(2,index)">
					<view class="product-txt">
						<view class="product-name">{{item.prodName}}</view>
						<view class="product-info">{{item.prodNodeType}}</view>
					</view>
					<view class="">
						<u-icon name="arrow-right" color="#959595" size="23"></u-icon>
					</view>
				</view>
				<u-empty :show="emptyShow" text="没有找到数据" :font-size="40" :icon-size="300" :margin-top="100" mode="list"></u-empty>
				<u-loadmore class="loadmore-box" v-if="!emptyShow" :status="loadStatus" />
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productList:[],
				// 加载状态
				loadStatus:'loadmore',//加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore:false,  //是否加载中
				emptyShow:false, //是否显示数据为空
				pageNum:1,
				pageSize:15,
				orderByColumn:'createTime',
				isAsc:'desc',
				searchValue:'',
			}
		},
		onLoad(option) {
			this.getProductList();
		},
		onShow() {
			
		},
		methods:{
			// 获取产品列表
			getProductList(){
				let opt = {
					url: '/prod-api/iot/product/list',
					method: "GET",
				}
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					orderByColumn: this.orderByColumn,
					isAsc: this.isAsc,
					searchValue: this.searchValue
				}
				this.$request.TokenRequest(opt,params).then(res => {
					console.log("getProductList",res);
					if(res.code==200){
						if(res.rows){
							this.productList.push(...res.rows);
							// 判断当前是否显示空
							if(!this.productList.length){
								this.emptyShow = true;
							}else{
								this.emptyShow = false;
							}
							// 判断当前是否为最后一页
							if(res.rows.length<this.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
								  this.isLoadMore=true                                             
								  this.loadStatus='nomore'
							}else{
								  this.isLoadMore=false
								  this.loadStatus='loadmore'
							}
						}else{
							this.isLoadMore=true
							this.loadStatus='nomore'
						}
						
					}else{
						this.$u.toast(res.msg);
						this.isLoadMore=false
						if(this.pageNum>1){
							this.pageNum=1
						}
					}
					
				}, error => {
					this.$u.toast('服务器开小差了呢，请您稍后再试')
					this.isLoadMore=false
					if(this.pageNum>1){
						this.pageNum=1
					}
				})
			},
			goUrl(type,index){
				if(type == 1){
					uni.navigateTo({
						url:'../product/filter'
					})
				}else if(type == 2){
					uni.navigateTo({
						url:'../product/detail?prodId='+this.productList[index].prodId
					})
				}
				
			},
			// 上拉加载更多
			reachBottom() {
				console.log("这里上拉加载更多")
				if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
					this.loadStatus = 'loading';
					this.isLoadMore=true
					this.pageNum+=1
					this.getProductList()
			  }
			},
			// 点击搜索
			searchClick(){
				console.log('点击搜索')
				this.productList = [];
				this.pageNum = 1;
				this.getProductList();
			}
		}
	}
</script>

<style scoped lang="less">
	#product{
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.scroll-box{
		height: calc(100% - var(--status-bar-height) - 96rpx - 44px);
		/* #ifdef APP-PLUS */
		height: calc(100% - var(--status-bar-height) - 96rpx - 48px);
		/* #endif */
		// box-sizing: border-box;
	}
	// 筛选搜索图标
	.slot-wrap{
		display: flex;
		align-items: center;
		padding-left: 31rpx;
		.iconfont{
			font-size: 49rpx;
			color: #fff;
		}
	}
	.search-box{
		height: 96rpx;
		background: #EBEEF5;
		padding: 18rpx 56rpx 20rpx 72rpx;
	}
	.product-list{
		padding: 10rpx 24rpx;
		.product-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 115rpx;
			border-bottom: 1px solid #F2F2F2;
			.product-txt{
				font-size: 28rpx;
				color: #444444;
				line-height: 28rpx;
				text-indent: 2rpx;
			}
			.product-info{
				margin-top: 17rpx;
				font-size: 24rpx;
				color: #444444;
				line-height: 24rpx;
				text-indent: 4rpx;
			}
		}
	}
	// 加载更多
	.loadmore-box{
		padding:10rpx 0 40rpx;
	}
</style>
