<template>
	<view>
		<navBar leftText="事件详情"></navBar>
		<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
		<view class="eventDetailsC fixed" :style="'top:'+navH+'px;'">
			<view class="categoryTitleC">
				<view class="category">政策</view>
				<text class="title">四部门联合启动人力资源服务业与制造业融合发展试点</text>
			</view>
			<view class="time">2025-05-08 08:43</view>
			<view class="eventContent">人社部、工信部等四部门印发通知，明确在30个城市开展3年期试点，培育人力资源服务与制造业协同机构，打造融合平台和创新模式。政策</view>
			<scroll-view scroll-x class="categoryList">
				<view :class="'item relative '+(selectCategory==index?'select':'')" v-for="(item,index) in categoryList" :key="index" @click="clickCategoryItem(index)">
					{{item}}
					<view v-if="selectCategory==index" class="line absolute"></view>
				</view>
			</scroll-view>
			<view v-if="selectCategory==0" class="headingList flex">
				<view class="item flex1" v-for="(item,index) in headingList" :key="index">
					{{item}}
				</view>
			</view>
			<view v-if="selectCategory==0" class="targetList">
				<view class="item">
					<view class="nameCodePriceC flex">
						<view class="flex1">
							<view class="name">科锐国际</view>
							<view class="code">300662.SZ</view>
						</view>
						<view class="flex1">
							
						</view>
						<view class="price flex1">30.04</view>
						<view class="price flex1">30.15</view>
						<view class="chg flex1">+0.37%</view>
					</view>
					<view class="content">
						科锐国际作为灵活用工龙头企业，其业务高度契合政策推动的制造业高端人才引育方向。公司技术研发类岗位占比达70%，直接匹配政策要求
					</view>
				</view>
			</view>
			<view v-if="selectCategory==1" class="conceptList">
				<view class="item relative" @click="clickConceptItem()">
					<image class="cover" src="" mode="aspectFill"></image>
					<view class="infoC absolute">
						<view class="title">布鲁可IP衍生品(250109)</view>
						<view class="content">
							四部门联合启动的人力资源服务业与制造业融合发展试点，主要目的是推动
							人力资源服务...
							<text class="lookDetails">查看详情</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomC fixed flex">
			<view class="inputC flex1">
				<input type="text" placeholder="我来说两句..." placeholder-style="color:#666"/>
			</view>
			<view class="commentLikeNumC flex">
				<view class="item">
					<image class="icon" src="/static/icon/home/browser.png" mode="widthFix"></image>
					<view>64</view>
				</view>
				<view class="item" @click="clickComment()">
					<image class="icon" src="/static/icon/home/comment.png" mode="widthFix"></image>
					<view>28</view>
				</view>
				<view class="item">
					<image class="icon" src="/static/icon/home/follow.png" mode="widthFix"></image>
					<view>128</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<view class="titleCloseC flex">
					<view class="title flex1">全部回复</view>
					<view class="closeC" @click="closeCommentPopup()">
						<image class="icon" src="/static/icon/home/close.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="list">
					<view class="item">
						<view class="originComment">
							<image class="avatar" src="" mode="aspectFill"></image>
							<view class="flex1">
								<view class="nickname">逸尘破晓</view>
								<view class="content">四部门联合启动的人力资源服务业与制造业融合发展点，主要目的是推动人力资源服务向高端制造渗透。</view>
								<view class="timeReplyLikeC flex between">
									<view class="timeReplyC flex">
										<view class="time">15:37</view>
										<view class="reply">回复</view>
									</view>
									<view class="likeC flex">
										<image class="icon" src="/static/icon/home/like.png" mode="widthFix"></image>
										<view class="num">85</view>
									</view>
								</view>
								<view class="totalCommentNumC flex">
									<view class="line"></view>
									全部34条评论
									<image class="arrow" src="/static/icon/home/commentArrow.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view class="replyList">
							<view class="replyItem">
								<image class="avatar" src="" mode="aspectFill"></image>
								<view class="flex1">
									<view class="nickname">逸尘破晓</view>
									<view class="content">四部门联合启动的人力资源服务业与制造业融合发展点，主要目的是推动人力资源服务向高端制造渗透。</view>
									<view class="timeReplyLikeC flex between">
										<view class="timeReplyC flex">
											<view class="time">15:37</view>
											<view class="reply">回复</view>
										</view>
										<view class="likeC flex">
											<image class="icon" src="/static/icon/home/like.png" mode="widthFix"></image>
											<view class="num">85</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="popBottomC">
					<view class="inputC">
						<input type="text" placeholder="我来说两句..." placeholder-style="color:#666"/>
					</view>					
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { inject } from 'vue';
	import { eventDetails } from '../../../request/api';

	export default {
		data() {
			return {
				navH:inject('navHeight'),
				eventId:'',		//事件id
				categoryList:['相关标的','相关概念','历史事件','时间传导链分析','关联数据'],
				selectCategory:0,
				headingList:['名称代码','分时图','开盘价','最新价','涨跌幅']
			}
		},
		onLoad(e)
		{
			if(e.id)
			{
				this.eventId = e.id
				this.getEventDetailsData()
			}
		},
		methods: {
			/**
			 * 点击切换分类
			 */
			clickCategoryItem(index)
			{
				if(this.selectCategory!=index)
				{
					this.selectCategory = index
				}
			},
			/**
			 * 点击查看股票详情
			 */
			clickStockItem()
			{
				uni.navigateTo({
					url:'/pages/index/stockDetails/stockDetails'
				})
			},
			/**
			 * 点击查看相关概念
			 */
			clickConceptItem()
			{
				uni.navigateTo({
					url:'/pages/index/conceptDetails/conceptDetails'
				})
			},
			/**
			 * 点击评论
			 */
			clickComment()
			{
				this.$refs['popup'].open()
			},
			closeCommentPopup()
			{
				this.$refs['popup'].close()
			},
			/**
			 * 获取事件详情数据
			 */
			getEventDetailsData()
			{
				let eventId = this.eventId
				eventDetails(eventId).then(res=>{
					
				}).catch(error=>{
					
				})
			}
		}
	}
