<template>
	<view class="inspection-opt-container">
		<view class="inspection-opt-lable"> 巡检人
			<view class="inspection-opt-round" />
			<text class="text">{{info.planInspectionPerson}}</text>
		</view>
		<view class="inspection-opt-lable"> 巡检位置
			<text class="required">*</text>
		</view>
		<view class="inspection-opt-row">
			<text class="text2">{{info.inspectionLocation}}</text>
		</view>
		<view class="inspection-opt-lable"> 巡检结果
			<text class="required">*</text>
			<view :class="info.inspectionResults == 1?'inspection-opt-round4':'inspection-opt-round2'"/>
			<text class="text">正常</text>
			<view :class="info.inspectionResults != 1?'inspection-opt-round3':'inspection-opt-round2'" />
			<text class="text"> 异常</text>
		</view>
		<view class="inspection-opt-lable"> 巡检描述
			<text class="required">*</text>
		</view>
		<text class="input" >{{ info.remark }}</text>

		<!-- 上传照片 -->
		<view class="page">
			<!-- 已选图片预览 -->
			<view class="preview-item">
				<image :src="selectedImage" mode="aspectFill" @click="previewImage"></image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					inspectionResults: 1 // 默认选中"正常"
				},
				selectedImage: '',
				isSign: false,
				showDialog: false // 控制弹窗显示
			}
		},
		onLoad(options) {
			if (options.item) {
				try {
					// 首先尝试解析原始字符串（可能未编码）
					const item = JSON.parse(options.item);
					this.info = item;
				} catch (e) {
					// 如果直接解析失败，再尝试解码后解析
					try {
						const item = JSON.parse(decodeURIComponent(options.item));
						this.info = item;
					} catch (e2) {
						this.info = options.item;
					}
				}
				this.isSign = this.info.actualSignState == 1
			}
		},
		methods: {


			// 预览图片
			previewImage() {
				uni.previewImage({
					current: this.selectedImage,
					urls: [this.selectedImage]
				})
			},

			// 切换巡检结果状态
			toggleInspectionResult(result) {
				// 使用$set确保响应式更新
				this.$set(this.info, 'inspectionResults', result);
			},
			beforeSubmit() {
				if (this.info.inspectionResults == 1) {
					// 直接提交
					this.submit();
				} else {
					// 弹窗显示，生成工单提交
					this.showDialog = true;
				}
			},
			closeDialog() {
				this.showDialog = false;
			},
			confirmDialog() {
				this.showDialog = false;
				// 生成工单提交
				this.submit();
			},

			async taskSignIn() {

				uni.scanCode({
					success: async (scanRes) => {
						// 使用扫码结果调用接口
						let params = {
							taskId: this.info.id,
							qrCode: scanRes.result // 将扫码结果作为参数传递
						};
						if (scanRes.result == this.info.pointId) {
							uni.showLoading({
								title: '加载中...'
							});
							this.info.signType = 3
							let res = await this.$u.api.taskSignIn(this.info);

							// 隐藏loading
							uni.hideLoading();

							if (res.code == 200) {
								this.isSign = true
								uni.showToast({
									title: '签到成功',
									icon: 'none'
								});
							} else {
								uni.showToast({
									title: res.msg || '签到失败',
									icon: 'none'
								});
							}
						}else{
							uni.showToast({
								title: '当前签到巡检点不是目标点',
								icon: 'none'
							});
						}
					},
					fail: (error) => {
						// 扫码失败处理
						uni.showToast({
							title: '扫码失败，请重试',
							icon: 'none'
						});
					}
				});
			},
			async submit() {
				// 显示loading
				uni.showLoading({
					title: '提交中...'
				});

				if (!this.selectedImage) {
					this.realSubmit()
					return
				}
				const images = [];
				images.push(this.selectedImage?.path?.replace('file://', '') || this.selectedImage);
				if (images.length === 0) {
					this.realSubmit();
					return;
				}

				const result = await uploadFiles({
					files: images,
					url: this.vuex_config.baseUrl + '/resource/oss/upload',
					name: 'file',
					vm: this // 关键：用于注入 token 等
				});
				const allSuccess = result.every(item => item.code == 200);
				if (!allSuccess) {
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					});
					// 隐藏loading
					uni.hideLoading();
					return;
				}

				// 遍历result获取data.url加上,分割
				const urls = result.map(item => item.data?.url || '').filter(url => url !== '');
				this.info.inspectionImage = urls.join(',');
				this.realSubmit()

			},

			async realSubmit() {
				let res = await this.$u.api.taskSubmit(this.info);
				if (res.code == '200') {
					// 关闭页面前发送事件通知前页面刷新
					uni.$emit('refreshData', '');
					// 返回上一页
					uni.navigateBack();
				}
				// 隐藏loading
				uni.hideLoading();
			},
		}
	}
