<template>
	<view class="wanl-list youquan">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{height:height + 'px' }">
			<view class="cu-bar bg-bgcolor fixed" :style="{ height: height + 'px', paddingTop: top + 'px'}">
				<!-- 1.1.9 升级 其他页面进入 -->
				<view v-if="pagesNum > 1" class="action" @tap="$wanlshop.back(1)"><text class="wlIcon-fanhui1"></text></view>
				<!-- 直接进入 -->
				<view v-else class="action" @tap="$wanlshop.on('/pages/index')"><text class="wlIcon-zhuye"></text></view>
				
				<view class="search-form round" @tap="search()">
					<text class="wlIcon-sousuo1 text-bold"></text> 
					<!-- <view class="searchinfo cu-tag round" v-if="category">
						<text>类目:{{ category }}</text>
						<text class="wlIcon-shanchu2"></text>
					</view>
					<view class="searchinfo cu-tag round text-df" v-else-if="params.search">
						<text>{{ params.search }}</text>
						<text class="wlIcon-shanchu2"></text>
					</view> -->
					<view>搜索商品</view>
				</view>
				<view class="action">
					<image src="../static/images/img/fabu.png" mode="" @tap="$wanlshop.on('/pages/apps/find/user/add')"></image>
					<image src="../static/images/img/user.png" style="margin-left:34rpx;" mode="" @tap="$wanlshop.on('/pages/apps/find/user')"></image>
				</view>
			</view>
		</view>
		<view class="conentContainer">
			<image src="../static/images/img/youquan.png" mode="aspectFill" class="topPic"></image>
			<view class="list" v-for="(item,index) in dataList" :key="index" @click="goDetails(item)">
				<view class="title">
					<view class="left">
						<image src="../static/images/img/u1.png" mode=""></image>
						<view class="name">
							<text>{{item.user&&item.user.nickname}}</text>
							<text class="time">{{item.createtime_text}}</text>
						</view>
					</view>
					<view class="right" v-if="item.isFollow==1" @click.stop="followHandle(item)">
						<image src="../static/images/img/dui.png" mode=""></image>
						<text>已关注</text>
					</view>
					<view class="rightactive" v-else @click.stop="followHandle(item)">
						<image src="../static/images/img/jia.png" mode=""></image>
						<text>关注</text>
					</view>
				</view>
				<view class="topic">
					<u-parse :content="item.content"></u-parse>
					
				</view>
				<view class="pic">
					<image :src="common.uploaddata.cdnurl+item.images[0]" mode="aspectFill"></image>
				</view>
				<view class="toolBox">
					<view class="toolItem">
						<image src="../static/images/img/fenx.png" mode="widthFix"></image>
						<text>{{item.shares}}</text>
					</view>
					<view class="toolItem">
						<image src="../static/images/img/xiaoxi.png" mode="widthFix"></image>
						<text>{{item.comments}}</text>
					</view>
					<view class="toolItem" @click.stop="likeHandle(item)">
						<image src="../static/images/img/dianzan.png" mode="widthFix" v-if="item.isLike==0"></image>
						<image src="../static/images/img/dianzan1.png" mode="widthFix" v-if="item.isLike==1"></image>
						<text>{{item.likes}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapState
} from 'vuex';
export default {
	computed: {
		...mapState(['common'])
	},
	data() {
		return {
			pagesNum:0,
			pageIndex: 1,
			height:0,
			top:0,
			total:0,
			dataList:[]
		};
	},
	onLoad(option) {
		this.pagesNum = getCurrentPages().length; // 1.1.9 升级
		console.log(this.$wanlshop.wanlsys())
		this.height = this.$wanlshop.wanlsys().height
		this.top = this.$wanlshop.wanlsys().top
		
	},
	
	methods: {
		goDetails(item){
			uni.navigateTo({
				url:"/pages/youquanDetails?id="+item.id
			})
		},
		// 点赞
		likeHandle(item){
			
			uni.request({
				url: '/wanlshop/find/user/setFindUser',
				method:"POST",
				data:{
					"id":item.id,
					"type":"likes"
				},
				success: res => {
					this.getList()
				}
			})
		},
		// 关注
		followHandle(item){
			uni.request({
				url: '/wanlshop/find/user/setFindUser',
				method:"POST",
				data:{
					"id":item.user_no,
					"type":"follow"
				},
				success: res => {
					this.getList()
				}
			})
		},
		// 获取列表
		getList(){
			uni.request({
				url: '/wanlshop/find/find/getmingList',
				data:{
					current_page:this.pageIndex,
					per_page:15,
				},
				success: res => {
					
					this.dataList = res.data.data;
					this.total = res.data.total
					
				}
			})
		},
		
		search() {
			this.$wanlshop.to(`/pages/page/search?type=${this.goodsType}`,'fade-in',100);
		},
		
	},
	onShow(){
		this.getList()
	},
	onReachBottom(){
	    console.log('触底了！')
		if(this.dataList.length<this.total){
			this.pageIndex++;
			uni.request({
				url: '/wanlshop/find/find/getmingList',
				data:{
					current_page:this.pageIndex,
					per_page:15,
				},
				success: res => {
					this.dataList=this.dataList.concat(res.data.data) 
					
				}
			})
			
		}
	}
};
</script>
<style>
	page{
		overflow: auto !important;
	}
</style>
<style scoped lang="scss">
	
.youquan{
	background-color: #F2F3F4;
	min-height: calc(100vh);
	overflow: auto;
	.action{
		&>image{
			width: 44rpx;
			height: 44rpx;
		}
	}
	.conentContainer{
		.topPic{
			width:100%;
			height:330rpx;
		}
		.list{
			background: #fff;
			margin: 20rpx 24rpx;
			border-radius: 20rpx;
			padding: 30rpx;
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					display: flex;
					align-items: center;
					&>image{
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
					}
					.name{
						margin-left:16rpx;
						display: flex;
						flex-direction: column;
						text{
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 30rpx;
							color: #333333;
							
						}
						.time{
							margin-top:15rpx;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 22rpx;
							color: #666666;
						}
					}
				}
				.right{
					padding:14rpx;
					background: #E8E8E8;
					border-radius: 25px;
					display: flex;
					align-items: center;
					&>image{
						width:19rpx;
						height:13rpx;
					}
					&>text{
						margin-left:7rpx;
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #333333;
					}
				}
				.rightactive{
					display: flex;
					align-items: center;
					padding:14rpx;
					background: #EB6100;
					border-radius: 25px;
					&>image{
						width:18rpx;
						height:18rpx;
					}
					&>text{
						margin-left:7rpx;
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #FFFFFF;
					}
				}
			}
			.topic{
				 font-family: PingFang SC;
				 font-weight: 500;
				 font-size: 26rpx;
				 color: #333333;
				 margin-top:27rpx;
				
			}
			.pic{
				width:100%;
				height: 330rpx;
				background: #999999;
				border-radius: 20rpx;
				border: 1px solid #EAEAEA;
				overflow: hidden;
				 margin-top:20rpx;
				&>image{
					width:100%;
					height:100%;
				}
			}
			.toolBox{
				display: flex;
				justify-content: space-between;
				margin-top:20rpx;
				padding: 0 20rpx;
				.toolItem{
					display: flex;
					align-items: center;
					&>image{
						width: 28rpx;
						height:auto;
					}
					&>text{
						margin-left:13rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #222222;
					}
				}
			}
		}
	}
}
.cu-custom .search-form{
	border: 3rpx solid #fe6600;
	background-color: #fff;
}
.cu-tag:not([class*="bg"]):not([class*="line"]){
	background-color: #f7f7f7;
}
</style>
