<template>
	<view>
		<view class="top">
			<view class="top_1">发现</view>
			<view class="top_2" @click="publishing"><fui-icon name="plussign" size="80" fontWeight="Number"></fui-icon></view> 
		</view>
		<view style="position: relative;" class="middle" v-for="(item, index) in list" :key="index"  v-if="list.length > 0">
			<view class="middles">
				<view class="middles_1" v-if="item.headimg">
					<image class="middles_1_img" :src="item.headimg"></image>
				</view>
				<view class="middles_1" v-else>
					<image class="middles_1_img" src="/static/images/home/tixing.png"></image>
				</view>
				<view class="middles_2">
					<view class="middles_info1">{{item.user}}</view>
					<view class="middles_info2">{{item.timedifference}}</view>
				</view>
			</view>
			<view class="shoucang" style="border: 5rpx #f8627f solid;color: #f8627f;" v-if="item.collections == 1" @click="collection(item.id,um_id)">收藏</view>
			<view class="shoucang" style="border: 5rpx #ccc solid;" v-else @click="collection(item.id,um_id)">收藏</view>
			<view @click="coninfo(item)" style="height: 300rpx;width: 100%;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;">
				<view class="middles_con">
					{{item.activity}}
				</view>
				<view class="middles_con" v-if="item.imagesnum!=0">
					<view>
						<view style="width: 32%;height: 200rpx;display: inline-block;margin:2rpx;" v-for="(item1, index) in item.images" :key="index">
							<image :src="item1" style="width: 100%;height: 100%;"></image>
						</view>
					</view>
				</view>
				<view class="middles_con">
					{{item.content}}
				</view>
			</view>
			<view class="middles_con" style="font-size: 20rpx;color: #ccc;" @click="coninfo(item)">
				点击内容查看详情
			</view>
			<view class="middles_bom">
				<view class="middles_bom_1 middles_boms" v-if="item.area">{{item.area}}</view>
				<view class="middles_bom_2 middles_boms">
					<fui-icon name="fabulous-fill" color="#f8627f" size="45" @click="like(item.id,item.um_id)"></fui-icon>
					{{item.likes}}
				</view>
				<view class="middles_bom_3 middles_boms" @click="Comment(item.id)">
					<fui-icon name="comment-fill" color="#6281a6" size="45"></fui-icon>
					{{item.comment}}
				</view>
			</view>
			<view style="width: 100%;height: 20rpx;"></view>
		</view>
		<view class="empty" v-if="!list.length">
			<view style="width: 200rpx;">
				<img src="@/static/icon-img/kkry.png" alt="" style="width: 180rpx;height: 180rpx;">
				<view style="font-size: 28rpx;font-weight: 800;color: #00be8c;">
					还没有任何提醒
				</view>
			</view>
		</view>
		
		<view style="width: 100%;height: 20rpx;"></view>

    <AQTabber/>
	</view>
</template>

<script>
	import user from '@/api/user.js';
	import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
	import AQTabber from "@/components/AQ/AQTabber.vue"
	export default {
    components: {
      fuiIcon,
      AQTabber,
    },
		data() {
			return {

			}
		},
		onLoad() {
			const um_id = uni.getStorageSync('um_id');
			this.um_id = um_id
			if (um_id == '') {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			this.fetchData(this.um_id)
		},
		methods: {
			// fetchData(um_id) {
			// 	user.activity_index({
			//       um_id: um_id
			//     }).then(res => {
			// 		console.log(res)
			// 		if(res.status == 200){
			// 			if(res.data == null){
			// 				this.list = []
			// 			}else{
			// 				this.list = res.data
			// 			}
			// 		}else{
			// 			uni.showToast({
			// 				title: res.msg,
			// 				icon: 'none'
			// 			})
			// 		}
			// 	});
			// },
		}
	}
</script>

<style>
	.empty {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		height: 85vh;
		align-items: center;
	}
	.top{
		background-color: #fff;
		height: 100rpx;
		width: 100%;
	}
	.top_1{
		display: inline-block;
		font-size: 55rpx;
		font-weight: bold;
		margin-left: 30rpx;
		line-height: 100rpx;
	}
	.top_2{
		margin-left: 600rpx; 
		position: absolute;
		top: 15rpx;
	}
	.middle{
		width: 95%;
		background-color: #fff;
		margin: auto;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}
	.middles{
		height: 150rpx;
		/* background-color: aqua; */
		margin-top: 20rpx;
	}
	.middles_1{
		height: 100%;
		width: 24%;
		/* background-color: red; */
		display: inline-block;
	}
	.middles_2{
		width: 70%;
		/* background-color: green; */
		display: inline-block;
		position: relative;
		top: -15%;
		left: 2%;
	}
	.middles_1_img{
		width: 130rpx;
		height: 130rpx;
		margin-left: 12%;
		border-radius: 100rpx;
		margin-top: 6%;
	}
	.middles_info1{
		font-size: 40rpx;
		font-weight: bold;
	}
	.middles_info2{
		color: #5e5e5e;
	}
	.middles_con{
		width: 92%;
		margin: 20rpx auto;
		font-size: 30rpx;
	}
	.middles_bom{
		padding: 30rpx 0 40rpx 25rpx;
		position: relative;
	}
	.middles_boms{
		display: inline-block;
		color: #9297b2;
	}
	.middles_bom_2{
		position: absolute;
		right: 30%;
	}
	.middles_bom_3{
		position: absolute;
		right: 10%;
	}
	.shoucang{
		position: absolute;
		right: 10%;
		top: 10%;
		height: 60rpx;
		width: 140rpx;
		border-radius: 10rpx;
		line-height: 54rpx;
		text-align: center;
	}
	
</style>