<template>
	<view class="page padding">
		<view class="padding radius bg-white">
			<view class="flex margin-bottom ">
				<view class="text-gray">检查表名称</view>
				<view class="text-red">*</view>
			</view>
			<up-input placeholder="请输入检查表名称" border="surround"></up-input>
			<view class="flex margin-bottom margin-top">
				<view class="text-gray">分派单位</view>
				<view class="text-red">*</view>
			</view>
			<up-select placeholder="请选择分派单位"  v-model:current="cateId"  label="湘西自治州和谐网络科技有限公司" :options="cateList"  @select="selectItem"  ></up-select>	
			<view class="margin-bottom margin-top">补充说明</view>
			<up-textarea v-model="value1" placeholder="请输入内容" ></up-textarea>
			<view class="margin-bottom margin-top" >运行模式</view>
			<up-select placeholder="请选择分派单位"  v-model:current="cateId"  label="全员" :options="cateList"  @select="selectItem"  ></up-select>	
			<view class="margin-bottom margin-top" >部门</view>
			<up-select placeholder="请选择分派单位"  v-model:current="cateId"  label="选择部门" :options="cateList"  @select="selectItem"  ></up-select>	
			<view class="margin-bottom margin-top" >周期</view>
			<up-select placeholder="请选择分派单位"  v-model:current="cateId"  label="每天一次" :options="cateList"  @select="selectItem"  ></up-select>	
			<view class="margin-bottom margin-top" >工作日</view>
			<view class="flex">
				 <up-switch v-model="value" @change="change" activeColor="#07C160 " class="margin-right"></up-switch>
				  <up-switch v-model="value" @change="change" activeColor="#07C160 "></up-switch>
			</view>
			<view class="margin-bottom margin-top" @click="show = true">开始日期</view>
			<up-calendar :show="show" :mode="mode" @confirm="confirm"></up-calendar>
			<view class="margin-bottom margin-top" @click="show = true">结束日期</view>
			<up-calendar :show="show" :mode="mode" @confirm="confirm"></up-calendar>
			<view class="margin-bottom margin-top">已添加的检查项（31项）</view>
			<view>
				<view class="flex margin-bottom">
					<view style="white-space: nowrap;">检查库：</view>
					<view>应急管理部门非煤地下矿山领域标准化检查表</view>
				</view>
				<view class="flex margin-bottom">
					<view style="white-space: nowrap;">关联表名：</view>
					<view>应急管理部门非煤地下矿山领域标准化检查表</view>
				</view>
				<view class="flex margin-bottom">
					<view>检查项数量：</view>
					<view>31项</view>
				</view>
				<view  class="btn-right">
					<button  class="bg-red cu-btn ">删除</button>
				</view>
				<view class="margin-bottom margin-top">添加检查项</view>
				<view class="flex justify-between">
					<view class="but" @click="showAddPopup = true">手动添加</view>
					<view class="but" @click="showLibraryPopup = true">从检查库添加</view>
				</view>
			</view>
		</view> 
		<button class="bg-blue round margin-top-xl margin-bottom-xl">保存</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="form-item">
						<view class="form-label">项目名称<text class="text-red">*</text></view>
						<input class="form-input" v-model="checkForm.projectName" placeholder="请输入项目名称" />
					</view>
					
					<!-- 检查内容 -->
					<view class="form-item">
						<view class="form-label">检查内容<text class="text-red">*</text></view>
						<input class="form-input" v-model="checkForm.checkContent" placeholder="请输入检查内容" />
					</view>
					
					<!-- 参考法规 -->
					<view class="form-item">
						<view class="form-label">参考法规</view>
						<view class="form-btn" @click="showLawPopup = true">
							<text class="text-blue">{{ checkForm.law || '选择法规' }}</text>
						</view>
					</view>
					
					<!-- 参考图片 -->
					<view class="form-item">
						<view class="form-label">参考图片</view>
						<view class="upload-box" @click="chooseImage">
							<view class="upload-add" v-if="!checkForm.image">
								<text class="upload-icon">+</text>
								<text class="upload-text">上传图片</text>
							</view>
							<image v-else :src="checkForm.image" mode="aspectFill" class="upload-img"></image>
						</view>
					</view>
				</view>
				
				<view class="popup-footer">
					<button class="btn-cancel" @click="showAddPopup = false">取消</button>
					<button class="btn-confirm bg-blue" @click="handleAddCheck">确定</button>
				</view>
			</view>
		</u-popup>
		
		<!-- 选择法规弹出框 -->
		<u-popup :show="showLawPopup" mode="center" round="20" @close="showLawPopup = false">
			<view class="law-popup">
				<view class="popup-header">
					<view class="popup-title text-bold">选择参考法规</view>
					<view class="popup-close" @click="showLawPopup = false">×</view>
				</view>
				
				<!-- 搜索框 -->
				<view class="search-box">
					<text class="search-icon">🔍</text>
					<input class="search-input" v-model="lawKeyword" placeholder="请输入关键词搜索" />
				</view>
				
				<!-- 法规列表 -->
				<view class="law-list">
					<view 
						class="law-item" 
						:class="{ 'law-item-active': selectedLaw === item }"
						v-for="(item, index) in filteredLawList" 
						:key="index"
						@click="selectedLaw = item"
					>
						{{ item }}
					</view>
				</view>
				
				<!-- 加载更多 -->
				<view class="load-more" @click="loadMoreLaw">
					<text class="text-blue">加载更多</text>
				</view>
				
				<!-- 确认按钮 -->
				<view class="law-footer">
					<button class="btn-cancel" @click="showLawPopup = false">取消</button>
					<button class="btn-confirm bg-blue" @click="confirmLaw">确定</button>
				</view>
			</view>
		</u-popup>
		
		<!-- 从检查库添加弹出框 -->
		<u-popup :show="showLibraryPopup" mode="center" round="20" @close="showLibraryPopup = false">
			<view class="library-popup">
				<view class="popup-header">
					<view class="popup-title text-bold">选择检查库</view>
					<view class="popup-close" @click="showLibraryPopup = false">×</view>
				</view>
				
				<!-- 搜索框 -->
				<view class="search-box">
					<text class="search-icon">🔍</text>
					<input class="search-input" v-model="libraryKeyword" placeholder="请输入关键词搜索" />
				</view>
				
				<!-- 检查库列表 -->
				<view class="library-list">
					<view 
						class="library-item" 
						v-for="(item, index) in filteredLibraryList" 
						:key="index"
						@click="toggleLibrarySelect(item)"
					>
						<view class="library-checkbox" :class="{ 'library-checkbox-active': selectedLibraries.includes(item.id) }">
							<text v-if="selectedLibraries.includes(item.id)">✓</text>
						</view>
						<view class="library-info">
							<view class="library-name">关联表名：{{ item.name }}</view>
							<view class="library-count text-gray">共{{ item.count }}项</view>
						</view>
					</view>
				</view>
				
				<!-- 添加选中项按钮 -->
				<button class="btn-add-library bg-blue" @click="addSelectedLibrary">添加选中项</button>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue'
	import {addCheckTable} from '/request/api.js'
	
	// 响应式数据  
	const cateId = ref('')
	const cateList = ref([
	    {
	        id: '1',
	        name: '湘西自治州和谐网络科技有限公司'
	    },
	    {
	        id: '2',
	        name: '湘西自治州和谐云大数据科技有限公司'
	    },
	    {
	        id: '3',
	        name: '湘西网络有限公司'
	    },
	])
	  
	// 方法  
	const selectItem = (item) => {  
	  console.log(item);  
	};  
	// 工作日开关
	const value = ref(false)
	// 日期
	const show = ref(false);
	const mode = ref('single');
	
	const confirm = (e) => {
	  console.log(e);
	};
	
	// 手动添加检查项弹窗
	const showAddPopup = ref(false);
	
	const checkForm = reactive({
		projectName: '',
		checkContent: '',
		law: '',
		image: ''
	});
	
	// 选择法规弹窗
	const showLawPopup = ref(false);
	const lawKeyword = ref('');
	const selectedLaw = ref('');
	
	const lawList = ref([
		'中华人民共和国安全生产法 第三十二条',
		'建设项目安全设施"三同时"监督管理办法 第二十条',
		'中华人民共和国职业病防治法 第十七条',
		'中华人民共和国职业病防治法 第十八条',
		'中华人民共和国消防法（2021版）第十一条',
		'建设工程消防监督管理规定 第二十条'
	]);
	
	// 过滤法规列表
	const filteredLawList = computed(() => {
		if (!lawKeyword.value) return lawList.value;
		return lawList.value.filter(item => item.includes(lawKeyword.value));
	});
	
	// 加载更多法规
	const loadMoreLaw = () => {
		uni.showToast({ title: '加载更多...', icon: 'none' });
	};
	
	// 确认选择法规
	const confirmLaw = () => {
		if (selectedLaw.value) {
			checkForm.law = selectedLaw.value;
		}
		showLawPopup.value = false;
	};
	
	// 从检查库添加弹窗
	const showLibraryPopup = ref(false);
	const libraryKeyword = ref('');
	const selectedLibraries = ref([]);
	
	const libraryList = ref([
		{ id: 1, name: '安全生产隐患"常见病"检查诊断表（个性部分）公路养护工程', count: 18 },
		{ id: 2, name: '安全生产隐患"常见病"检查诊断表（个性部分）出租汽车企业', count: 12 },
		{ id: 3, name: '安全生产隐患"常见病"检查诊断表（个性部分）城镇燃气', count: 12 }
	]);
	
	// 过滤检查库列表
	const filteredLibraryList = computed(() => {
		if (!libraryKeyword.value) return libraryList.value;
		return libraryList.value.filter(item => item.name.includes(libraryKeyword.value));
	});
	
	// 切换选择检查库
	const toggleLibrarySelect = (item) => {
		const index = selectedLibraries.value.indexOf(item.id);
		if (index > -1) {
			selectedLibraries.value.splice(index, 1);
		} else {
			selectedLibraries.value.push(item.id);
		}
	};
	
	// 添加选中的检查库
	const addSelectedLibrary = () => {
		if (selectedLibraries.value.length === 0) {
			uni.showToast({ title: '请选择检查库', icon: 'none' });
			return;
		}
		console.log('添加检查库：', selectedLibraries.value);
		uni.showToast({ title: '添加成功', icon: 'success' });
		showLibraryPopup.value = false;
		selectedLibraries.value = [];
	};
	
	// 选择图片
	const chooseImage = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				checkForm.image = res.tempFilePaths[0];
			}
		});
	};
	
	// 提交检查项
	const handleAddCheck = () => {
		if (!checkForm.projectName) {
			uni.showToast({ title: '请输入项目名称', icon: 'none' });
			return;
		}
		if (!checkForm.checkContent) {
			uni.showToast({ title: '请输入检查内容', icon: 'none' });
			return;
		}
		
		console.log('提交检查项：', checkForm);
		uni.showToast({ title: '添加成功', icon: 'success' });
		showAddPopup.value = false;
		
		// 重置表单
		checkForm.projectName = '';
		checkForm.checkContent = '';
		checkForm.law = '';
		checkForm.image = '';
	};
