<template>
	<view class="container">
	
			<view class="bg"></view>
			
			<u-loading-page :loading="loading"></u-loading-page>
			
				<view class="menutop">
					<view class="search">
						<uni-search-bar placeholder="搜索关键字" :radius="36" bgColor="#FFF" class="search" @confirm="search"  v-model="searchValue" @blur="blur" @focus="focus" @input="input"
							@cancel="cancel" @clear="clear"   clearButton="auto" cancelButton="none" >
						</uni-search-bar>
					</view>
				</view>
				
				<u-tabs @click="getmenu"
					:list="tabBars"
					lineWidth="20"
					lineHeight="5"
					:lineColor="`url(${lineBg}) center`"
					:activeStyle="{
						color: '#111111',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
						color: '#666666',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 32px;padding-bottom:3px"
					>
				</u-tabs>
				
				<scroll-view @touchstart="scrollViewTouchStart" @touchend="scrollViewTouchEnd" id="scrollList"  lower-threshold="50" @scrolltolower="scrolltolower" scroll-y="true" style="margin-top:15px;">
				   <view>
					<u-list>
						<u-list-item
							v-for="(item, index) in indexList"
							:key="index">
							<view class="cell_item" @click="$u.func.route('/pages/detail/index?id='+item.id)">
								 <u-row justify="space-between" customStyle="margin-bottom: 10px">
										<u-col :span="8">
											<view class="smtitle">{{item.fbdw}}发布</view>
										</u-col>
										<u-col :offset="1" :span="3" style="text-align: right;">
											<text class="classify" v-if="item.xclx=='1'" :class="{'classify1':item.xclx=='1'}">{{item.xclxmc}}</text>
											<text class="classify" v-if="item.xclx=='2'" :class="{'classify2':item.xclx=='2'}">{{item.xclxmc}}</text>
											<text class="classify" v-if="item.xclx=='3'" :class="{'classify3':item.xclx=='3'}">{{item.xclxmc}}</text>
										</u-col>
								</u-row>
								
								<u-row>
									<view class="bigtitle">{{item.xcbt}}</view>
								</u-row>
								
								<u-row class="imagebox" justify="space-between" customStyle="margin-bottom: 10px">
										<u-col  v-for="items in item.file" v-if="item.file&&item.file.length>=2&&item.file.length!=0" span="4">
											<image class="image" :src="items"  mode="widthFix" style="width: 96%;border-radius: 5px;"></image>
										</u-col>
										
										<u-col v-for="items in item.file" v-else span="12">
											<image class="image" :src="items"  mode="widthFix" style="width: 100%;border-radius: 5px;"></image>
										</u-col>
										
										
										<!--<u-col v-for="items in item.file" v-else-if="item.file&&item.file.length==0&&item.video" span="12">
											<image class="image" :src="items"  mode="widthFix" style="width: 100%;border-radius: 5px;"></image>
											<video  class="xwlogo" :src='item.video'
											    @error="videoErrorCallback"
											    controls
											></video>
										</u-col>
										-->
								</u-row>
								
								<u-row>
									<view class="otther">
										完成阅读获 <text style="color: #FF1D1D;">{{item.count}}</text> 积分 · {{item.jf}}浏览
									</view>
								</u-row>
							</view>
						
						</u-list-item>
						<u-list-item v-if="indexList.length>0">
							<u-loadmore :status="status" />
						</u-list-item>
					</u-list>
				</view>	
				</scroll-view>
				
				
	</view>
</template>

