<template>
	<view style="background: linear-gradient(-90deg, #f8f8e2, #c9f6f5);">
		<view class="top-plus">
			<!-- 顶部导航栏 -->
			<view class="top">
				<view style="padding-left: 32rpx;">
					<!-- <u-icon name="calendar" size="28"></u-icon> -->
					<image style="width: 41rpx;height: 46rpx;" src="../static/images/icon/icon_register.png" mode=""></image>
				</view>
				<view style="position: relative; padding-left: 27rpx;">
					<!-- <u-icon name="plus-circle" size="28" @click="postOpen = !postOpen"></u-icon> -->
					<image @click="postOpen = !postOpen" style="width: 41rpx;height: 46rpx;" src="../static/images/icon/icon_motion2.png" mode=""></image>
					<view class="modal" v-if="postOpen">
						<text style="margin-bottom: 15rpx;">发布话题</text>
						<!-- <br /> -->
						<text>发布活动</text>
					</view>
				</view>
				<view></view>
				<view class="" style="font-size: 100px;">
					<up-tabs :current="viewIndex" :list="list1" lineColor="#B3D7FF" lineWidth="25" @click="click" :activeStyle="{
			    color: '#303133',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)',
				fontSize: '40rpx',
				marginBottom: '12rpx'
			}" :inactiveStyle="{
			    color: '#606266',
			    transform: 'scale(1)',
				fontSize: '40rpx'
			}" itemStyle="font-size: 40rpx;"></up-tabs>
				</view>
			</view>
			<!-- 搜索栏 -->
			<view>
				<view class="search">
					<view style="width: 537.94rpx; height: 61.94rpx;">
						<!-- <up-search placeholder="日照香炉生紫烟" v-model="keyword" :show-action="false" placeholder-color="#FF0000"></up-search> -->
						<view style="position: relative;">
							<u-search  @click.stop="toSearch()" disabled="true" v-model="keyword" :show-action="false" borderColor="#B3D7FF"
								bgColor="#ffffff20"></u-search>
							<view class="scan">
								<u-icon color="#C0C3C0" name="scan" size="22" @click="toScan()"></u-icon>
							</view>
						</view>
					</view>
					<view style="display: flex;" @click="searchOpen = !searchOpen">
						<text style="font-weight: 400;
