<template>
	<view class="page">
		<view class="header">
			<view class="back-btn" @click="goBack">
				<image src="/static/images/chat_return.png" mode="widthFix"></image>
			</view>
			<view class="title">聊天背景</view>
		</view>
		
		<view class="content">
			<!-- 当前背景预览 -->
			<view class="current-bg-section">
				<view class="section-title">当前背景</view>
				<view class="current-bg-preview">
					<image 
						:src="currentBackground || defaultBackgrounds[0].url" 
						mode="aspectFill"
						class="preview-image">
					</image>
				</view>
			</view>
			
			<!-- 默认背景 -->
			<view class="bg-section">
				<view class="section-title">默认背景</view>
				<view class="bg-grid">
					<view 
						v-for="(bg, index) in defaultBackgrounds" 
						:key="index"
						class="bg-item"
						:class="{ 'active': currentBackground === bg.url }"
						@click="selectBackground(bg.url)">
						<image :src="bg.url" mode="aspectFill" class="bg-image"></image>
						<view class="check-icon" v-if="currentBackground === bg.url">
							<image src="/static/images/selectA.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 自定义背景 (VIP功能) -->
			<view class="bg-section">
				<view class="section-title">
					<text>自定义背景</text>
					<text class="vip-tag">VIP</text>
				</view>
				<view class="bg-grid">
					<!-- 已上传的自定义背景 -->
					<view 
						v-for="(bg, index) in customBackgrounds" 
						:key="'custom-' + index"
						class="bg-item"
						:class="{ 'active': currentBackground === bg }"
						@click="selectBackground(bg)">
						<image :src="bg" mode="aspectFill" class="bg-image"></image>
						<view class="check-icon" v-if="currentBackground === bg">
							<image src="/static/images/selectA.png" mode="widthFix"></image>
						</view>
						<view class="delete-icon" @click.stop="deleteCustomBg(index)">
							<image src="/static/images/close.png" mode="widthFix"></image>
						</view>
					</view>
					
					<!-- 上传按钮 -->
					<view class="bg-item upload-item" @click="uploadCustomBg">
						<view class="upload-icon">+</view>
						<view class="upload-text">上传背景</view>
					</view>
				</view>
			</view>
			
			<!-- 保存按钮 -->
			<view class="save-btn" @click="saveBackground">保存设置</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			session_id: '',
			currentBackground: '', // 当前选中的背景
			originalBackground: '', // 原始背景，用于取消时恢复
			// 默认背景列表
			defaultBackgrounds: [
				{
					name: '默认',
					url: 'https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/39c6f8899c15f60fc59207835f95e07a.png'
				},
				{
					name: '粉色渐变',
					url: 'https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/008a06f2c3fccdac714f25e6577ccdc4.png'
				},
				{
					name: '紫色梦幻',
					url: 'https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251231/a6d2dae70029b6465ea1f1f605f77258.png'
				},
				{
					name: '蓝色清新',
					url: 'https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251231/69c72922c0e815086a30c370e7dbb42f.png'
				}
			],
			// 自定义背景列表
			customBackgrounds: []
		}
	},
	onLoad(options) {
		this.session_id = options.session_id || '';
		this.loadBackground();
	},
	methods: {
		// 加载当前背景设置
		loadBackground() {
			// 从本地存储加载
			const savedBg = uni.getStorageSync('chat_background');
			const customBgs = uni.getStorageSync('custom_backgrounds');
			
			if (savedBg) {
				this.currentBackground = savedBg;
				this.originalBackground = savedBg;
			} else {
				this.currentBackground = this.defaultBackgrounds[0].url;
				this.originalBackground = this.defaultBackgrounds[0].url;
			}
			
			if (customBgs) {
				this.customBackgrounds = JSON.parse(customBgs);
			}
		},
		
		// 选择背景
		selectBackground(url) {
			this.currentBackground = url;
		},
		
		// 上传自定义背景
		uploadCustomBg() {
			// TODO: 检查VIP权限
			const userInfo = uni.getStorageSync('userinfo');
			// if (!userInfo.is_vip) {
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '自定义背景是VIP专属功能，是否前往开通VIP？',
			// 		success: (res) => {
			// 			if (res.confirm) {
			// 				// 跳转到VIP页面
			// 			}
			// 		}
			// 	});
			// 	return;
			// }
			
			uni.chooseImage({
				count: 1,
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempFilePath = res.tempFilePaths[0];
					
					uni.showLoading({
						title: '上传中...'
					});
					
					// 使用现有的上传接口
					uni.uploadFile({
						url: this.baseURL + '/api/common/upload',
						header: {
							token: uni.getStorageSync("token") || "",
							'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
						},
						filePath: tempFilePath,
						name: 'file',
						success: (uploadRes) => {
							uni.hideLoading();
							const data = JSON.parse(uploadRes.data);
							if (data.code === 1) {
								const imageUrl = data.data.fullurl;
								this.customBackgrounds.push(imageUrl);
								// 保存到本地存储
								uni.setStorageSync('custom_backgrounds', JSON.stringify(this.customBackgrounds));
								uni.showToast({
									title: '上传成功',
									icon: 'success'
								});
							} else {
								uni.showToast({
									title: data.msg || '上传失败',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							uni.hideLoading();
							console.error('上传失败', err);
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
						}
					});
				}
			});
		},
		
		// 删除自定义背景
		deleteCustomBg(index) {
			uni.showModal({
				title: '提示',
				content: '确定要删除这个背景吗？',
				success: (res) => {
					if (res.confirm) {
						const deletedBg = this.customBackgrounds[index];
						this.customBackgrounds.splice(index, 1);
						// 保存到本地存储
						uni.setStorageSync('custom_backgrounds', JSON.stringify(this.customBackgrounds));
						
						// 如果删除的是当前背景，切换到默认背景
						if (this.currentBackground === deletedBg) {
							this.currentBackground = this.defaultBackgrounds[0].url;
						}
						
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
					}
				}
			});
		},
		
		// 保存背景设置
		saveBackground() {
			uni.setStorageSync('chat_background', this.currentBackground);
			uni.showToast({
				title: '保存成功',
				icon: 'success',
				duration: 1500
			});
			
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		},
		
		// 返回
		goBack() {
			// 如果背景有改变但未保存，提示用户
			if (this.currentBackground !== this.originalBackground) {
				uni.showModal({
					title: '提示',
					content: '背景设置未保存，确定要返回吗？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack();
						}
					}
				});
			} else {
				uni.navigateBack();
			}
		}
	},
	computed: {
		baseURL() {
			return 'http://127.0.0.1:8080';
		}
	}
}
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: #f5f5f5;
}