<script>
	import details from '../detail/index.vue'
	import { getjwtdFfxc,getDictList} from '@/api/ffxc.js'
	export default {
		components:{details},
		data() {
			return {
				loading:true,
				scrollTop: 0,
				clientHeight:0,
				searchValue:'',
				size: 0, //滚动区域内容长度
				isLoad: false, //标记是否已经加载
				showMore:true,
				status: 'loadmore',
				isShow:false,
				lineBg:require('../../static/nav/nav_line2.png'),
				keyword:'',
				tabBars:  [{'id':'','name':'推荐'}],
				indexList: [],
				 hasMore: true,
				xclx:'',
				pages:{
					size: 10,
					total: 0,
					current:1,
				},
				startTouch:{},
				urls: [
				]
			}
		},
		onPullDownRefresh() {
		    this.pages.current =1
			this.indexList=[]
		    this.getList()
			uni.stopPullDownRefresh(); // 停止下拉刷新
		  },	
		onReachBottom() {
		
		},
		
		onLoad() {
			uni.showLoading({
				title: '加载中'
			});
			getDictList().then(res=>{
				res.data.ffxclx.forEach((v,k)=>{
					this.tabBars.push({id:v.value,name:v.label})
				})
			}).finally(()=>{
					uni.hideLoading()
				})
			this.getList()	
			this.getClientHeight()
		},
		onShareAppMessage(res) { //发送给朋友
				return {
					title: '警地融合小程序',
					path:'/pages/index/index',
					imageUrl: '',
				}
			},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: '警地融合小程序',
				imageUrl: '',
			}
		},
		methods: {	
			scrolltolower(event) {
				// 已经滚动到底部
				this.status = 'loading';
				this.getList()
				},
				scrollViewTouchStart(event){
					this.size = this.indexList.length
					this.isLoad = false
					this.startTouch = event.touches[0]
				},
				scrollViewTouchEnd(event){
					 // 获取第一个触点
					  const touch = event.changedTouches[0];
					  // 计算滑动距离
					  //const distanceX = touch.clientX - this.startTouch.clientX;
					  const distanceY = this.startTouch.clientY - touch.clientY ;
					  
					  // 输出或处理距离
					  //console.log(`滑动距离: Y=${distanceY}`);
					if(!this.isLoad&&this.indexList.length===this.size&&this.status!='nomore'&&distanceY>150){
						this.isLoad = true
						this.getList()
					}
				},
			getClientHeight() {
			      const query = uni.createSelectorQuery().in(this);
			      query.select('.container').boundingClientRect(data => {
			        if (data) {
			          const clientHeight = data.height;
			         this.clientHeight = clientHeight  -200
			        }
			      }).exec();
			    },	
			getmenu(item){
				this.xclx = item.id
				this.pages.current = 1
				this.indexList=[]
				this.status = "loadmore";
				this.getList()
			},
			getList(){
				uni.showLoading({
					title: '加载中'
				});
				getjwtdFfxc(this.xclx,'',this.pages.current).then(res=>{
					this.pages.current++
					if (res.data.records.length < 10) {
						this.hasMore = false; // 数据已全部加载完毕
						this.status = "nomore";
					}
					this.indexList = [...this.indexList, ...res.data.records];
					uni.hideLoading()
					this.loading = false
				}).finally(()=>{
					uni.hideLoading()	
				})
			},
			goPage(url){
				uni.navigateTo({
					url:url
				})
			},
			search(res) {
			   //pages/detail/searchResult
			   uni.navigateTo({
			   	url:'/pages/detail/searchResult?key='+res.value
			   })
			},
			input(res) {
				
			},
			clear(res) {
				this.searchValue = ''
			
			},
			blur(res) {
				
			},
			focus(e) {
				
			},
			cancel(res) {
				
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-tabs__wrapper__nav__line{
		bottom: 0;
	}
	#scrollList{
		height: calc(100vh - 150px);
	}
	/deep/ .uni-searchbar__box{
		background: #FFFFFF;
		border-radius: 36rpx;
		opacity: 0.7;
	}
	/deep/ .uni-searchbar{
		
	}
	/deep/ .u-tabs{
		
	}
	.container{
		padding:0 24rpx;box-sizing: border-box;
		margin: auto;
		background: #F8F8F8;
		overflow-y: hidden;
		height: 100vh;
		.bg{
			position: absolute;
			background: url('data:image/png;base64,[encoded data, 61464 characters]') 0 0 no-repeat;
			width: 100%;
			background-size: 100%;
			height: calc((100vw / 375) * 480);
			left:0;
			top: 0;
			z-index: 0;
		}
		.cell_item{
			width: 100%;
			margin: auto;
			padding: 24rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-bottom: 15px;
			.smtitle{
				font-weight: 400;
				font-size: 24rpx;
				color: #111111;
				line-height: 32rpx;
				white-space: nowrap; /* 确保文本在一行内显示 */
				  overflow: hidden; /* 隐藏溢出的内容 */
				  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
			}
			.bigtitle{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #111111;
				line-height: 44rpx;
				text-align: justify;
				font-style: normal;
				padding-bottom: 8px;
			}
			.classify{
				font-weight: 500;
				font-size: 24rpx;
				line-height: 42rpx;
				text-align: right;
				font-style: normal;
				border-radius: 8rpx;
				text-align: center;
				padding: 2px 5px;
				position: relative;
				top: -3px;
				float: right;
			}
			.classify1{
				color: #00A870;
				background: #D7F5EB;
			}
			.classify2{
				color: #ED7B2F;
				background: #FEECDF;
			}
			.classify3{
				color: #E34D59;
				background: #FEE4E7;
			}
			.otther{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 30rpx;
				text-align: left;
				font-style: normal;
				margin-top:0px;
			}
			
			
		}
	}
	.imagebox{
		box-sizing: border-box;
		.image{
			width: 96%;
			border-radius: 5px;
		}
	}
	.menutop{
		width: 100%;
		margin: auto;
		padding-bottom:10px;
		padding-top:25px;
		.search{
			text-align: left;width: 70%;
		}
	}
	.content {
		width: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