</script>

<style scoped>
	.inspection-opt-container {
		height: 100vh;
		background: #fff;
		display: flex;
		flex-direction: column;
	}

	.inspection-opt-lable {
		font-size: 32rpx;
		color: #000000;
		font-weight: 600;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 40rpx;
		margin-top: 45rpx;
	}

	.inspection-opt-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 34rpx;
	}

	.required {
		color: #DC9100;
		margin-left: 10rpx;
	}

	.text {
		color: #000000;
		font-size: 24rpx;
		margin-left: 10rpx;
		font-weight: 400;
	}

	.text2 {
		height: 73rpx;
		flex: 1;
		background: #F7F7F7;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.text3 {
		width: 88rpx;
		height: 73rpx;
		background: #296AEF;
		border-radius: 10rpx;
		color: #F7F7F7;
		text-align: center;
		margin-left: 18rpx;
		line-height: 73rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.input {
		height: 200rpx;
		width: auto;
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 40rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #000000;
		padding: 15rpx;
	}

	.image {
		width: 55rpx;
		height: 42rpx;
	}

	.inspection-opt-round {
		width: 34rpx;
		height: 34rpx;
		border-radius: 17rpx;
		background: #3370FF;
		margin-left: 35rpx;
	}

	.inspection-opt-round2 {
		width: 34rpx;
		height: 34rpx;
		border-radius: 17rpx;
		background: #fff;
		margin-left: 24rpx;
		border: 1rpx solid #3370FF;
	}

	.inspection-opt-round3 {
		width: 34rpx;
		height: 34rpx;
		border-radius: 17rpx;
		background: #F27A0F;
		margin-left: 24rpx;
	}
	
	.inspection-opt-round4 {
		width: 34rpx;
		height: 34rpx;
		border-radius: 17rpx;
		background: #3370FF;
		margin-left: 24rpx;
	}

	.custom-upload-btn {
		width: auto;
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 24rpx;
		height: 244rpx;
		background: #f6f6f6;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx;
	}

	.preview-item {
		position: relative;
		width: auto;
		/* 宽度自动 */
		margin-left: 40rpx;
		margin-right: 40rpx;
		height: 244rpx;
		margin-top: 24rpx;
		/* 固定高度 */
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		overflow: hidden;
		/* 裁剪超出部分 */
		border-radius: 10rpx;
		/* 可选：圆角 */
	}

	.delete-btn {
		position: absolute;
		top: 0;
		right: 0;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		font-size: 24rpx;
	}

	/* 隐藏自带按钮 */
	::v-deep .u-upload__wrap__add {
		display: none !important;
	}

	.inspection-opt-submit-btn {
		width: 60vw;
		height: 73rpx;
		background: linear-gradient(90deg, #005DE9 0%, #4B9BFF 100%);
		color: #fff;
		font-size: 32rpx;
		border: none;
		border-radius: 40rpx;
		margin: 100rpx auto 0 auto;
		display: block;
		font-weight: bold;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.18);
	}

	/* 弹窗遮罩 */
	.custom-dialog {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	/* 弹窗背景图 */
	.dialog-bg {
		position: absolute;
		width: 656rpx;
		height: 560rpx;
		border-radius: 16rpx;
	}

	/* 弹窗内容覆盖在图片上 */
	.dialog-content {
		position: relative;
		width: 80vw;
		margin-top: 220rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		z-index: 10;
	}

	.dialog-title {
		font-size: 42rpx;
		font-weight: bold;
		color: #000;
		margin-bottom: 40rpx;
	}

	.dialog-desc {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 100rpx;
	}

	.dialog-btns {
		display: flex;
		width: 100%;
		justify-content: space-around;
	}

	.btn-cancel,
	.btn-confirm {

		font-size: 36rpx;
	}

	.btn-cancel {
		color: #333;
	}

	.btn-confirm {
		color: #FF6B00;
	}
</style>