<template>
	<view class="position-detail-page">		
		<!-- 主内容区域 - 可滚动 -->
		<view class="content-wrapper">
			<!-- 顶部信息区域 -->
			<view class="header-section">
				<view class="factory-info">
					<text class="factory-name">安费诺</text>
					<text class="factory-type">电子厂</text>
					<text class="distance">距你2.5km</text>
				</view>
				<button class="call-btn" @click="makeCall">拨打电话</button>
			</view>

			<!-- 工作时间区域 -->
			<view class="work-time-section">
				<text class="time">8:00-20:00 两班倒</text>
				<text class="business">主营汽车线束</text>
			</view>

			<!-- 薪资信息区域 -->
			<view class="salary-section">
				<view class="salary-item">
					<text class="item-title">小时工</text>
					<text class="salary-content">工资: 20+1元/小时（含1元满勤）+绩效奖金高达500，月薪6500-7500</text>
				</view>
				
				<view class="salary-item">
					<text class="item-title">正式工</text>
					<text class="salary-content">工资2490元/月+夜班补贴10元/晚+"表现佳有绩效+超产奖金" 平时加班1.5倍，双休日2倍，国假日3倍等，月收入5700-6800/月</text>
				</view>
			</view>

			<!-- 福利信息区域 -->
			<view class="benefits-section">
				<text class="benefits-content">转正满2个月体检费196元企业报销(凭发票)</text>
				<text class="benefits-content">有部分为显微镜工作，显微镜工作额外有0-300的岗位补贴（具体以厂区发放为准抱拳）</text>
			</view>

			<!-- 分隔线 -->
			<view class="divider"></view>

			<!-- 用户评价区域 -->
			<view class="comments-section">
				<view class="section-title">用户评价</view>
				
				<!-- 动态渲染评价列表 -->
				<view class="comment-item" v-for="(comment, index) in comments" :key="comment.id">
					<view class="user-info">
						<view class="avatar"></view>
						<text class="username">{{ comment.username }}</text>
					</view>
					<text class="comment-content">{{ comment.content }}</text>
					<view class="image-container">
						<view class="comment-image"></view>
						<view class="comment-image"></view>
						<view class="comment-image"></view>
					</view>
					<view class="like-section">
						<text class="like-count">{{ comment.likes }}</text>
						<text class="like-icon" :class="{ active: comment.isLiked }" @click="toggleLike(index)">👍</text>
					</view>
				</view>
				
				<!-- 如果评价数量大于1，显示分隔线 -->
				<view class="comment-divider" v-if="comments.length > 1"></view>
			</view>
			
			<!-- 底部空间，确保内容不被底部按钮遮挡 -->
			<view class="bottom-space"></view>
		</view>
		
		<!-- 底部固定操作按钮 -->
		<view class="bottom-action">
			<button class="apply-btn" @click="applyJob">立即申请</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 职位数据
				comments: [
					{
						id: 1,
						username: '网友120489',
						content: '工作很轻松，基本都是手上的活',
						likes: 6,
						isLiked: false
					},
					{
						id: 2,
						username: '网友120489',
						content: '工作很轻松，基本都是手上的活',
						likes: 6,
						isLiked: true
					}
				]
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 拨打电话功能
			makeCall() {
				uni.makePhoneCall({
					phoneNumber: '400-123-4567'
				});
			},
			// 点赞/取消点赞
			toggleLike(index) {
				if (this.comments[index].isLiked) {
					// 取消点赞
					this.comments[index].likes--;
				} else {
					// 点赞
					this.comments[index].likes++;
				}
				// 切换点赞状态
				this.comments[index].isLiked = !this.comments[index].isLiked;
			},
			// 申请职位
			applyJob() {
				uni.showToast({
					title: '申请成功，请保持电话畅通',
					icon: 'success'
				});
			}
		}
	}
</script>

