<template>
	<view class="farmService">
		<!-- 幻灯 -->
		<view class="swiper">
			<u-swiper :list="swiperList" showTitle keyName="imgUrl" height="160" :circular="true"  @change="e => current = e.current" @click="openDetail">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot"  v-for="(item, index) in swiperList" :key="index"  
					:class="[index === current  && 'indicator__dot--active']"></view>
				</view>
			</u-swiper>
		</view>
		
		<!-- 分类 -->
		<u-sticky offset-top="0" v-if="total>0">
			<u-tabs class="background-color-fff" :current="currentIndex" :list="categoryList" @click="changeTab" lineColor="#2b7" :activeStyle="{'color':'#2b7'}"></u-tabs>
		</u-sticky>
		
		<!-- 新闻列表 -->
		
		<view v-if="total>0" class="news">
			<view class="newsItem"  v-for="item in newsList" :key="item.newsId" @click="openDetail(1,item.newsId)">
				<view class="left">
					<image class="img" :src="item.imgUrl">
					</image>
					<view class="top" v-if="item.isTop">
						置顶
					</view>
				</view>
				<view class="right">
					<view class="title">
						<u--text :lines="1" size="16" :text="item.title"></u--text>
					</view>
					<view class="remark">
						<u--text color="#9e9e9e" :lines="2" :size="13" :text="item.remark"></u--text>
					</view>
					<view class="time">
						<view class="author">
							{{item.author}}
						</view>
						<view class="createTime">
							{{item.createTime.split(" ")[0]}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 无数据控件 -->
		<u-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"/>
		<u-loadmore :status="status" v-if="total>10"/>
	</view>
</template>

<script>
import image from '../../uni_modules/uview-ui/libs/config/props/image'
import loadmore from '../../uni_modules/uview-ui/libs/config/props/loadmore'
	export default {
		data() {
			return {
				//baseID
				baseId:null,
				//轮播list
				swiperList:[],
				//当前幻灯值
				current:0,
				//分类list
				categoryList:[],
				//新闻列表
				newsList:[],
				//数据总条数
				total:0,
				//上拉刷新状态
				status:'loadmore',
				//查询条件
				query:{
					pageNum: 1,
					pageSize: 10,
					isBanner: 0,
					categoryName:null,
					status: 1,
					baseId:null
				},
				//当前tab值
				currentIndex:0
			}
		},
		onShow() {
			this.baseId = uni.getStorageSync('baseId')
			this.query.baseId = this.baseId;
			this.getCategoryList();
			this.getSwiperList();
		},
		async onPullDownRefresh() {
			//重置pageNum
			this.query.pageNum=1
			//重置categoryName
			this.query.categoryName=this.categoryList[0].name
			//重置tab索引
			this.currentIndex=0
			//重置幻灯索引无效
			//this.current=0;
			//拉取幻灯
			this.getSwiperList();
			//拉新闻
			await this.getNewsList()
			uni.stopPullDownRefresh()
		},
		//触底生命周期
		onReachBottom(){
			this.status="loading"
			this.pullUp()
		},
		methods: {
			//获取分类列表
			async getCategoryList(){
				this.getNewsList();
				
				const {rows} = await uni.$u.http.get("/iot/newsCategory/list",{params:{baseId:this.baseId}});
				this.query.categoryName=rows[0].categoryName
				this.categoryList=rows.map(item=>{
					return {
						name:item.categoryName,
					}
				})
			},
			//获取轮播列表
			async getSwiperList(){
				const {rows} = await uni.$u.http.get("/iot/news/list",{params:{
					//轮播标记
					isBanner: 1,
					//已经发布
					status: 1,
					baseId:this.baseId
				}})
				this.swiperList=rows.map(item=>{
					return {
						imgUrl:uni.$u.http.config.baseURL+item.imgUrl,
						title:item.title.length>16?item.title.slice(0,16)+"...":item.title,
						newsId:item.newsId
					}
				})
			},
			//tab切换
			changeTab(data){
				this.query.categoryName=data.name
				this.currentIndex=data.index
				this.query.pageNum=1
				this.getNewsList()
			},
			//获取新闻列表
			async getNewsList(){
				const res = await uni.$u.http.get("/iot/news/list",{params:{...this.query}});
				this.newsList=res.rows.map(item=>({
					...item,
					imgUrl:uni.$u.http.config.baseURL+item.imgUrl
				})).sort((a, b) => {
					  if (a.isTop === 1 && b.isTop !== 1) {
						return -1; // a排在b前面
					  } else if (a.isTop !== 1 && b.isTop === 1) {
						return 1; // b排在a前面
					  } else {
						return 0; // 保持原来的顺序
					  }
					});
				this.total=res.total
			},
			//上拉刷新
			async pullUp(){
				//计算当前总页数
				let totalPages = Math.ceil(this.total/10)
				//判断当前页面是否小于总页数
				if(this.query.pageNum<totalPages){
					//页码加1
					this.query.pageNum++
					const res = await uni.$u.http.get('/iot/news/list', {
						params: {
							...this.query
						}
					})
					let data =res.rows.map(item=>{
						return {
							...item,
							imgUrl:uni.$u.http.config.baseURL+item.imgUrl
						}
					})
					//将数据合并到当前的新闻列表
					this.newsList=this.newsList.concat(data)
					//返回total
					this.total=res.total
				}else{
					this.status="nomore"
				}
			},
			//打开详情
			openDetail(index,id){
				if(id){
					uni.$u.route({
						url: 'pages/service/newsDetail',
						params: {
							id: id
						}
					})
				}else{
					uni.$u.route({
						url: 'pages/service/newsDetail',
						params: {
							id: this.swiperList[index].newsId
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.farmService{
	box-sizing: border-box;
	.swiper{
		overflow: hidden;
		position: relative;
		.indicator{
			position: absolute;
			z-index: 999;
			display: flex;
			right: -330rpx;
			top: -10rpx;
			&__dot {
				height: 8rpx;
				width: 16rpx;
				border-radius: 4rpx;
				background-color: #fff;
				margin: 0 4rpx;
				transition: background-color 0.3s;
				transition: width 0.3s;
				&--active {
					background-color: #69BB73;
					width: 40rpx;
				}
			}
		}
	}
	.news{
		.newsItem{
			height: 200rpx;
			display: flex;
			margin:20rpx 10rpx;
			background-color: #fff;
			padding:10rpx;
			.left{
				width: 225rpx;
				box-sizing: border-box;
				position:relative;
				.top{
					position: absolute;
					right: 0;
					top: 0;
					z-index: 999;
					background-color: #2b7;
					color: #fff;
					font-size: 20rpx;
					width:60rpx;
					height:40rpx;
					text-align: center;
					line-height: 40rpx;
					font-weight: bold;
					border-top-right-radius: 10rpx;
				}
				.img{
					width: 225rpx;
					height: 100%;
					overflow: hidden;
					border-radius: 10rpx;
				}
			}
			.right{
				width: 525rpx;
				height: 100%;
				padding: 10rpx;
				box-sizing: border-box;
				.title{
					height: calc(100% - 130rpx);
					font-weight: 600;
				}
				.remark{
					height: 80rpx;
				}
				.time{
					display: flex;
					justify-content: space-between;
					height: 50rpx;
					line-height: 50rpx;
					color: #818486;
					font-size: 28rpx;
				}
			}
		}
	}
}
</style>
