<template>
	<view class="content">
		<!-- 顶部背景区域 -->
		<view class="header-wrapper">
			<!-- 渐变图片叠加在蓝色底色上 -->
			<image class="header-bg-image" src="/static/home_icon/jianbianbeijing.png" mode="aspectFill"></image>
			<!-- 自定义导航栏 -->
			<u-navbar 
				title="三查一曝光" 
				:placeholder="false"
				:fixed="false"
				:safeAreaInsetTop="true"
				bgColor="transparent"
				titleColor="#fff"
				:border="false"
				leftIcon=""
			>
			</u-navbar>
			
			<!-- 用户信息卡片 -->
			<view class="user-card">
				<view class="user-avatar">
					<image class="avatar-image" :src="getImageUrl(userInfo.avatar) || defaultAvatar" mode="aspectFill"></image>
				</view>
				<view class="user-info">
					<view class="user-dept text-bold">{{ userInfo.deptName || '未知部门' }}</view>
					<view class="user-phone">手机号：{{ userInfo.phone || '未绑定' }}</view>
				</view>
				<!-- <view class="switch-btn">
					<text>切换</text>
					<u-icon name="list" color="#285CE9" size="14"></u-icon>
				</view> -->
			</view>
		</view>
		
		<view class="padding page-content">
			<!-- 功能菜单 -->
			<view class="menu-card">
				<view class="menu-grid">
					<view class="menu-item" v-for="(item, index) in infoList" :key="index" @click="handleMenuClick(item)">
						<image class="menu-icon" :src="item.src"></image>
						<text class="menu-text">{{ item.name }}</text>
					</view>
				</view>
			</view>
			<!-- 我的检查计划 -->
			<view class="bg-white margin-top radius" style="padding: 40rpx; margin-left: -30rpx; margin-right: -30rpx;">
				<view class="flex margin-bottom-xl">
					<!-- <view class="border-tite"></view> -->
					<view class="text-bold margin-left-xs" style="font-size: 32rpx;">我的检查计划</view>
				</view>
				<!-- 无数据提示 -->
				<view v-if="checkPlanData.length === 0" class="text-center text-gray padding">
					暂无检查计划
				</view>
				<!-- 列表渲染 -->
				<view class="plan-card margin-bottom" v-for="(item, index) in checkPlanData" :key="item.id">
					<!-- 蓝色标题栏 -->
					<view class="plan-header">
						<!-- <image src="/static/蒙版组 273.png" class="plan-header-icon"></image> -->
						<text class="plan-header-title">{{ item.name }}</text>
					</view>
					<!-- 内容区域 -->
					<view class="plan-body">
						<view class="flex">
							<view class="border-border margin-right-xs">{{ item.runModeName }}完成</view>
							<view class="border-border">{{ item.cycle }}</view>
						</view>
						<view class="flex text-gray margin-top">
							<view>计划时间：</view>
							<view style="color: #333333;">{{ formatDate(item.planStartTime) }}至{{ formatDate(item.planEndTime) }}</view>
						</view>
						<view class="flex margin-top align-center">
							<view style="color: #B5B5B5;">完成进度：</view>
							<view class="flex align-center margin-left-sm">
								<view class="cu-progress round">
									<view class="bg-green" :style="{ width: item.progress + '%' }"></view>
								</view>
								<text class="margin-left-sm">{{ item.progress }}%</text>
							</view>
						</view>
						<view class="plan-stats margin-top">
							<view class="plan-stat-item">
								<view class="plan-stat-num text-orange">{{ item.totalCount }}</view>
								<view class="plan-stat-label">排查项</view>
							</view>
							<view class="plan-stat-item">
								<view class="plan-stat-num text-yellow">{{ item.totalCount - item.finishedCount }}</view>
								<view class="plan-stat-label">待排查</view>
							</view>
							<view class="plan-stat-item">
								<view class="plan-stat-num text-olive">0</view>
								<view class="plan-stat-label">待验收</view>
							</view>
							<view class="plan-stat-item">
								<view class="plan-stat-num text-blue">{{ item.finishedCount }}</view>
								<view class="plan-stat-label">已完成</view>
							</view>
						</view>
						<view class="margin-top margin-bottom flex justify-end">
							<button class="cu-btn round lg light bg-blue margin-right" @click.stop="ViewDetails(item)">查看详情</button>
							<button v-if="item.finishedCount < item.totalCount" class="cu-btn round lg bg-blue" @click.stop="goDetails(item)">开始检查</button>
							<view v-else class="cu-btn round lg bg-green">已完成</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 我的隐患 -->
			<view class="bg-white margin-top radius" style="padding: 40rpx; margin-left: -40rpx; margin-right: -40rpx;">
				<view class="flex margin-bottom">
					<!-- <view class="border-tite"></view> -->
					<view class="text-bold margin-left-xs" style="font-size: 32rpx;">我的隐患排查</view>
				</view>
				<!-- Tab 筛选栏 -->
				<scroll-view scroll-x class="danger-tab-scroll">
					<view class="danger-tab-list">
						<view 
							class="danger-tab-item" 
							:class="{ 'danger-tab-active': activeDangerTab === index }" 
							v-for="(tab, index) in dangerTabs" 
							:key="index" 
							@click="switchDangerTab(index)"
						>{{ tab.label }}</view>
					</view>
				</scroll-view>
				<!-- 无数据提示 -->
				<view v-if="filteredDangerData.length === 0" class="text-center text-gray padding">
					暂无隐患数据
				</view>
				<!-- 隐患卡片列表 -->
				<view class="danger-card margin-top" v-for="(item, index) in filteredDangerData" :key="item.hazardId">
					<!-- 标题行：图标+标题 + 等级标签 -->
					<view class="flex justify-between align-center">
						<view class="flex align-center" style="flex: 1; min-width: 0; margin-right: 24rpx;">
							<text class="cuIcon-infofill text-blue" style="font-size: 36rpx; margin-right: 12rpx; flex-shrink: 0;"></text>
							<view class="text-bold" style="font-size: 30rpx; word-break: break-all; flex: 1;">{{ item.title }}</view>
						</view>
						<view class="level-tag" :class="{
							'level-minor': item.levelName === '轻微隐患',
							'level-normal': item.levelName === '一般隐患',
							'level-major': item.levelName === '重大隐患'
						}">{{ item.levelName }}</view>
					</view>
					<!-- 地址 -->
					<view class="text-gray margin-top-sm" style="font-size: 26rpx; padding-left: 48rpx;">{{ item.address }}</view>
					<!-- 分隔线 -->
					<view style="height: 1rpx; background: #EEEEEE; margin: 20rpx 0;"></view>
					<!-- 信息行 -->
					<view class="danger-info-row">
						<text class="text-gray">隐患来源：</text>
						<text style="color: #333333;">{{ item.source }}</text>
					</view>
					<view class="danger-info-row">
						<text class="text-gray">隐患状态：</text>
						<text style="color: #333333;">{{ item.statusName }}</text>
					</view>
					<view class="danger-info-row">
						<text class="text-gray">发现时间：</text>
						<text style="color: #333333;">{{ item.createdAt }}</text>
					</view>
					<!-- 操作按钮 -->
					<view class="margin-top flex justify-end" style="gap: 16rpx;">
						<button class="cu-btn round lg light bg-blue" @click.stop="viewHazardDetail(item)">查看详情</button>
						<button v-if="item.statusName === '待整改' && item.canEdit" 
							class="cu-btn round lg bg-blue" @click.stop="goRectification(item)">立即整改</button>
						<button v-if="item.statusName === '待验收' && canAcceptance" 
							class="cu-btn round lg bg-blue" @click.stop="goAcceptance(item)">立即验收</button>
						<button v-if="item.statusName === '待交办'" 
							class="cu-btn round lg bg-blue" @click.stop="assignHazard(item)">隐患交办</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue';
	// import { onLoad } from '@dcloudio/uni-app';
	import {getCheckPlanList,getHiddenDangerList} from '@/request/api.js'
	import { getProfileDetail } from '@/request/three_one_api/info.js';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { toImageUrl } from '@/request/request.js';
	const loading = ref(true);
	
	const defaultAvatar = 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg';
	
	// 用户信息
	const userInfo = reactive({
		userId: '',
		username: '',
		nickName: '',
		deptId: '',
		deptName: '',
		role: '',
		avatar: '',
		phone: ''
	});
	
	// 获取用户角色，判断是否有验收权限（admin或manage才能验收）
	const canAcceptance = computed(() => {
		return userInfo.role === 'admin' || userInfo.role === 'manage';
	});
	
	// 获取图片完整URL（用于显示）
	const getImageUrl = (path) => {
		if (!path) return '';
		return toImageUrl(path);
	};
	
	// 获取用户信息（从接口获取）
	const getUserInfo = async () => {
		try {
			const res = await getProfileDetail();
			if (res.code === 0 && res.data) {
				userInfo.userId = res.data.userId || '';
				userInfo.username = res.data.userName || '';
				userInfo.nickName = res.data.nickName || '';
				userInfo.deptId = res.data.deptId || '';
				userInfo.deptName = res.data.deptName || '';
				userInfo.avatar = res.data.avatar || '';
				userInfo.phone = res.data.phonenumber || res.data.phone || '';
				// 获取角色信息
				if (res.data.roles && res.data.roles.length > 0) {
					userInfo.role = res.data.roles[0].roleKey || '';
				}
			}
		} catch (e) {
			console.error('获取用户信息失败:', e);
			// 如果接口失败，尝试从本地存储获取
			try {
				const storedUserInfo = uni.getStorageSync('userInfo');
				if (storedUserInfo) {
					const info = JSON.parse(storedUserInfo);
					userInfo.userId = info.userId || '';
					userInfo.username = info.username || '';
					userInfo.nickName = info.nickName || '';
					userInfo.deptId = info.deptId || '';
					userInfo.deptName = info.deptName || '';
					userInfo.role = info.role || '';
					userInfo.avatar = info.avatar || '';
					userInfo.phone = info.phone || '';
				}
			} catch (storageError) {
				console.error('从本地存储获取用户信息失败:', storageError);
			}
		}
	};
	// 全部菜单项
	const allMenuList = [
		{
			name: '成员管理',
			src: '/static/home_icon/chengyuangaunli.png'
		},
		{
			name: '信息填报',
			src: '/static/home_icon/xinxitianbao.png'
		},
		{
			name: '区域设置',
			src: '/static/home_icon/quyushezhi.png'
		},
		{
			name: '检查清单',
			src: '/static/home_icon/jiachaqingdan.png'
		},
		// {
		// 	name: '检查记录',
		// 	src: '/static/home_icon/jianchajilu.png'
		// },
		{
			name: '证件管理',
			src: '/static/home_icon/zhengjianguanli.png'
		},
		{
			name: '隐患排查',
			src: '/static/home_icon/yinhuanpaicha.png'
		},
		{
			name: '隐患销号',
			src: '/static/home_icon/yinhuanxiaohao.png'
		}
	];
	
	// common角色只能看到的菜单名称
	const commonMenuNames = ['隐患排查', '隐患销号'];
	
	// 根据角色动态展示菜单
	const infoList = computed(() => {
		if (userInfo.role === 'common') {
			return allMenuList.filter(item => commonMenuNames.includes(item.name));
		}
		// admin、manage 及其他角色展示全部菜单
		return allMenuList;
	});
	const ViewDetails = (item) => {
		uni.navigateTo({
			url: `/pages/plandetail/plandetail?id=${item.id}`
		})
	}
	const goDetails = (item) => {
		uni.navigateTo({
			url: `/pages/Inspectionresult/Inspectionresult?id=${item.id}`
		})
	}
	// 菜单点击跳转
	const handleMenuClick = (item) => {
		const menuRoutes = {
			'成员管理': '/pages/membermanagemen/membermanagemen',
			'信息填报': '/pages/corporateInformation/corporateInformation',
			'区域设置':'/pages/area/management',
			'检查清单' :'/pages/checklist/checklist',
			'检查记录': '/pages/Inspectionlog/Inspectionlog',
			'证件管理': '/pages/Idphotomanagement/Idphotomanagement',
			'隐患排查':'/pages/hiddendanger/Inspection',
			'隐患销号':'/pages/closeout/application',
			'设备登记':'/pages/equipmentregistration/equipmentregistration',
		};
		
		const url = menuRoutes[item.name];
		if (url) {
			uni.navigateTo({ url });
		} else {
			uni.showToast({ title: '功能开发中', icon: 'none' });
		}
	}
	
	//我的检查计划
	const checkPlanParams = ref({
		pageNum: 1,
		pageSize: 10,
		name: ''
	});
	const checkPlanData = ref([]);
	
	const getCheckPlanLists = async () => {
		try {
			const res = await getCheckPlanList(checkPlanParams.value);
			console.log(res);
			if (res.code === 0) {
				checkPlanData.value = res.data.records;
			}
		} catch (error) {
			console.error(error);
		} finally {
			loading.value = false;
		}
	};
	
	// 格式化日期 (2025-12-18 00:00:00 -> 2025-12-18)
	const formatDate = (dateStr) => {
		if (!dateStr) return '';
		return dateStr.split(' ')[0];
	};
	
	// 页面加载时调用接口
	// onLoad(() => {
	// 	getUserInfo();
	// 	getCheckPlanLists();
	// });
	// 页面每次显示时都会加载数据
	onShow(() => {
		getUserInfo();
		getCheckPlanLists();
		getHiddenDangerLists();
	});
	//我的隐患排查
	const hiddenDangerParams = ref({
		pageNum: 1,
		pageSize: 10,
		name: ''
	});
	const hiddenDangerData = ref([]);
	
	// 隐患排查 Tab 筛选
	const dangerTabs = ref([
		{ label: '全部', value: null },
		{ label: '待交办', value: 1 },
		{ label: '待整改', value: 2 },
		{ label: '待验收', value: 3 },
		{ label: '待销号', value: 4 },
		{ label: '已完成', value: 5 }
	]);
	const activeDangerTab = ref(0);
	
	// 切换 Tab
	const switchDangerTab = (index) => {
		activeDangerTab.value = index;
	};
	
	// 根据 Tab 过滤隐患数据
	const filteredDangerData = computed(() => {
		const activeTab = dangerTabs.value[activeDangerTab.value];
		if (!activeTab || activeTab.value === null) {
			return hiddenDangerData.value;
		}
		return hiddenDangerData.value.filter(item => item.status === activeTab.value);
	});
	
	const getHiddenDangerLists = async () => {
		try {
			const res = await getHiddenDangerList(hiddenDangerParams.value);
			console.log(res);
			if (res.code === 0) {
				hiddenDangerData.value = res.data.records;
				console.log(hiddenDangerData.value,1111);
			}
		} catch (error) {
			console.error(error);
		} finally {
			loading.value = false;
		}
	};
	
	// 页面加载时调用接口
	onLoad(() => {
		getHiddenDangerLists();
		
	});
	
	// ========== 隐患排查相关跳转函数 ==========
	// 查看隐患详情
	const viewHazardDetail = (item) => {
		uni.navigateTo({
			url: `/pages/hiddendanger/view?hazardId=${item.hazardId}&assignId=${item.assignId}`
		})
	}
	
	// 立即整改（待整改状态）
	const goRectification = (item) => {
		let url = `/pages/hiddendanger/rectification?hazardId=${item.hazardId}&assignId=${item.assignId}`
		if (item.deadline) {
			url += `&deadline=${encodeURIComponent(item.deadline)}`
		}
		uni.navigateTo({ url })
	}
	
	// 编辑整改信息（待验收状态）
	const editRectification = (item) => {
		uni.navigateTo({
			url: `/pages/hiddendanger/rectification?rectifyId=${item.rectifyId}&isEdit=1`
		})
	}
	
	// 立即验收
	const goAcceptance = (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 switchAccount = () => {
		uni.showToast({
			title: '切换账户功能开发中',
			icon: 'none'
		});
	}
</script>

<style lang="scss" scoped>
	// ========== 顶部背景区域样式 ==========
	.header-wrapper {
		position: relative;
		padding-bottom: 40rpx;
		overflow: hidden;
		// 蓝色底色
		background-color: #2472EA;
	}
	
	// 渐变图片叠加在蓝色底色上
	.header-bg-image {
		position: absolute;
		top: 2rpx; // 往下移动
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		opacity: 1.6;
	}
	
	// 用户信息卡片
	.user-card {
		position: relative;
		z-index: 10;
		display: flex;
		align-items: center;
		padding: 42rpx 30rpx 54rpx 30rpx; // 上42 右30 下54 左30
		
		.user-avatar {
			flex-shrink: 0;
			width: 144rpx;
			height: 144rpx;
			border-radius: 50%;
			overflow: hidden;
			background: #fff;
		}
		
		.user-info {
			flex: 1;
			margin-left: 24rpx;
			overflow: hidden;
			max-width: 576rpx;
			
			.user-dept {
				font-size: 34rpx;
				color: #fff;
				font-weight: bold;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			.user-phone {
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.9);
				margin-top: 10rpx;
			}
		}
		
		.switch-btn {
			display: flex;
			align-items: center;
			background: #fff;
			padding: 16rpx 24rpx;
			border-radius: 30rpx;
			color: #285CE9;
			font-size: 26rpx;
			flex-shrink: 0;
			margin-left: 20rpx;
			
			text {
				margin-right: 8rpx;
			}
		}
	}
	
	.page-content {
		background: #F4F7FB;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -40rpx;
		padding: 30rpx;
		padding-bottom: 50rpx;
		position: relative;
		z-index: 10;
		min-height: calc(100vh - 400rpx);
	}
	
	// ========== 功能菜单区域 ==========
	.menu-card {
		background: #fff;
		border-radius: 40rpx 40rpx 0 0rpx;
		padding: 44rpx 30rpx 30rpx 30rpx;
		margin-left: -40rpx;
		margin-right: -40rpx;
		margin-top: -30rpx;
	}
	
	.menu-grid {
		display: flex;
		flex-wrap: wrap;
	}
	
	.menu-item {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 38rpx;
		
		.menu-icon {
			width: 72rpx;
			height: 80rpx;
		}
		
		.menu-text {
			font-size: 24rpx;
			color: #333;
			margin-top: 14rpx;
			text-align: center;
			white-space: nowrap;
		}
	}
	
	// 头像图片样式
	.avatar-image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.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;
	}

	// ========== 检查计划卡片 ==========
	.plan-card {
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.06);
	}

	.plan-header {
		background: linear-gradient(135deg, #4A90E2 0%, #2667E9 100%);
		padding: 24rpx 30rpx;
		display: flex;
		align-items: center;

		.plan-header-icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 12rpx;
		}

		.plan-header-title {
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.plan-body {
		padding: 24rpx 30rpx 10rpx 30rpx;
		background: #fff;
	}

	.plan-stats {
		display: flex;
		background: #F5F7FA;
		border-radius: 12rpx;
		border: 1rpx solid #E8ECF0;
		overflow: hidden;

		.plan-stat-item {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			border-right: 1rpx solid #E8ECF0;

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

		.plan-stat-num {
			font-size: 36rpx;
			font-weight: bold;
		}

		.plan-stat-label {
			font-size: 24rpx;
			color: #666;
			margin-top: 8rpx;
		}
	}

	.border-tite {
		width: 10rpx;
		height: 32rpx;
		background: #2667E9;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.cu-progress {
		width: 300rpx;
		height: 20rpx;
		background: #ebeef5;
		border-radius: 100rpx;
		overflow: hidden;

		view {
			height: 100%;
			border-radius: 100rpx;
			transition: width 0.3s ease;
		}
	}

	.bg-green {
		background: #2667E9;
	}

	.border-border {
		padding: 10rpx;
		background: #EEF3FF;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 2rpx solid #AAC5FC;
		text-align: center;
		justify-content: center;
		align-items: center;
		display: flex;
		font-size: 28rpx;
		color: #2667E9;
	}
	
	// 隐患等级标签样式
	.level-tag {
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
		white-space: nowrap;
		flex-shrink: 0;
	}
	
	// 轻微隐患
	.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;
	}

	// ========== 隐患排查 Tab 筛选栏 ==========
	.danger-tab-scroll {
		white-space: nowrap;
		margin-bottom: 20rpx;
	}

	.danger-tab-list {
		display: inline-flex;
		gap: 42rpx;
		margin-left: 10rpx;
	}

	.danger-tab-item {
		font-size: 28rpx;
		color: #666;
		padding-bottom: 12rpx;
		position: relative;
		flex-shrink: 0;
	}

	.danger-tab-active {
		font-weight: bold;
		color: #2667E9 !important;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 40rpx;
			height: 6rpx;
			background: #2667E9;
			border-radius: 3rpx;
		}
	}

	// ========== 隐患卡片 ==========
	.danger-card {
		padding: 30rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx #F1F5FE;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #EAECEF;
	}

	.danger-info-row {
		font-size: 28rpx;
		margin-top: 16rpx;
		display: flex;

		.text-gray {
			white-space: nowrap;
			flex-shrink: 0;
		}
	}
</style>