<template>
	<view class="container">

		<!-- 会员信息卡片 -->
		<view class="member-card">
			<view class="member-info">
				<view class="member-avatar">👤</view>
				<view class="member-details">
					<view class="member-name">{{ memberName }}</view>
					<view class="member-id">消费记录ID: {{ consumeId }}</view>
				</view>
			</view>
		</view>

		<!-- 服务日志列表 -->
		<view class="log-card">
			<view class="log-header">
				<text class="log-title">服务记录</text>
				<view class="log-header-right">
					<text class="log-count">共 {{ logList.length }} 条</text>
					<button @click="addServiceLog" class="btn-add-log">新增服务日志</button>
				</view>
			</view>

			<scroll-view scroll-y class="log-content">
				<view v-for="(log, index) in logList" :key="log.id" class="log-item">
					<view class="log-header-info">
						<view class="log-time">{{ formatTime(log.createTime) }}</view>
						<view class="log-header-right-info">
							<view class="log-creator">创建人: {{ log.createUserName || log.createUser || '未知' }}</view>
							<button @click.stop="editServiceLog(log.id)" class="btn-edit-log">编辑</button>
						</view>
					</view>
					
					<!-- 使用前图片 -->
					<view v-if="log.beforeImage && log.beforeImage.length > 0" class="log-images-section">
						<view class="images-title">使用前图片</view>
						<view class="images-grid">
							<view v-for="(image, imgIndex) in log.beforeImage" :key="imgIndex" class="image-item" @tap="previewImage(image.url)">
								<image :src="getFullImageUrl(image.url)" mode="aspectFill" class="log-image" />
							</view>
						</view>
					</view>
					
					<!-- 使用后图片 -->
					<view v-if="log.afterImage && log.afterImage.length > 0" class="log-images-section">
						<view class="images-title">使用后图片</view>
						<view class="images-grid">
							<view v-for="(image, imgIndex) in log.afterImage" :key="imgIndex" class="image-item" @tap="previewImage(image.url)">
								<image :src="getFullImageUrl(image.url)" mode="aspectFill" class="log-image" />
							</view>
						</view>
					</view>
					
					<!-- 备注 -->
					<view v-if="log.remark" class="log-remark">
						<view class="remark-label">备注:</view>
						<view class="remark-content">{{ log.remark }}</view>
					</view>
					
					<!-- 科技部备注 -->
					<view v-if="log.kjbRemark" class="log-remark">
						<view class="remark-label">科技部备注:</view>
						<view class="remark-content">{{ log.kjbRemark }}</view>
					</view>
				</view>

				<!-- 空状态 -->
				<view v-if="logList.length === 0" class="empty-state">
					<view class="empty-icon">📝</view>
					<view class="empty-text">暂无服务日志</view>
					<view class="empty-tip">该消费记录还没有服务日志</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config.js'
	import lxApi from '@/apis/modules/lx.js'
	
	export default {
		data() {
			return {
				consumeId: '',
				memberName: '',
				logList: [],
				baseUrl: ''
			}
		},
		onLoad(options) {
			// 获取传递的参数
			this.consumeId = options.consumeId || ''
			this.memberName = decodeURIComponent(options.memberName || '未知会员')
			
			// 初始化基础URL
			this.baseUrl = config.getApiBaseUrl()
			
			// 加载服务日志数据
			// this.loadServiceLogs()
		},

		onShow() {
			// 页面显示时重新加载数据，以便显示新增的服务日志
			this.loadServiceLogs()
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},

			// 新增服务日志
			addServiceLog() {
				uni.navigateTo({
					url: `/pages/addServiceLog/addServiceLog?consumeId=${this.consumeId}&memberName=${encodeURIComponent(this.memberName)}`
				})
			},

			// 编辑服务日志
			editServiceLog(logId) {
				uni.navigateTo({
					url: `/pages/addServiceLog/addServiceLog?consumeId=${this.consumeId}&memberName=${encodeURIComponent(this.memberName)}&logId=${logId}&mode=edit`
				})
			},

			// 加载服务日志
			async loadServiceLogs() {
				try {
					if (!this.consumeId) {
						console.warn('消费记录ID为空，无法加载服务日志')
						return
					}
					
					const res = await lxApi.getServiceLogsByConsumeId(this.consumeId)
					
					if (res.code === 200 && res.data) {
						this.logList = res.data.map(log => ({
							id: log.id,
							consumeId: log.consumeId,
							beforeImage: this.parseImageJson(log.beforeImage),
							afterImage: this.parseImageJson(log.afterImage),
							remark: log.remark,
							kjbRemark: log.kjbRemark,
							createUser: log.createUser,
							createUserName: log.createUserName,
							createTime: log.createTime,
							updateTime: log.updateTime
						}))
					} else {
						this.logList = []
					}
				} catch (error) {
					console.error('加载服务日志失败:', error)
					this.logList = []
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				}
			},

			// 解析图片JSON字符串
			parseImageJson(imageJson) {
				try {
					if (!imageJson) return []
					return JSON.parse(imageJson)
				} catch (error) {
					console.error('解析图片JSON失败:', error)
					return []
				}
			},

			// 格式化时间
			formatTime(timestamp) {
				if (!timestamp) return '无'
				const date = new Date(timestamp)
				return date.toLocaleString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit'
				})
			},

			// 获取完整图片URL
			getFullImageUrl(url) {
				if (!url) return ''
				// 如果URL已经是完整路径，直接返回
				if (url.startsWith('http')) {
					return url
				}
				// 如果是相对路径，拼接基础URL
				return this.baseUrl + url
			},

			// 预览图片
			previewImage(url) {
				if (!url) return
				const fullUrl = this.getFullImageUrl(url)
				uni.previewImage({
					urls: [fullUrl],
					current: fullUrl
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
		padding: 40rpx;
		box-sizing: border-box;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.back-btn {
		display: flex;
		align-items: center;
		background: #fff;
		border: none;
		border-radius: 24rpx;
		padding: 16rpx 24rpx;
		color: #388e3c;
		font-size: 28rpx;
		box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.15);
		transition: all 0.2s ease;
	}

	.back-btn:active {
		transform: scale(0.95);
	}

	.back-icon {
		font-size: 32rpx;
		margin-right: 8rpx;
	}

	.back-text {
		font-size: 28rpx;
	}

	.header-title {
		text-align: center;
		color: #388e3c;
		font-size: 36rpx;
		font-weight: bold;
		letter-spacing: 4rpx;
		flex: 1;
	}

	.header-placeholder {
		width: 120rpx;
	}

	.member-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.1);
		padding: 40rpx;
		margin-bottom: 40rpx;
	}

	.member-info {
		display: flex;
		align-items: center;
	}

	.member-avatar {
		width: 80rpx;
		height: 80rpx;
		background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		margin-right: 24rpx;
	}

	.member-details {
		flex: 1;
	}

	.member-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #2e7d32;
		margin-bottom: 8rpx;
	}

	.member-id {
		font-size: 24rpx;
		color: #6a9c6a;
	}

	.log-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.1);
		overflow: hidden;
		flex: 1;
	}

	.log-header {
		background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
		padding: 32rpx 40rpx;
		color: #fff;
		font-weight: 600;
		letter-spacing: 2rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.log-header-right {
		display: flex;
		align-items: center;
		gap: 24rpx;
	}

	.log-title {
		font-size: 32rpx;
	}

	.log-count {
		font-size: 28rpx;
		opacity: 0.9;
	}

	.log-content {
		max-height: calc(100vh - 400rpx);
		overflow-y: auto;
	}

	.log-item {
		padding: 32rpx 40rpx;
		border-bottom: 2rpx solid #f0f0f0;
		position: relative;
	}

	.log-item:last-child {
		border-bottom: none;
	}

	.log-time {
		font-size: 24rpx;
		color: #6a9c6a;
		margin-bottom: 12rpx;
	}

	.log-content-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
		margin-bottom: 12rpx;
	}

	.log-staff {
		font-size: 24rpx;
		color: #2e7d32;
		font-weight: 500;
	}

	.empty-state {
		text-align: center;
		padding: 120rpx 40rpx;
		color: #6a9c6a;
	}

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 32rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 32rpx;
		margin-bottom: 16rpx;
	}

	.empty-tip {
		font-size: 28rpx;
		opacity: 0.7;
	}

	.btn-add-log {
		background: rgba(255, 255, 255, 0.2);
		border: 2rpx solid rgba(255, 255, 255, 0.3);
		border-radius: 20rpx;
		padding: 12rpx 24rpx;
		color: #fff;
		font-size: 24rpx;
		font-weight: 500;
		transition: all 0.2s ease;
	}

	.btn-add-log:active {
		background: rgba(255, 255, 255, 0.3);
		transform: scale(0.95);
	}

	/* 服务日志项目样式 */
	.log-header-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
		padding-bottom: 12rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.log-header-right-info {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.log-creator {
		font-size: 24rpx;
		color: #6a9c6a;
	}

	.btn-edit-log {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		border: none;
		border-radius: 12rpx;
		padding: 8rpx 20rpx;
		color: #fff;
		font-size: 22rpx;
		font-weight: 500;
		transition: all 0.2s ease;
	}

	.btn-edit-log:active {
		transform: scale(0.95);
		opacity: 0.8;
	}

	.log-images-section {
		margin-bottom: 24rpx;
	}

	.images-title {
		font-size: 26rpx;
		color: #2e7d32;
		font-weight: 600;
		margin-bottom: 12rpx;
	}

	.images-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
	}

	.image-item {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		overflow: hidden;
		// border: 2rpx solid #e0e0e0;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.image-item:active {
		transform: scale(0.95);
		border-color: #4caf50;
	}

	.log-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.log-remark {
		background: #f9fff9;
		border: 2rpx solid #c8e6c9;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-top: 16rpx;
	}

	.remark-label {
		font-size: 26rpx;
		color: #2e7d32;
		font-weight: 600;
		margin-bottom: 8rpx;
	}

	.remark-content {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}
</style>
