<template>
	<view class="page">

		<!-- 预警信息卡片 -->
		<view class="card">
			<view class="card-header">预警信息</view>
			<view class="card-content">
				<view class="info-item" v-for="(item, index) in warnInfoList" :key="index">
					<text class="label">{{ item.label }}：</text>
					<text class="value">{{ item.value || '-' }}</text>
				</view>
			</view>
		</view>

		<!-- 处理情况卡片 -->
		<view class="card" style="margin-top: 30rpx;">
			<view class="card-header">处理情况</view>
			<view class="card-content">

				<!-- 处理状态输入框 -->
				<view class="form-item" @click="showStatusPopup = true">
					<text class="form-label">处理状态：</text>
					<view class="select-input">{{ handleStatus || '请选择状态' }}</view>
				</view>

				<!-- 处理情况描述 -->
				<view class="form-item">
					<text class="form-label">处理情况描述：</text>
					<textarea class="textarea" placeholder="请输入描述" v-model="handleDesc" auto-height></textarea>
				</view>

				<!-- 上传照片 -->
				<view >
					<view class="add-warn-label">上传照片 <text class="add-warn-optional">(非必填，最多三张)</text></view>
					<u-upload :fileList="selectedImages" @delete="deletePic" name="upload" multiple maxCount="3"
						width="180" height="180" :autoUpload="false"></u-upload>
				</view>

			</view>
		</view>

		<!-- 底部提交按钮 -->
		<view class="btn-box">
			<button class="submit-btn" @click="submit">去上报</button>
		</view>

		<!-- 底部状态选择弹窗 -->
		<view v-if="showStatusPopup" class="popup-mask" @click.self="showStatusPopup = false">
			<view class="popup">
				<view class="popup-item" v-for="(status, i) in statusList" :key="i" @click="selectStatus(status)">
					{{ status }}</view>
				<view class="popup-cancel" @click="showStatusPopup = false">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				warnInfo: {
					code: "KJG-24124",
					type: "越界侦测",
					deviceName: "设备1111",
					deviceLocation: "角落里",
					level: "紧急",
					warnTime: "2025-06-12 15:04:28",
					sendTime: "2025-06-12 15:04:28",
					desc: "这里是预警的描述内容，确保内容正常显示。"
				},
				handleStatus: '',
				handleDesc: '',
				fileList: [],
				showStatusPopup: false,
				statusList: ['未处理', '处理中', '已处理'],
				selectedImages: [] // 存储已选图片
			};
		},
		computed: {
			warnInfoList() {
				return [{
						label: "预警编码",
						value: this.warnInfo.code
					},
					{
						label: "预警类型",
						value: this.warnInfo.type
					},
					{
						label: "设备名称",
						value: this.warnInfo.deviceName
					},
					{
						label: "设备位置",
						value: this.warnInfo.deviceLocation
					},
					{
						label: "预警级别",
						value: this.warnInfo.level
					},
					{
						label: "预警时间",
						value: this.warnInfo.warnTime
					},
					{
						label: "下发时间",
						value: this.warnInfo.sendTime
					},
					{
						label: "预警描述",
						value: this.warnInfo.desc
					}
				];
			}
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this.selectedImages.splice(event.index, 1);
			},

			selectStatus(status) {
				this.handleStatus = status;
				this.showStatusPopup = false;
			},
			async submit() {
				if(this.selectedImages.length<=0){
					this.realSubmit()
					return
				}
				// 遍历selectedImages数组并处理图片路径
				const images = this.selectedImages.map(item => item.path.replace('file://', ''));
				const result = await uploadFiles({
					files: images,
					url: this.vuex_config.baseUrl + '/resource/oss/upload',
					name: 'file',
					vm: this // 关键：用于注入 token 等
				});
				
				if (result.code == '200') {
					// 遍历result获取data.url加上,分割
					const urls = result.map(item => item.data?.url || '').filter(url => url !== '');
					this.repairInfo.orderImgUrl = urls.join(',');
					this.realSubmit()
				}
			},
			
			async realSubmit(){
				let res = await this.$u.api.addOrder2(this.repairInfo);
				if (res.code == '200') {
					// 关闭页面前发送事件通知前页面刷新
					uni.$emit('refreshData', '');
					// 返回上一页
					uni.navigateBack();
				}
			}
		}
	};
</script>

<style scoped>
	.page {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx 30rpx 20rpx 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
	}

	.card-header {
		font-size: 32rpx;
		font-weight: 700;
		color: #333;
		margin-bottom: 20rpx;
	}

	.card-content {
		border-top: 1rpx solid #eee;
		padding-top: 20rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 18rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.label {
		font-weight: 600;
		color: #666;
		font-size: 28rpx;
	}

	.value {
		color: #333;
		max-width: 70%;
		font-size: 28rpx;
		text-align: right;
		word-break: break-word;
	}

	.form-item {
		margin-bottom: 30rpx;
	}

	.form-label {
		font-weight: 700;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 12rpx;
	}

	.select-input {
		border: 1rpx solid #ccc;
		border-radius: 12rpx;
		height: 64rpx;
		line-height: 64rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #999;
	}

	.textarea {
		width: 100%;
		min-height: 160rpx;
		border: 1rpx solid #ccc;
		border-radius: 12rpx;
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		resize: none;
		box-sizing: border-box;
	}

	.image-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.preview-image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 12rpx;
	}

	.upload-btn {
		width: 140rpx;
		height: 140rpx;
		border-radius: 12rpx;
		background: #eee;
		font-size: 60rpx;
		color: #999;
		line-height: 140rpx;
		text-align: center;
		user-select: none;
		border: none;
	}

	.btn-box {
		margin-top: 40rpx;
		text-align: center;
	}

	.submit-btn {
		width: 100%;
		background-color: #007aff;
		color: white;
		font-size: 32rpx;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 36rpx;
		border: none;
		cursor: pointer;
	}

	.popup-mask {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		justify-content: center;
		align-items: flex-end;
		z-index: 9999;
	}

	.popup {
		width: 100%;
		background: #fff;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: 40rpx;
	}

	.popup-item {
		font-size: 32rpx;
		padding: 30rpx 0;
		text-align: center;
		border-bottom: 1rpx solid #eee;
		color: #007aff;
	}

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

	.popup-cancel {
		font-size: 32rpx;
		color: #999;
		text-align: center;
		padding: 30rpx 0;
		margin-top: 20rpx;
		border-top: 1rpx solid #eee;
	}

	.add-warn-optional {
		color: #888;
		font-size: 24rpx;
		font-weight: 400;
	}
	.add-warn-label {
		font-size: 32rpx;
		color: #000000;
		font-weight: 500;
		margin-bottom: 41rpx;
	}
</style>