<template>
	<view class="add-repair-container">
		<!-- 可滚动内容区 -->
		<view class="add-repair-scroll-content">
			<!-- 地址选择 -->
			<view class="add-repair-section">
				<view class="add-repair-address-btn">
					<view class="add-repair-address-text">请选择房屋所在地址</view>
					<image class="add-repair-address-img" src="/static/ic_add_repair_01.png" />
				</view>
				<view class="add-repair-detail">
					<view class="add-repair-detail1">详细地址  </view>
					<view class="add-repair-detail2">例1栋2单元101室1</view>
				</view>
			</view>
			<!-- 报事报修类型 -->
			<view class="add-repair-section2">
				<view class="add-repair-label">报事报修</view>
				<view class="add-repair-type-list">
					<view v-for="(item, idx) in repairTypes" :key="idx"
						:class="['add-repair-type-btn', selectedType === item ? 'selected' : '']"
						@click="selectType(item)">{{ item }}</view>
				</view>
				<view class="add-repair-label2">其他服务</view>
				<view class="add-repair-type-list">
					<view v-for="(item, idx) in otherTypes" :key="idx" class="add-repair-type-btn">{{ item }}</view>
				</view>
			</view>
			
			<!-- 问题详情 -->
			<view class="add-repair-section">
				<view class="add-repair-label">问题详情 <text class="add-repair-optional">(非必填)</text></view>
				<textarea class="add-repair-detail-textarea" placeholder="如果以上报事不能解决您的问题，可以在这里填写说明" />
			</view>
			<!-- 上传照片 -->
			<view class="add-repair-section">
				<view class="add-repair-label">上传照片 <text class="add-repair-optional">(非必填，最多三张)</text></view>
				<view class="add-repair-upload-list">
					<!-- 修改部分：添加点击事件和图片预览 -->
					<view 
						class="add-repair-upload-box" 
						@click="handleImageUpload"
					>
						<view class="add-repair-upload-plus">+</view>
						<view class="add-repair-upload-text">上传图片</view>
					</view>
					<!-- 显示已选图片 -->
					<view v-for="(image, index) in selectedImages" :key="index" class="add-repair-upload-box">
						<image :src="image.path" class="add-repair-upload-image" @click.stop="previewImage(image.path)" />
					</view>
				</view>
			</view>
			<!-- 提交按钮 -->
			<button class="add-repair-submit-btn" @click="goRepaired">提交</button>
		</view>
	</view>
</template>

<script>
// 导入MediaSelector和MediaType
import MediaSelector, { MediaType } from '@/utils/mediaSelector';

export default {
	data() {
		return {
			repairTypes: ['安装挂件', '维修下水', '维修水阀', '疏通管道', '维修线路', '更换灯泡', '维修门窗', '其他维修'],
			otherTypes: ['园区安保', '通水通电', '维修线路'],
			selectedType: '更换灯泡',
			selectedImages: [] // 存储已选图片
		}
	},
	methods: {
		selectType(item) {
			this.selectedType = item;
		},
		// 新增：处理图片上传
		async handleImageUpload() {
			try {
				// 调用MediaSelector选择图片，最多选择3张
				const images = await MediaSelector.choose({
					type: MediaType.IMAGE,
					count: 3 - this.selectedImages.length // 根据剩余数量选择
				});
				// 将选择的图片添加到selectedImages数组
				this.selectedImages = [...this.selectedImages, ...images];
			} catch (error) {
	
			}
		},
		// 预览图片
		previewImage(path) {
			MediaSelector.preview(path, MediaType.IMAGE);
		},
		goRepaired(){
			uni.navigateTo({ url: '/pages/mine/myRepair/repaired' });
		}
	}
}
</script>

<style scoped>
	.add-repair-container {
		height: 100vh;
		background: #f7f7f7;
		display: flex;
		flex-direction: column;
	}

	.add-repair-back {
		position: absolute;
		left: 37rpx;
		width: 15rpx;
		height: 33rpx;
	}

	.add-repair-title {
		font-size: 36rpx;
		color: #000;
		font-weight: 500;
	}

	.add-repair-scroll-content {
		flex: 1;
		overflow-y: auto;
		padding-bottom: 40rpx;
	}

	.add-repair-section {
		background: #fff;
		border-radius: 12rpx;
		margin: 22rpx 30rpx 0 30rpx;
		padding: 24rpx 46rpx 24rpx 44rpx;
	}
	
	.add-repair-section2 {
		background: #fff;
		border-radius: 12rpx;
		margin: 22rpx 30rpx 0 30rpx;
		padding: 24rpx 26rpx 24rpx 26rpx;
	}

	.add-repair-address-btn {
		width: 100%;
		height: 48rpx;
		background: #fff;
		border: 2rpx solid #2186FF;
		border-radius: 8rpx;
		margin-bottom: 30rpx;
		padding-left: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-repair-address-text {
		font-size: 24rpx;
		color: #007CFF;
		margin-right: 15rpx;
	}

	.add-repair-address-img {
		width: 11rpx;
		height: 21rpx;
	}

	.add-repair-detail {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.add-repair-detail1 {
		font-size: 26rpx;
		font-weight: bold;
		color: #000;
	}
	
	.add-repair-detail2 {
		font-size: 24rpx;
		color: #676767;
		margin-left: 39rpx;
	}
	.add-repair-label {
		font-size: 32rpx;
		color: #000000;
		font-weight: 500;
		margin-bottom: 41rpx;
	}
	
	.add-repair-label2 {
		font-size: 32rpx;
		color: #000000;
		font-weight: 500;
		margin-bottom: 25rpx;
		margin-top: 25rpx;
	}
	

	.add-repair-type-list {
		display: flex;
		flex-wrap: wrap;
		gap: 28rpx 21rpx;
	}

	.add-repair-type-btn {
		flex: 0 0 calc((100% - 42rpx) / 3);
		box-sizing: border-box;
		height: 73rpx;
		background: #F2F7FF;
		color: #2186FF;
		font-size: 26rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
	}

	.add-repair-type-btn.selected {
		background: #2186FF;
		color: #fff;
		border: 2rpx solid #2186FF;
	}

	.add-repair-type-btn.dashed {
		border: 2rpx dashed #BDBDBD;
		background: #fff;
		color: #2186FF;
	}

	.add-repair-optional {
		color: #888;
		font-size: 24rpx;
		font-weight: 400;
	}

	.add-repair-detail-textarea {
		width: 75vw;
		min-height: 120rpx;
		background: #F7F8FA;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #888;
		padding: 18rpx;
		margin-top: 18rpx;
	}

	.add-repair-upload-list {
		display: flex;
		gap: 18rpx;
		margin-top: 18rpx;
	}

	.add-repair-upload-box {
		width: 140rpx;
		height: 140rpx;
		border: 2rpx dashed #BDBDBD;
		border-radius: 8rpx;
		background: #fafbfc;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.add-repair-upload-plus {
		font-size: 60rpx;
		color: #BDBDBD;
		margin-bottom: 8rpx;
	}

	.add-repair-upload-text {
		font-size: 24rpx;
		color: #888;
	}

	.add-repair-submit-btn {
		width: 90vw;
		height: 80rpx;
		background: linear-gradient(90deg, #2186FF 0%, #4FC3F7 100%);
		color: #fff;
		font-size: 32rpx;
		border: none;
		border-radius: 40rpx;
		margin: 48rpx auto 0 auto;
		display: block;
		font-weight: bold;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.18);
	}
	
	/* 新增图片预览样式 */
	.add-repair-upload-image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
		object-fit: cover;
	}

</style>