<style lang="scss">
.position-detail-page {
	// 页面背景色
	background-color: #f5f5f5;
	height: 100vh;
	overflow: hidden;
	
	// 导航栏
	.nav-bar {
		height: 44px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		
		.back-btn {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			color: #333;
		}
		
		.nav-title {
			font-size: 16px;
			font-weight: 500;
			color: #333;
		}
		
		.nav-right {
			width: 40px;
		}
	}
	
	// 内容包装器
	.content-wrapper {
		overflow-y: auto;
		max-height: calc(100vh);
		padding-bottom: 70px; // 为底部操作按钮留出空间
	}
	
	// 底部空间，确保内容不被底部按钮遮挡
	.bottom-space {
		height: 20px;
	}
	
	// 头部信息区域
	.header-section {
		background-color: #fff;
		padding: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.factory-info {
			.factory-name {
				font-size: 18px;
				font-weight: 600;
				color: #333;
			}
			
			.factory-type {
				font-size: 14px;
				color: #0099ff;
				background-color: #e6f7ff;
				padding: 2px 6px;
				border-radius: 4px;
				margin-left: 8px;
			}
			
			.distance {
				font-size: 14px;
				color: #999;
				margin-left: 12px;
			}
		}
		
		.call-btn {
			height: 36px;
			padding: 0 16px;
			background-color: #ff4757;
			color: white;
			font-size: 14px;
			border: none;
			border-radius: 18px;
		}
	}
	
	// 工作时间区域
	.work-time-section {
		background-color: #fff;
		padding: 12px 16px;
		margin-top: 8px;
		
		.time,
		.business {
			font-size: 14px;
			color: #666;
			margin-right: 16px;
		}
	}
	
	// 薪资信息区域
	.salary-section {
		background-color: #fff;
		padding: 16px;
		margin-top: 8px;
		
		.salary-item {
			margin-bottom: 16px;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.item-title {
				font-size: 16px;
				font-weight: 500;
				color: #333;
				margin-bottom: 8px;
				display: block;
			}
			
			.salary-content {
				font-size: 14px;
				color: #666;
				line-height: 1.6;
				white-space: pre-wrap;
			}
		}
	}
	
	// 福利信息区域
	.benefits-section {
		background-color: #fff;
		padding: 16px;
		margin-top: 8px;
		
		.benefits-content {
			font-size: 14px;
			color: #666;
			line-height: 1.6;
			margin-bottom: 8px;
			display: block;
			
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	
	// 分隔线
	.divider {
		height: 12px;
		background-color: #f5f5f5;
		margin-top: 8px;
	}
	
	// 用户评价区域
	.comments-section {
		background-color: #fff;
		padding-top: 12px;
		
		.section-title {
			font-size: 16px;
			font-weight: 500;
			color: #333;
			padding: 0 16px 12px;
		}
		
		.comment-item {
			padding: 16px;
			
			.user-info {
				display: flex;
				align-items: center;
				margin-bottom: 12px;
				
				.avatar {
					width: 36px;
					height: 36px;
					border-radius: 50%;
					background-color: #ddd;
					margin-right: 12px;
				}
				
				.username {
					font-size: 14px;
					color: #333;
				}
			}
			
			.comment-content {
				font-size: 15px;
				color: #333;
				line-height: 1.6;
				margin-bottom: 12px;
				display: block;
			}
			
			.image-container {
				display: flex;
				margin-bottom: 12px;
				
				.comment-image {
					width: 80px;
					height: 80px;
					background-color: #eee;
					border-radius: 4px;
					margin-right: 12px;
					
					&:last-child {
						margin-right: 0;
					}
				}
			}
			
			.like-section {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				
				.like-count {
					font-size: 14px;
					color: #999;
					margin-right: 4px;
				}
				
				.like-icon {
					font-size: 16px;
					cursor: pointer;
					
					&.active {
						color: #ff4757;
					}
				}
			}
		}
		
		.comment-divider {
			height: 1px;
			background-color: #eee;
			margin: 0 16px;
		}
	}
	
	// 底部固定操作按钮
	.bottom-action {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		background-color: #fff;
		padding: 8px 16px;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
		
		.apply-btn {
			height: 40px;
			width: 100%;
			background-color: #ff4757;
			color: white;
			font-size: 16px;
			font-weight: 500;
			border: none;
			border-radius: 20px;
		}
	}
}
</style>