</script>

<style scoped lang="scss">
	.page {
		min-height: 100vh;
		background: #EBF2FC;
	}
	.btn-right {
	  display: flex;
	  justify-content: flex-end;
	}
	.but {
		width: 304rpx;
		height: 72rpx;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		border: 2rpx solid #108FFF;
		color: #108FFF;
		text-align: center;
		line-height: 72rpx;
	}
	
	// 弹出框样式
	.popup-content {
		width: 600rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

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

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

	.popup-body {
		max-height: 700rpx;
		overflow-y: auto;
	}

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

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

	.form-input {
		width: 100%;
		height: 80rpx;
		border: 2rpx solid #E5E5E5;
		border-radius: 12rpx;
		padding: 0 24rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.form-btn {
		width: 100%;
		height: 80rpx;
		border: 2rpx solid #E5E5E5;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.upload-box {
		width: 160rpx;
		height: 160rpx;
		border: 2rpx dashed #ccc;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.upload-add {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.upload-icon {
		font-size: 48rpx;
		color: #999;
	}

	.upload-text {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
	}

	.upload-img {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}

	.popup-footer {
		display: flex;
		justify-content: center;
		gap: 30rpx;
		margin-top: 40rpx;
	}

	.btn-cancel {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border: 2rpx solid #E5E5E5;
		border-radius: 40rpx;
		background: #fff;
		color: #333;
		font-size: 30rpx;
	}

	.btn-confirm {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
	}

	// 选择法规弹窗
	.law-popup {
		width: 600rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		max-height: 80vh;
	}

	.search-box {
		display: flex;
		align-items: center;
		background: #F5F5F5;
		border-radius: 40rpx;
		padding: 16rpx 24rpx;
		margin-bottom: 24rpx;
	}

	.search-icon {
		font-size: 28rpx;
		margin-right: 12rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		background: transparent;
	}

	.law-list {
		max-height: 500rpx;
		overflow-y: auto;
	}

	.law-item {
		padding: 24rpx;
		border: 2rpx solid #E5E5E5;
		border-radius: 12rpx;
		margin-bottom: 16rpx;
		font-size: 28rpx;
		color: #333;
	}

	.law-item-active {
		border-color: #2667E9;
		background: #F0F6FF;
	}

	.load-more {
		text-align: center;
		padding: 24rpx;
		border: 2rpx solid #2667E9;
		border-radius: 40rpx;
		margin-top: 16rpx;
	}

	.law-footer {
		display: flex;
		justify-content: center;
		gap: 30rpx;
		margin-top: 30rpx;
	}

	// 检查库弹窗样式
	.library-popup {
		width: 600rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		max-height: 80vh;
	}

	.library-list {
		max-height: 500rpx;
		overflow-y: auto;
	}

	.library-item {
		display: flex;
		align-items: flex-start;
		padding: 24rpx;
		border: 2rpx solid #E5E5E5;
		border-radius: 12rpx;
		margin-bottom: 16rpx;
	}

	.library-checkbox {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #ccc;
		border-radius: 8rpx;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-top: 4rpx;
	}

	.library-checkbox-active {
		background: #2667E9;
		border-color: #2667E9;
		color: #fff;
	}

	.library-info {
		flex: 1;
	}

	.library-name {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
	}

	.library-count {
		font-size: 24rpx;
		margin-top: 8rpx;
	}

	.btn-add-library {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
		margin-top: 30rpx;
	}
</style>