font-size: 30rpx;
color: #1B1B1B 100%;">{{ postsousuotype }}</text>
						<u-icon :name="searchOpen ? 'arrow-up-fill' : 'arrow-down-fill'"></u-icon>
					</view>

				</view>
			</view>
		</view>
		<!-- 热门弹出层 -->
		<up-popup :round="20" :show="searchOpen" mode="bottom" @close="searchOpen = false" @open="searchOpen = true">
			<view style="height: 77vh; position: relative;">
				<view class="popup-close">
					<u-icon color="#CDCDCD" size="28" name="close-circle"></u-icon>
				</view>
				<view class="pop-title">
					全部类目
				</view>
				<view class="">
					<text style="font-size: 26rpx; color: #A3A3A3;">点击选择类目，仅可选择一个</text>

				</view>
			</view>
		</up-popup>
		<!-- 中间内容 -->
		<view class="page-center">
			<!-- 关注 -->
			<view v-if="viewIndex == 0" style="padding-top: 40rpx;">
				<view style="padding-left: 32rpx; padding-bottom: 27rpx;">
					<up-text bold="true" size="33rpx" color="#000" text="我关注的人"></up-text>
				</view>
				<up-scroll-list :indicator="false">
					<view v-for="(item, index) in avatatlist" :key="index" class="container">
						<!-- <image :src="item.thumb"></image> -->
						<div class="item">
							<div class="avatar-container">
								<up-avatar :src="item" size="120rpx"></up-avatar>

							</div>
							<div class="text-container">
								<up-text size="26rpx" text="爱吃饭的小张" align="center"></up-text>
							</div>
						</div>
					</view>
				</up-scroll-list>
				<view class="page-line"></view>
			</view>
			<!-- 话题投稿列表 -->
			<view class="post-item">
				<view class="post-list-item">
					<view @click.stop="toUser('跳转到用户个人空间')">
						<view style="position: relative;">
							<up-avatar :src="src" size="84rpx"></up-avatar>
							<view v-if="userType == 1" class="red-v">
								<img style="width: 30rpx; height: 30rpx;" src="../static/images/icon/appRedV.png" alt="" />
							</view>
						</view>
					</view>
					<view class="center">
						<view class="post-top-box">
							<view class="uname">
								<!-- <text v-if="userType == 1" class="official">官方</text> -->
								<text class="username">{{ username.substring(0, 10) }}</text>
							</view>
							<view class="">
								<text v-if="postTop>0" class="officials">置顶</text>
								<text v-if="poststatus==1" class="officials">审核中</text>
								<text v-if="poststatus==2" class="officials">已下架</text>
							</view>
							<view style="padding-top: 34rpx; padding-right: 10rpx;"  v-if="viewIndex == 1">
								<up-text class="officials" bold="true" size="15" color="#3478FC" text="关注"></up-text>
							</view>
						</view>
						<view style="margin-left: 19rpx; padding-bottom: 15rpx; font-size: 26rpx; color: #999999">
							<text class="time">{{createTime}}</text>·<text class="time">{{postaddress}}</text>
						</view>
					</view>
				</view>
				<view class="post-content">
					<up-text v-if="posttitle" :text="posttitle" bold="true" size="16" lines="2"></up-text>
					<view style="height: 8px;"></view>
					<up-text :text="postcontent" size="15" color="#424242" lineHeight="21" lines="2"></up-text>
					<view style="height: 8px;"></view>
					<!-- <rich-text class="post-text" :nodes="postcontent"></rich-text> -->
					<block v-if="posttype == 1">
						<!-- <up-album :urls="urls2" multipleSize="95" space="3" style="width: 100%"></up-album> -->
						<!--一张图片-->
						<block v-if="urls2.length == 1">
							<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="urls2[0]"
								@tap.stop="previewImage(urls2[0], urls2)"></image>
						</block>
						<!--二张图片-->
						<block v-if="urls2.length == 2">
							<view class="img-style-2">
								<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
									@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
								</image>
							</view>
						</block>
						<!--三张图片-->
						<block v-if="urls2.length == 3">
							<view class="img-style-3">
								<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
									@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
								</image>
							</view>
						</block>
						<!--四张图片-->
						<block v-if="urls2.length == 4">
							<view class="img-style-4">
								<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
									@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill" :src="mediaItem">
								</image>
							</view>
						</block>
					</block>
				</view>
				<!-- 标签 -->
				<view v-if="posttab" style="margin-top: 18rpx;">
					<!-- <u-icon class="icon" name="map-fill"></u-icon> -->
					<!-- <text>{{ posttab }}</text> -->
					<view style="display: flex;">
						<text
							style="color: #3477FC; margin-left: 2%; font-size: 24rpx; font-weight: 600; background-color: #F7F8FA; border-radius: 4px; padding: 3px;"
							v-for="(tabItem, index2) in posttab" :key="index2"
							:text="'#' + tabItem">{{'#' + tabItem}}</text>
					</view>
				</view>
				<!-- 底部 -->
				<view class="post-list-bottom">
					<view class="p-item" style="width: 36%;">
						<!-- <text class="iconfont icon-quanzi"></text> -->
						<!-- <u-icon name="share" size="40rpx"></u-icon> -->
						<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_forward.png" mode=""></image>
						<text class="count">{{ readCount }}</text>
					</view>
					<view v-if="isLike" class="p-item" @click.stop="cancelCollection('取消点赞')">
						<!-- <u-icon name="heart-fill" size="40rpx" color="#cc0000"></u-icon> -->
						<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_onLike.png" mode=""></image>
						<text class="count">{{ likeCount }}</text>
					</view>
					<view v-if="!isLike" class="p-item" @click.stop="addCollection('点赞')">
						<!-- <u-icon name="heart" size="40rpx"></u-icon> -->
						<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_noLike.png" mode=""></image>
						<text class="count">{{ likeCount }}</text>
					</view>
					<view class="p-item margin50">
						<!-- <text class="iconfont icon-pinglun"></text> -->
						<!-- <u-icon name="chat" size="40rpx"></u-icon> -->
						<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_remark.png" mode=""></image>
						<text class="count">{{ commentCount }}</text>
					</view>
					<view class="p-item margin50">
						<!-- <text class="iconfont icon-pinglun"></text> -->
						<view class="" v-if="!isFavorite" @click.stop="cancelFavorite('取消收藏')">
							<!-- <u-icon name="star" size="40rpx"></u-icon> -->
							<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_onFavorite.png" mode=""></image>
						</view>
						<view class="" v-if="isFavorite" @click.stop="addFavorite('收藏')">
							<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_noFavorite.png" mode=""></image>
						</view>
						<text class="count">{{ favoriteCount }}</text>
					</view>
				</view>
				<u-line></u-line>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue';
	import storage from '@/utils/storage'

	import {
		listPost,
		getPost,
		delPost,
		addPost,
		updatePost
	} from "@/api/talk/post";

	// 创建响应式数据
	const list1 = reactive([{
			name: '关注'
		},
		{
			name: '推荐'
		}
	]);
	const viewIndex = ref(1)
	// 定义方法
	function click(item) {
		console.log('item', item);
		viewIndex.value = item.index
	}

	const postList = ref([]);
	const loading = ref(true);
	const total = ref(0);
	const data = reactive({
		form: {},
		queryParams: {
			pageNum: 1,
			pageSize: 10,
			uid: null,
			topicId: null,
			discussId: null,
			voteId: null,
			title: null,
			content: null,
			media: null,
			readCount: null,
			transmitCount: null,
			likeCount: null,
			commentCount: null,
			postTop: null,
			type: null,
			address: null,
			longitude: null,
			latitude: null,
			createTime: null,
			auditor: null,
			status: null,
			auditTime: null,
			auditAdvice: null,
			cut: null,
			anonymity: null
		},
		rules: {}
	});

	const {
		queryParams,
		form,
		rules
	} = toRefs(data);

	/** 查询话题投稿列表 */
	function getList() {
		loading.value = true;
		queryParams.value.params = {};
		// if (null != daterangeCreateTime && '' != daterangeCreateTime) {
		//   queryParams.value.params["beginCreateTime"] = daterangeCreateTime.value[0];
		//   queryParams.value.params["endCreateTime"] = daterangeCreateTime.value[1];
		// }
		// if (null != daterangeAuditTime && '' != daterangeAuditTime) {
		//   queryParams.value.params["beginAuditTime"] = daterangeAuditTime.value[0];
		//   queryParams.value.params["endAuditTime"] = daterangeAuditTime.value[1];
		// }
		listPost(queryParams.value).then(response => {
			postList.value = response.rows;
			total.value = response.total;
			loading.value = false;
			console.log('话题列表', postList.value)
		});
	}

	function toScan() {
		console.log('扫码')
	}
	const { proxy } = getCurrentInstance();
	function toSearch() {
		console.log('跳转到搜索页面')
		proxy.$tab.navigateTo('/pages/search/index')
		// prs.$tab.navigateTo('/pages/search/index')
		// uni.navigateTo()
	}

	const src = ref('https://photo.16pic.com/00/53/26/16pic_5326745_b.jpg');
	const userType = ref(1)
	const username = ref('若依')
	const postTop = ref(0)
	const poststatus = ref(0)
	const createTime = ref('2024.5.4')
	const posttitle = ref('我用十年青春,赴你最后之约')
	const postcontent = ref(
		'一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。'
		)
	const posttype = ref(1)
	const albumWidth = ref(100)
	const urls2 = ref([
		'https://tu.sioe.cn/gj/qiege/image.jpg',
		'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
		'https://tu.sioe.cn/gj/qiege/image.jpg',
		// 'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
		// 'https://tu.sioe.cn/gj/qiege/image.jpg',
		// 'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
		// 'https://tu.sioe.cn/gj/qiege/image.jpg',
		// 'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
		// 'https://tu.sioe.cn/gj/qiege/image.jpg',
		// 'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b'
	]);
	const avatatlist = ref([
		'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
		'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
		'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
		'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL00n5sQd_z0VdifIaNlK1dLILmcdSwVJk-OnEA1eiig&s',
		'https://www.tboxn.com/wp-content/uploads/2022/11/%E5%A4%B4%E5%83%8F.png',
	])
	const postaddress = ref('天津电子信息职业技术学院')
	// const postaddress = ref()
	const isLike = ref(false)
	const isFavorite = ref(false)
	const readCount = ref(123)
	const likeCount = ref(233)
	const commentCount = ref(12)
	const favoriteCount = ref(15)
	const posttab = ref(['校园丢失', '学术'])
	const keyword = ref('')
	const postsousuotype = ref('热门')
	const searchOpen = ref(false)
	const postOpen = ref(false)

	function addCollection() {
		console.log('点赞')
		isLike.value = !isLike.value
	}
	function cancelCollection() {
		console.log('点赞')
		isLike.value = !isLike.value
	}

	function addFavorite() {
		console.log('点赞')
		isFavorite.value = !isFavorite.value
	}

	function cancelFavorite() {
		console.log('点赞')
		isFavorite.value = !isFavorite.value
	}

	getList();