.header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 30rpx;
	background: #fff;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.back-btn {
	position: absolute;
	left: 30rpx;
	width: 48rpx;
	height: 48rpx;
}

.back-btn image {
	width: 100%;
	height: 100%;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.content {
	padding: 30rpx;
}

.current-bg-section {
	margin-bottom: 40rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
}

.vip-tag {
	margin-left: 10rpx;
	padding: 4rpx 12rpx;
	background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
	color: #fff;
	font-size: 20rpx;
	border-radius: 8rpx;
}

.current-bg-preview {
	width: 100%;
	height: 400rpx;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.preview-image {
	width: 100%;
	height: 100%;
}

.bg-section {
	margin-bottom: 40rpx;
}

.bg-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
}

.bg-item {
	position: relative;
	width: 100%;
	height: 200rpx;
	border-radius: 15rpx;
	overflow: hidden;
	border: 4rpx solid transparent;
	transition: all 0.3s;
}

.bg-item.active {
	border-color: #9F47FF;
	box-shadow: 0 4rpx 12rpx rgba(159, 71, 255, 0.3);
}

.bg-image {
	width: 100%;
	height: 100%;
}

.check-icon {
	position: absolute;
	top: 10rpx;
	right: 10rpx;
	width: 40rpx;
	height: 40rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.check-icon image {
	width: 30rpx;
	height: 30rpx;
}

.delete-icon {
	position: absolute;
	top: 10rpx;
	left: 10rpx;
	width: 40rpx;
	height: 40rpx;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.delete-icon image {
	width: 20rpx;
	height: 20rpx;
}

.upload-item {
	background: #fff;
	border: 2rpx dashed #ccc;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.upload-icon {
	font-size: 60rpx;
	color: #999;
	line-height: 1;
}

.upload-text {
	font-size: 24rpx;
	color: #999;
	margin-top: 10rpx;
}

.save-btn {
	width: 100%;
	padding: 30rpx;
	background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
	color: #fff;
	text-align: center;
	border-radius: 50rpx;
	font-size: 32rpx;
	font-weight: bold;
	margin-top: 40rpx;
}
</style>