</script>

<style lang="less">
.topBg
{
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.eventDetailsC
{
	background-color: white;
	margin-top: 10rpx;
	padding: 20rpx 0 0;
	left: 0;
	right: 0;
	bottom: calc(20rpx + 70rpx + 20rpx + env(safe-area-inset-bottom));
	border-radius: 20rpx 20rpx 0 0;
	overflow-y: hidden;
	.categoryTitleC
	{
		padding: 0 25rpx;
		.category 
		{
			background-color: #FD9A14;
			margin-right: 12rpx;
			display: inline-block;
			padding: 0 11rpx;
			line-height: 40rpx;
			border-radius: 8rpx;
			font-size: 22rpx;
			font-weight: bold;
			color: white;
		}
		.title 
		{
			font-size: 30rpx;
			font-weight: bold;
			color: #222;
		}
	}
	.time 
	{
		margin: 20rpx 25rpx 0;
		font-size: 22rpx;
		font-weight: 500;
		color: #aaa;
	}
	.eventContent 
	{
		margin: 22rpx 24rpx 0;
		font-size: 24rpx;
		font-weight: 500;
		color: #666;
		line-height: 1.2rem;
	}
	.categoryList 
	{
		white-space: nowrap;
		margin-top: 10rpx;
		.item 
		{
			display: inline-block;
			line-height: 60rpx;
			padding: 0 18rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #42485B;
		}
		.item.select 
		{
			font-weight: bold;
			color: #F97316;
			.line
			{
				background-color: #F97316;
				left: calc((100% - 50rpx)/2);
				bottom: 0;
				width: 50rpx;
				height: 2rpx;
			}
		}
	}
	.headingList 
	{
		background-color: #F3F6F9;
		margin: 28rpx 25rpx 0;
		.item 
		{
			line-height: 55rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #999;
			text-align: center;
		}
	}
	.targetList
	{
		padding: 0 25rpx;
		.item 
		{
			padding-bottom: 20rpx;
			border-bottom: solid 1rpx #E4E4E4;
			.nameCodePriceC 
			{
				padding: 20rpx 0;
				font-size: 28rpx;
				font-weight: bold;
				color: #222;
				.code 
				{
					font-size: 20rpx;
					font-weight: 500;
					color: #888;
				}
				.price 
				{
					font-size: 28rpx;
					font-weight: bold;
					color: #222;
					text-align: center;
				}
				.chg 
				{
					color: #FF2929;
				}
			}
			.content
			{
				font-size: 20rpx;
				font-weight: 500;
				color: #666;
			}
		}
	}
	.conceptList
	{
		padding: 30rpx 25rpx;
		.item 
		{
			.cover 
			{
				background-color: red;
				display: block;
				width: 100%;
				height: 350rpx;
				border-radius: 10rpx;
			}
			.infoC 
			{
				background: linear-gradient(to bottom,#00000080,#000);
				padding: 20rpx 23rpx;
				left:0;
				width: 100%;
				bottom: 0;
				color: white;
				.title 
				{
					font-size: 26rpx;
					font-weight: bold;
				}
				.content 
				{
					margin-top: 10rpx;
					font-size: 20rpx;
					font-weight: 500;
					line-height: 1.2rem;
					.lookDetails 
					{
						color: #F97316;
					}
				}
			}
		}
	}
}
.bottomC
{
	padding: 20rpx 25rpx calc(20rpx + env(safe-area-inset-bottom));
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: 0px -1rpx 0px 0px #EEEEEE;
	.inputC
	{
		background-color: #F0F0F0;
		margin-right: 20rpx;
		padding: 0 33rpx;
		height: 70rpx;
		border-radius: 35rpx;
		input
		{
			height: 100%;
			font-size: 26rpx;
			font-weight: 500;
		}
	}
	.commentLikeNumC
	{
		.item 
		{
			padding: 0 20rpx;
			font-size: 26rpx;
			font-weight: bold;
			color: #666;
			.icon 
			{
				width: 35rpx;
				height: auto;
			}
		}
	}
}
.popup
{
	background-color: white;
	.titleCloseC
	{
		padding-left: 25rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
		.closeC 
		{
			padding: 28rpx;
			.icon 
			{
				width: 28rpx;
				height: auto;
			}
		}
	}
	.list
	{
		margin: 0 25rpx;
		border-top: solid 1rpx #E4E4E4;
		max-height: 1200rpx;
		.item 
		{
			padding-top: 30rpx;
			border-bottom: solid 1rpx #E4E4E4;
			.originComment
			{
				display: flex;
				.avatar
				{
					background-color: red;
					margin-right: 23rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
				.nickname 
				{
					font-size: 28rpx;
					font-weight: bold;
					color: #111;
				}
				.content 
				{
					margin-top: 10rpx;
					line-height: 1.2rem;
					font-size: 24rpx;
					font-weight: 500;
					color: #666;
				}
				.timeReplyLikeC
				{
					.time
					{
						margin-right: 36rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #aaa;
					}
					.reply
					{
						font-size: 26rpx;
						font-weight: 500;
						color: #F97316;
					}
					.likeC 
					{
						padding: 14rpx 0;
						font-size: 28rpx;
						font-weight: bold;
						color: #999;
						.icon 
						{
							margin-right: 12rpx;
							width: 27rpx;
							height: auto;
						}
					}
					.likeC.like
					{
						color: #F97316;
					}
				}
				.totalCommentNumC
				{
					padding: 14rpx 0 22rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #999;
					.line 
					{
						background-color: #aaa;
						margin-right: 18rpx;
						width: 30rpx;
						height: 2rpx;
					}
					.arrow 
					{
						margin-left: 14rpx;
						width: 13rpx;
						height: auto;
					}
				}
			}
			.replyList 
			{
				margin-left: 60rpx;
				border-top: solid 1rpx #E4E4E4;
				.replyItem
				{
					display: flex;
					padding: 22rpx 0;
					border-bottom: solid 1rpx #E4E4E4;
					.avatar
					{
						background-color: red;
						margin-right: 23rpx;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
					.nickname 
					{
						font-size: 28rpx;
						font-weight: bold;
						color: #111;
					}
					.content 
					{
						margin-top: 10rpx;
						line-height: 1.2rem;
						font-size: 24rpx;
						font-weight: 500;
						color: #666;
					}
					.timeReplyLikeC
					{
						.time
						{
							margin-right: 36rpx;
							font-size: 26rpx;
							font-weight: 500;
							color: #aaa;
						}
						.reply
						{
							font-size: 26rpx;
							font-weight: 500;
							color: #F97316;
						}
						.likeC 
						{
							padding: 14rpx 0;
							font-size: 28rpx;
							font-weight: bold;
							color: #999;
							.icon 
							{
								margin-right: 12rpx;
								width: 27rpx;
								height: auto;
							}
						}
						.likeC.like
						{
							color: #F97316;
						}
					}
				}
				.replyItem:last-child
				{
					border: none;
				}
			}
		}
	}
	.popBottomC
	{
		padding: 22rpx 25rpx calc(22rpx + env(safe-area-inset-bottom));
		.inputC
		{
			background-color: #F0F0F0;
			padding: 0 33rpx;
			height: 70rpx;
			border-radius: 35rpx;
			input 
			{
				height: 100%;
				font-size: 26rpx;
				font-weight: 500;
				color: #333;
			}
		}
	}
	
}
</style>