</script>

<style lang="scss" scoped>
	.top-plus {
		padding: 10px 0px;
		padding-bottom: 38rpx;
	}

	.top {
		// height: 230rpx;
		padding-top: 90rpx;
		padding-bottom: 20rpx;
		display: grid;
		// justify-content: space-between;
		grid-template-columns: 1fr 1fr 1fr 6fr;
		align-items: center;
	}

	@media screen and (max-width:414px) {
		.top {
			padding-top: 40rpx;
			padding-bottom: 20rpx;
			// grid-template-columns: 1fr 1fr 3fr 2fr;
			grid-template-columns: 1fr 1fr 1fr 6fr 2fr;
		}
	}

	.modal {
		display: flex;
		flex-direction: column;
		position: absolute;
		align-items: center;
		top: 55rpx;
		width: 250rpx;
		// height: 50rpx;
		left: -70rpx;
		z-index: 100;
		background-color: #FFFFFF;
		padding: 20rpx 35rpx;
		border-radius: 20rpx;
		color: #CCF6F5;
		 border: 2px solid transparent; /* 设置元素的边框 */
		    box-shadow: 0 0 0 2px #B5D7FF; /* 添加描边效果 */
	}

	.search {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.scan {
		position: absolute;
		top: 12rpx;
		right: 32rpx;
		z-index: 100;
	}

	.page-center {
		background: #fff;
		// margin-bottom: 20rpx;
		// padding-top: 40rpx;
		border-radius: 40rpx 40rpx 0 0;
	}

	.page-line {
		width: 100%;
		height: 16rpx;
		background: #E5E5E5;
		// box-shadow: 0 0 0 1.96rpx #852C30;
	}

	.container {
		// margin-bottom: 22rpx;
		margin-left: 12rpx;
	}

	.item {
		display: flex;
		flex-direction: column;
		/* 让元素垂直排列 */
		margin: 0rpx 13rpx;
	}

	.avatar-container {
		align-self: center;
		/* 让头像水平居中 */
	}

	.text-container {
		text-align: center;
		/* 让文本水平居中 */
		margin-top: 16rpx;
		/* 调整头像和文本之间的间距 */
		width: 160rpx;
	}

	.red-v {
		 position: absolute;
		    display: block; /* 这一行通常是不必要的，因为元素默认就是块级元素，除非你有特殊需求 */
		    bottom: -10rpx; /* 从父元素顶部偏移50像素 */
		    right: 5rpx; /* 从父元素左侧偏移20像素 */
	}



	.post-item {
		padding: 20rpx;

		.post-content {
			margin-top: 20rpx;

			.img-style-1 {
				display: block;
				width: 100%;
				height: 600rpx;
				border-radius: 5px;
				overflow: hidden;
				border-radius: 20rpx;

			}

			.img-style-2 {
				display: flex;

				image {
					margin: 5rpx;

					width: 100%;
					height: 305rpx;
					border-radius: 20rpx;
				}
			}

			.img-style-3 {
				display: flex;
				flex-wrap: wrap;

				image {
					width: 31.3%;
					height: 200rpx;
					margin: 0.6%;
					border-radius: 20rpx;

				}
			}

			.img-style-4 {
				display: flex;
				flex-wrap: wrap;

				image {
					width: 48%;
					height: 320rpx;
					margin: 0.5%;
					border-radius: 20rpx;

				}
			}

		}

		.address {
			display: flex;
			font-size: 20rpx;
			background-color: #F5F5F5;
			border-radius: 20rpx;
			display: inline-block;
			padding: 5rpx 20rpx;
			margin: 20rpx 0;

			.icon {
				margin-right: 5rpx;
			}
		}
	}

	.post-top-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
	}

	.uname {
		display: flex;
		align-items: center;
		margin-left: 19rpx;
		// padding-bottom: 1rpx;
	}

	.post-list-item {
		display: flex;
		align-items: center;

		.avatar {
			width: 85rpx;
			height: 85rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.center {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
			color: #999;

			.username {
				font-size: 30rpx;
				font-weight: 600;
				color: #000000;
			}

			.official {
				display: inline-block;
				width: 65rpx;
				height: 35rpx;
				font-size: 20rpx;
				font-weight: bold;
				text-align: center;
				line-height: 35rpx;
				color: #ffffff;
				background-color: #000000;

				border-radius: 30rpx;
				margin-right: 10rpx;
			}

			.officials {
				display: inline-block;
				font-size: 25rpx;
				color: #ffffff;
				background-color: #c0392b;
				padding: 2rpx 8rpx;
				border-radius: 10rpx;
				margin-left: 30rpx;
			}
		}

		.right {
			height: 85rpx;

			.arrow-down {
				color: #999;
			}
		}
	}

	.post-text {
		display: block;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 10;
		white-space: pre-wrap;
		overflow: hidden;
	}

	.post-list-bottom {
		display: flex;
		margin: 20rpx 0;
		margin-top: 28rpx;

		.p-item {
			margin: 0 auto;
			color: #616161;
			display: flex;
			align-items: center;

			.count {
				margin-left: 10rpx;
				font-size: 28rpx;
			}
		}

		.p-item[hidden] {
			display: none !important;
		}
	}

	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}

	.u-album__row.data-v-6fcabaad {
		/* 在这里添加你想要的样式 */
		width: 100%;
	}

	.popup-close {
		    position: absolute;
		    display: block; /* 这一行通常是不必要的，因为元素默认就是块级元素，除非你有特殊需求 */
		    top: 28rpx; /* 从父元素顶部偏移50像素 */
		    left: 30rpx; /* 从父元素左侧偏移20像素 */
	}

	.pop-title {
		padding: 33rpx 0rpx;
		font-size: 36rpx;
		font-weight: 500;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
