<template>
	<view class=" page padding">
		<view class="padding radius bg-white list-list margin-bottom" v-for="item in hiddenDangerList"
			:key="item.hazardId">
			<view class="flex justify-between margin-bottom">
				<view class="text-bold text-black">{{item.title}}</view>
				<view class="text-blue">{{item.statusName}}</view>
			</view>
			<view class="flex margin-bottom">
				<view class="text-gray">隐患等级：</view>
				<view class="level-tag" :class="{
					'level-minor': item.levelName === '轻微隐患',
					'level-normal': item.levelName === '一般隐患',
					'level-major': item.levelName === '重大隐患'
				}">{{item.levelName}}</view>
			</view>
			<view class="flex margin-bottom">
				<view class="text-gray" style="white-space: nowrap;">隐患位置：</view>
				<view class="text-black">{{item.address}}</view>
			</view>
			<view class="flex margin-bottom">
				<view class="text-gray">创建时间：</view>
				<view class="text-black">{{item.createdAt}}</view>
			</view>
			<view class="flex justify-end" style="gap: 10rpx;">
				<!-- 所有状态都显示查看详情 -->
				<button class="round cu-btn lg light bg-blue" @click="details(item)">查看详情</button>
				<!-- 待整改、待验收显示立即整改 -->
				<button v-if="item.statusName === '待整改' || item.statusName === '待验收'" 
					class="round cu-btn lg light bg-blue" @click="Rectification(item)">立即整改</button>
				<!-- 待验收显示立即验收 -->
				<button v-if="item.statusName === '待验收'" 
					class="round cu-btn lg bg-blue" @click="acceptance(item)">立即验收</button>
				<!-- 待交办显示隐患交办 -->
				<button v-if="item.statusName === '待交办'" 
					class="round cu-btn lg bg-blue" @click="assignHazard(item)">隐患交办</button>
			</view>
		</view>
		<button class="cuIcon-add round bg-blue margin-top-xl" @click="showAddPopup = true">新增</button>

		<!-- 新增弹窗 -->
		<u-popup :show="showAddPopup" mode="center" round="20" @close="showAddPopup = false">
			<view class="popup-content">
				<view class="popup-header">
					<view class="popup-title text-bold">新增隐患排查</view>
					<view class="popup-close" @click="showAddPopup = false">×</view>
				</view>
				<view class="popup-body">
					<view class="flex margin-bottom">
						<view class="text-gray">隐患图片/视频</view>
						<view class="text-red">*</view>
					</view>
					<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"></up-upload>
					<view class="text-gray text-sm">必填：请上传现场照片或者视频作为隐患证据</view>
					<view class="flex margin-bottom margin-top">
						<view class="text-gray">隐患标题</view>
						<view class="text-red">*</view>
					</view>
					<up-input placeholder="请输入内容" border="surround" v-model="formData.title"></up-input>
					<view class="text-sm text-gray margin-top-xs">请用简洁的语言概括隐患要点</view>
					<view class="flex  margin-bottom margin-top">
						<view class="text-gray">隐患等级</view>
						<view class="text-red">*</view>
					</view>
					<up-choose v-model="formData.level" :options="levelOptions" :wrap="false" item-width="183rpx"
						item-height="72rpx"></up-choose>
					<view class="flex  margin-bottom margin-top">
						<view class="text-gray">隐患来源</view>
						<view class="text-red">*</view>
					</view>
					<up-choose v-model="formData.source" :options="sourceOptions" :wrap="false" item-width="183rpx"
						item-height="72rpx"></up-choose>
					<view class="flex  margin-bottom margin-top">
						<view class="text-gray">隐患位置</view>
						<view class="text-red">*</view>
					</view>
					
					<view class="address-box">
						<view class="address-input" @tap.stop="chooseLocation">
							<text :class="selectedAddress ? '' : 'text-gray'">{{ selectedAddress || '请选择地址' }}</text>
						</view>
						<button class="btn-address bg-blue" @tap.stop="chooseLocation">选择地址</button>
					</view>
					<view class="text-gray text-sm margin-top-xs">如：办公楼3层东侧消防通道、生产车间A区设备旁等，或点击"选择地址"按钮在地图上选择</view>
					<view class="flex margin-bottom margin-top">
						<view class="text-gray">隐患描述</view>
						<view class="text-red">*</view>
					</view>
					<up-textarea v-model="formData.description" placeholder="请输入内容"></up-textarea>
					<view class="text-gray text-sm margin-top-xs">请详细说明隐患现状、潜在风险及影响范围</view>
					<view class="text-gray margin-bottom margin-top">隐患标签</view>
					<up-choose v-model="formData.tagIndex" :options="tagOptions"></up-choose>
					<view class="text-gray text-sm">可选择多个相关标签对隐患进行分类</view>
				</view>
				<view class="popup-footer">
					<button class="btn-cancel" @click="showAddPopup = false">取消</button>
					<button class="btn-confirm bg-blue" @click="handleAdd">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive,
		watch
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		addHiddenDanger,
		enterCheckPlan,
		getCheckTaskDetail,
		getMyHiddenDangerList,
		getHiddenDangerLabelList
	} from '@/request/api.js'
	import {
		baseUrl,
		getToken
	} from '@/request/request.js'

	// 弹窗控制
	const showAddPopup = ref(false);

	// 任务相关ID（从接口获取）
	const taskId = ref('');
	const checkPointId = ref('');

	// 获取任务详情
	const fetchTaskInfo = async (oneTableId) => {
		try {
			// 第一步：调用 start 接口获取 taskId
			const startRes = await enterCheckPlan(oneTableId);
			if (startRes.code === 0 && startRes.data) {
				const tid = startRes.data.taskId;

				// 第二步：用 taskId 获取任务详情
				const detailRes = await getCheckTaskDetail(tid);
				if (detailRes.code === 0 && detailRes.data) {
					taskId.value = detailRes.data.taskId;
					checkPointId.value = detailRes.data.checkPointId;
				}
			}
		} catch (error) {
			console.error('获取任务信息失败:', error);
		}
	};

	onLoad((options) => {
		if (options.id) {
			fetchTaskInfo(options.id);
		}
	});

	// 表单数据
	const formData = reactive({
		title: '', // 隐患标题
		level: 0, // 隐患等级索引
		description: '', // 隐患描述
		tagIndex: 0, // 隐患标签索引
		source: '', // 隐患来源
	});

	// 经纬度
	const lng = ref(0);
	const lat = ref(0);

	// 地址选择 - 调用腾讯地图
	const selectedAddress = ref('');

	const chooseLocation = () => {
		console.log('chooseLocation called');
		// 先关闭弹窗，避免在弹窗中调用地图选择出现问题
		showAddPopup.value = false;

		setTimeout(() => {
			uni.chooseLocation({
				success: (res) => {
					console.log('选择位置成功:', res);
					// 获取选择的位置信息
					selectedAddress.value = res.address + (res.name ? `(${res.name})` : '');
					lng.value = res.longitude;
					lat.value = res.latitude;
					// 重新打开弹窗
					showAddPopup.value = true;
				},
				fail: (err) => {
					console.error('选择位置失败:', err);
					// 重新打开弹窗
					showAddPopup.value = true;
					// 用户取消选择不提示
					if (err.errMsg && err.errMsg.indexOf('cancel') === -1) {
						uni.showToast({
							title: '选择位置失败',
							icon: 'none'
						});
					}
				}
			});
		}, 300);
	};

	// 确定新增
	const handleAdd = async () => {
		// 表单验证
		if (!formData.title) {
			uni.showToast({
				title: '请输入隐患标题',
				icon: 'none'
			});
			return;
		}
		if (fileList1.value.length === 0) {
			uni.showToast({
				title: '请上传隐患图片/视频',
				icon: 'none'
			});
			return;
		}

		// 构建附件列表 - 从上传返回的url中提取文件名
		const attachments = fileList1.value.map(file => {
			// 确保 url 是字符串
			let url = '';
			if (typeof file.url === 'string') {
				url = file.url;
			} else if (file.url && typeof file.url === 'object') {
				url = file.url.url || file.url.path || '';
			}
			// 从url中提取文件名
			const fileName = (typeof url === 'string' && url) ? url.split('/').pop() : (file.name || '');
			return {
				fileName: fileName || '',
				filePath: url || '',
				fileType: file.type || 'image/png',
				fileSize: file.size || 0
			};
		});

		// 获取隐患标签ID
		const selectedTag = tagOptions.value[formData.tagIndex];
		const tagId = selectedTag ? selectedTag.id : null;
		console.log("innnn",sourceOptions);

		// 构建请求参数
		const params = {

			title: formData.title, //标题
			level: formData.level + 1, // 1.轻微隐患 2.一般隐患 3.重大隐患
			lng: lng.value || 0, //经度
			lat: lat.value || 0, //纬度
			address: selectedAddress.value || '', //详细地址
			description: formData.description || '', //隐患描述
			tagId: tagId, //隐患标签ID
			taskId: taskId.value, //关联任务ID
			checkPointId: checkPointId.value, //关联检查点ID
			source: sourceOptions.value[formData.source]?.title || '', //隐患来源（随手拍、企业自查、行业互查、专家诊查）

		};
		//
		try {
			const res = await addHiddenDanger(params);
			if (res.code === 0) {
				uni.showToast({
					title: '新增成功',
					icon: 'success'
				});
				showAddPopup.value = false;
				// 重置表单
				formData.title = '';
				formData.level = 0;
				formData.description = '';
				formData.tagIndex = 0;
				selectedAddress.value = '';
				fileList1.value = [];
				// 刷新隐患列表
				fetchHiddenDangerList();
			} else {
				uni.showToast({
					title: res.msg || '新增失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error(error);
			uni.showToast({
				title: '请求失败',
				icon: 'none'
			});
		}
	};
	//获取隐患列表
	const hiddenDangerList = ref([]);
	const fetchHiddenDangerList = async () => {
		try {
			const res = await getMyHiddenDangerList();
			if (res.code === 0) {
				hiddenDangerList.value = res.data.records;
			} else {
				uni.showToast({
					title: res.msg || '获取隐患列表失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error(error);
			uni.showToast({
				title: '请求失败',
				icon: 'none'
			});
		}
	};
	
	// 页面显示时刷新列表（从交办、验收页面返回时自动刷新）
	onShow(() => {
	fetchHiddenDangerList();
	});

	const details = (item) => {
		uni.navigateTo({
			url: `/pages/hiddendanger/view?hazardId=${item.hazardId}&assignId=${item.assignId}`
		})
	}
	const Rectification = (item) => {
		uni.navigateTo({
			url: `/pages/hiddendanger/rectification?hazardId=${item.hazardId}&assignId=${item.assignId}`
		})
	}
	const acceptance = (item) => {
		uni.navigateTo({
			url: `/pages/hiddendanger/acceptance?hazardId=${item.hazardId}&assignId=${item.assignId}&rectifyId=${item.rectifyId}`
		})
	}
	// 隐患交办
	const assignHazard = (item) => {
		uni.navigateTo({
			url: `/pages/hiddendanger/assignment?hazardId=${item.hazardId}&assignId=${item.assignId}`
		})
	}
	const fileList1 = ref([]);

	// 删除图片
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
	};

	// 新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList1.value.length;
		lists.map((item) => {
			fileList1.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList1.value[fileListLen];
			fileList1.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};

	const uploadFilePromise = (filePath) => {
		return new Promise((resolve, reject) => {
			uni.uploadFile({
				url: baseUrl + '/frontend/attachment/upload',
				filePath: filePath,
				name: 'file',
				header: {
					'Authorization': getToken()
				},
				success: (res) => {
					const data = JSON.parse(res.data);
					if (data.code === 0) {
						resolve(data.data);
					} else {
						reject(data.msg || '上传失败');
					}
				},
				fail: (err) => {
					console.error('上传失败:', err);
					reject(err);
				}
			});
		});
	};
	const tagOptions = ref([]);
	const fetchTagOptions = async () => {
		try {
			const res = await getHiddenDangerLabelList();
			if (res.code === 0) {
				// 将接口返回的 name 字段映射为 title 字段，供 up-choose 组件使用
				tagOptions.value = res.data.map(item => ({
					id: item.id,
					title: item.name
				}));
			} else {
				uni.showToast({
					title: res.msg || '获取标签列表失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error(error);
			uni.showToast({
				title: '请求失败',
				icon: 'none'
			});
		}
	};
	fetchTagOptions();

	//
	// 隐患等级选项
	const levelOptions = ref([{
			id: 1,
			title: '轻微隐患'
		},
		{
			id: 2,
			title: '一般隐患'
		},
		{
			id: 3,
			title: '重大隐患'
		}
	])
	//隐患来源
	const sourceOptions = ref([{
			id: 1,
			title: '随手拍'
		},
		{
			id: 2,
			title: '企业自查'
		},
		{
			id: 3,
			title: '行业互查'
		},
		{
			id: 4,
			title: '专家诊查'
		}
	])
	
	// 监听隐患来源选择变化
	watch(() => formData.source, (newVal) => {
		const selected = sourceOptions.value[newVal];
		console.log('隐患来源选择结果:', {
			索引: newVal,
			选中项: selected,
			id: selected?.id,
			title: selected?.title
		});
	});
	
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #EBF2FC;
	}

	.list-list {
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.08);
		border-left: 5px solid #2667E9;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	
	// 隐患等级标签样式
	.level-tag {
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
	}
	
	// 轻微隐患
	.level-minor {
		background: #F6FFED;
		border: 2rpx solid #B7EB8F;
		color: #52C41A;
	}
	
	// 一般隐患
	.level-normal {
		background: #FFF7E6;
		border: 2rpx solid #FFD591;
		color: #FA8C16;
	}
	
	// 重大隐患
	.level-major {
		background: #FFF1F0;
		border: 2rpx solid #FFA39E;
		color: #F5222D;
	}

	.popup-content {
		width: 600rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;

		.popup-title {
			font-size: 32rpx;
			color: #333;
		}

		.popup-close {
			font-size: 40rpx;
			color: #999;
			line-height: 1;
		}
	}

	.popup-body {
		padding: 30rpx;
		max-height: 900rpx;
		overflow-y: auto;
	}

	.popup-footer {
		display: flex;
		border-top: 1rpx solid #eee;

		button {
			flex: 1;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 0;
			font-size: 30rpx;

			&::after {
				border: none;
			}
		}

		.btn-cancel {
			background: #fff;
			color: #666;
		}

		.btn-confirm {
			color: #fff;
		}
	}

	.address-box {
		display: flex;
		align-items: center;
		gap: 20rpx;

		.address-input {
			flex: 1;
			background: #fff;
			border: 1rpx solid #F6F6F6;
			;
			border-radius: 8rpx;
			padding: 20rpx;
			font-size: 26rpx;
			color: #333;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.btn-address {
			flex-shrink: 0;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 30rpx;
			font-size: 26rpx;
			border-radius: 8rpx;
			color: #fff;

			&::after {
				border: none;
			}
		}
	}

	.address-popup {
		width: 600rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.address-popup-body {
		padding: 30rpx;
		max-height: 500rpx;

		.search-box {
			margin-bottom: 20rpx;

			.search-input {
				width: 100%;
				background: #f5f5f5;
				border-radius: 8rpx;
				padding: 16rpx 20rpx;
				font-size: 28rpx;
			}
		}

		.address-list {
			max-height: 350rpx;
			overflow-y: auto;
		}

		.address-item {
			padding: 24rpx 20rpx;
			border-bottom: 1rpx solid #eee;
			font-size: 26rpx;
			color: #333;

			&:last-child {
				border-bottom: none;
			}

			&.address-item-active {
				background: #EBF2FC;
				color: #2667E9;
			}
		}
	}
</style>

<style lang="scss">
	/* 全局样式覆盖 up-tag 文字居中 */
	.u-tag {
		justify-content: center !important;
	}
</style>