<template>
	<view class="page padding">
		<!-- 证照列表 -->
		<view class="license-list" v-if="licenseList.length > 0">
			<view class="license-item" v-for="(item, index) in licenseList" :key="item.id">
				<view class="license-info">
					<view class="license-header">
						<text class="license-type">{{ item.type || '未知类型' }}</text>
						<view class="license-actions">
							<text class="action-btn text-blue" @click="handleEdit(item)">编辑</text>
							<text class="action-btn text-red" @click="handleDelete(item)">删除</text>
						</view>
					</view>
					<view class="license-detail">
						<view class="detail-row">
							<text class="label">证件编号：</text>
							<text class="value">{{ item.code || '-' }}</text>
						</view>
						<view class="detail-row">
							<text class="label">有效期：</text>
							<text class="value">{{ item.startDate || '-' }} 至 {{ item.endDate || '-' }}</text>
						</view>
						<view class="detail-row">
							<text class="label">法人：</text>
							<text class="value">{{ item.legalPerson || '-' }}</text>
						</view>
					</view>
					<view class="license-photo" v-if="item.photo">
						<image :src="getImageUrl(item.photo)" mode="aspectFill" @click="previewImage(item.photo)"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<text class="text-gray text-center">暂无证照记录</text>
		</view>
		
		<!-- 新增按钮 -->
		<button class="add-btn cuIcon-add bg-blue round" @click="openAddPopup">+ 新增</button>
		
		<!-- 新增/编辑证照弹窗 -->
		<u-popup :show="showAddPopup" mode="center" round="20" @close="closePopup">
			<view class="popup-content">
				<view class="popup-header">
					<view class="popup-title text-bold">{{ isEdit ? '编辑证照' : '新增证照' }}</view>
					<view class="popup-close" @click="closePopup">×</view>
				</view>
				
				<scroll-view class="popup-body" scroll-y>
					<!-- 部门 -->
					<view class="form-item">
						<view class="form-label">部门<text class="text-red">*</text></view>
						<view class="form-input form-select" @click="showDeptPopup = true">
							<text :class="formData.enterpriseName ? '' : 'text-gray'">
								{{ formData.enterpriseName || '请选择部门' }}
							</text>
						</view>
					</view>
					
					<!-- 证件类型 -->
					<view class="form-item">
						<view class="form-label">证件类型</view>
						<input class="form-input" v-model="formData.type" placeholder="请输入证件类型" />
					</view>
					
					<!-- 证件编号 -->
					<view class="form-item">
						<view class="form-label">证件编号</view>
						<input class="form-input" v-model="formData.code" placeholder="请输入证件编号" />
					</view>
					
					<!-- 开始日期 -->
					<view class="form-item">
						<view class="form-label">开始日期</view>
						<view class="form-input form-select" @click="openDatePicker('start')">
							<text :class="formData.startDate ? '' : 'text-gray'">
								{{ formData.startDate || '请选择开始日期' }}
							</text>
						</view>
					</view>
					
					<!-- 结束日期 -->
					<view class="form-item">
						<view class="form-label">结束日期</view>
						<view class="form-input form-select" @click="openDatePicker('end')">
							<text :class="formData.endDate ? '' : 'text-gray'">
								{{ formData.endDate || '请选择结束日期' }}
							</text>
						</view>
					</view>
					
					<!-- 法人 -->
					<view class="form-item">
						<view class="form-label">法人</view>
						<input class="form-input" v-model="formData.legalPerson" placeholder="请输入法人" />
					</view>
					
					<!-- 封面图片 -->
					<view class="form-item">
						<view class="form-label">封面图片</view>
						<view class="upload-box" @click="chooseImage">
							<view class="upload-add" v-if="!formData.photoPreview">
								<text class="upload-icon">+</text>
								<text class="upload-text">上传照片</text>
							</view>
							<view class="upload-preview" v-else>
								<image :src="formData.photoPreview" mode="aspectFill" class="upload-img"></image>
								<view class="upload-delete" @click.stop="removeImage">×</view>
							</view>
						</view>
					</view>
				</scroll-view>
				
				<view class="popup-footer">
					<button class="btn-cancel" @click="closePopup">取消</button>
					<button class="btn-confirm bg-blue" @click="handleSubmit" :loading="submitting">确定</button>
				</view>
			</view>
		</u-popup>
		
		<!-- 日期选择器 -->
		<u-datetime-picker
			:show="showDatePicker"
			v-model="datePickerValue"
			mode="date"
			@confirm="onDateConfirm"
			@cancel="onDateCancel"
			@close="onDateCancel"
		></u-datetime-picker>
		
		<!-- 选择部门弹窗 -->
		<u-popup :show="showDeptPopup" mode="center" round="20" @close="showDeptPopup = false">
			<view class="dept-popup">
				<view class="popup-header">
					<view class="popup-title text-bold">选择部门</view>
					<view class="popup-close" @click="showDeptPopup = false">×</view>
				</view>
				
				<scroll-view class="dept-list" scroll-y v-if="deptList.length > 0">
					<view 
						class="dept-item" 
						v-for="item in deptList" 
						:key="item.id"
						@click="selectedDept = item"
					>
						<view class="dept-checkbox" :class="{ 'dept-checkbox-active': selectedDept && selectedDept.id === item.id }">
							<text v-if="selectedDept && selectedDept.id === item.id">✓</text>
						</view>
						<text class="dept-name">{{ item.name }}</text>
					</view>
				</scroll-view>
				<view class="text-gray text-center padding" v-else>
					暂无部门数据
				</view>
				
				<button class="btn-dept-confirm bg-blue" @click="confirmDept">确定</button>
			</view>
		</u-popup>
		
		<!-- 删除确认弹窗 -->
		<u-modal
			:show="showDeleteModal"
			title="确认删除"
			content="确定要删除这条证照记录吗？"
			showCancelButton
			@confirm="confirmDelete"
			@cancel="showDeleteModal = false"
		></u-modal>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { 
	getLicenseEnterpriseSelect, 
	getLicenseList, 
	getLicenseDetail, 
	addLicense, 
	updateLicense, 
	deleteLicense 
} from '@/request/three_one_api/license.js';
import { baseUrl, getToken } from '@/request/request.js';

// 证照列表
const licenseList = ref([]);
// 部门列表
const deptList = ref([]);
const selectedDept = ref(null);

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

// 编辑状态
const isEdit = ref(false);
const currentEditId = ref(null);
const currentDeleteItem = ref(null);
const submitting = ref(false);

// 日期选择类型
const datePickerType = ref('start');
// 日期选择器的值（时间戳）
const datePickerValue = ref(Date.now());

// 表单数据
const formData = reactive({
	enterpriseId: '',
	enterpriseName: '',
	type: '',
	code: '',
	startDate: '',
	endDate: '',
	legalPerson: '',
	photo: '',
	photoPreview: ''
});

// 页面加载
onMounted(() => {
	loadLicenseList();
	loadDeptList();
});

// 获取图片完整URL
const getImageUrl = (path) => {
	if (!path) return '';
	if (path.startsWith('http')) return path;
	return baseUrl + path;
};

// 预览图片
const previewImage = (path) => {
	uni.previewImage({
		urls: [getImageUrl(path)]
	});
};

// 加载证照列表
const loadLicenseList = async () => {
	try {
		const res = await getLicenseList();
		if (res.code === 0) {
			licenseList.value = res.data.records || [];
		}
	} catch (err) {
		console.error('获取证照列表失败:', err);
	}
};

// 加载部门列表
const loadDeptList = async () => {
	try {
		const res = await getLicenseEnterpriseSelect();
		if (res.code === 0) {
			deptList.value = res.data || [];
		}
	} catch (err) {
		console.error('获取部门列表失败:', err);
	}
};

// 打开新增弹窗
const openAddPopup = () => {
	resetForm();
	isEdit.value = false;
	currentEditId.value = null;
	showAddPopup.value = true;
};

// 编辑证照
const handleEdit = async (item) => {
	try {
		// 先获取详情
		const res = await getLicenseDetail({ id: item.id });
		if (res.code === 0) {
			const detail = res.data;
			isEdit.value = true;
			currentEditId.value = item.id;
			
			// 填充表单数据
			formData.enterpriseId = detail.enterpriseId || '';
			formData.type = detail.type || '';
			formData.code = detail.code || '';
			formData.startDate = detail.startDate || '';
			formData.endDate = detail.endDate || '';
			formData.legalPerson = detail.legalPerson || '';
			formData.photo = detail.photo || '';
			formData.photoPreview = detail.photo ? getImageUrl(detail.photo) : '';
			
			// 设置部门名称
			const dept = deptList.value.find(d => d.id === detail.enterpriseId);
			formData.enterpriseName = dept ? dept.name : '';
			selectedDept.value = dept || null;
			
			showAddPopup.value = true;
		}
	} catch (err) {
		console.error('获取证照详情失败:', err);
		uni.showToast({ title: '获取详情失败', icon: 'none' });
	}
};

// 删除证照
const handleDelete = (item) => {
	currentDeleteItem.value = item;
	showDeleteModal.value = true;
};

// 确认删除
const confirmDelete = async () => {
	if (!currentDeleteItem.value) return;
	
	try {
		const res = await deleteLicense({ id: currentDeleteItem.value.id });
		if (res.code === 0) {
			uni.showToast({ title: '删除成功', icon: 'success' });
			loadLicenseList();
		}
	} catch (err) {
		console.error('删除失败:', err);
		uni.showToast({ title: '删除失败', icon: 'none' });
	} finally {
		showDeleteModal.value = false;
		currentDeleteItem.value = null;
	}
};

// 关闭弹窗
const closePopup = () => {
	showAddPopup.value = false;
	resetForm();
};

// 重置表单
const resetForm = () => {
	formData.enterpriseId = '';
	formData.enterpriseName = '';
	formData.type = '';
	formData.code = '';
	formData.startDate = '';
	formData.endDate = '';
	formData.legalPerson = '';
	formData.photo = '';
	formData.photoPreview = '';
	selectedDept.value = null;
	isEdit.value = false;
	currentEditId.value = null;
};

// 确认选择部门
const confirmDept = () => {
	if (selectedDept.value) {
		formData.enterpriseId = selectedDept.value.id;
		formData.enterpriseName = selectedDept.value.name;
	}
	showDeptPopup.value = false;
};

// 打开日期选择器
const openDatePicker = (type) => {
	datePickerType.value = type;
	
	// 根据已有的日期设置选择器初始值
	let currentDate = '';
	if (type === 'start' && formData.startDate) {
		currentDate = formData.startDate;
	} else if (type === 'end' && formData.endDate) {
		currentDate = formData.endDate;
	}
	
	// 如果有已选择的日期，转换为时间戳
	if (currentDate) {
		datePickerValue.value = new Date(currentDate).getTime();
	} else {
		datePickerValue.value = Date.now();
	}
	
	showDatePicker.value = true;
};

// 日期选择取消/关闭
const onDateCancel = () => {
	showDatePicker.value = false;
};

// 日期选择确认
const onDateConfirm = (e) => {
	// 使用 v-model 绑定的 datePickerValue
	const timestamp = datePickerValue.value;
	
	// 验证时间戳
	if (!timestamp || isNaN(timestamp)) {
		console.error('无效的日期值:', timestamp);
		showDatePicker.value = false;
		return;
	}
	
	const date = new Date(timestamp);
	
	// 验证日期是否有效
	if (isNaN(date.getTime())) {
		console.error('无效的日期:', date);
		showDatePicker.value = false;
		return;
	}
	
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0');
	const day = String(date.getDate()).padStart(2, '0');
	const dateStr = `${year}-${month}-${day}`;
	
	if (datePickerType.value === 'start') {
		formData.startDate = dateStr;
	} else {
		formData.endDate = dateStr;
	}
	showDatePicker.value = false;
};

// 选择图片
const chooseImage = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			const tempFilePath = res.tempFilePaths[0];
			formData.photoPreview = tempFilePath;
			// 上传图片
			uploadImage(tempFilePath);
		}
	});
};

// 上传图片
const uploadImage = (filePath) => {
	uni.showLoading({ title: '上传中...' });
	
	uni.uploadFile({
		url: baseUrl + '/frontend/attachment/upload',
		filePath: filePath,
		name: 'file',
		header: {
			'Authorization': getToken()
		},
		success: (uploadRes) => {
			uni.hideLoading();
			try {
				const data = JSON.parse(uploadRes.data);
				if (data.code === 0 && data.data) {
					formData.photo = data.data.url || data.data;
					uni.showToast({ title: '上传成功', icon: 'success' });
				} else {
					uni.showToast({ title: data.msg || '上传失败', icon: 'none' });
					formData.photoPreview = '';
				}
			} catch (e) {
				console.error('解析上传结果失败:', e);
				uni.showToast({ title: '上传失败', icon: 'none' });
				formData.photoPreview = '';
			}
		},
		fail: (err) => {
			uni.hideLoading();
			console.error('上传失败:', err);
			uni.showToast({ title: '上传失败', icon: 'none' });
			formData.photoPreview = '';
		}
	});
};

// 移除图片
const removeImage = () => {
	formData.photo = '';
	formData.photoPreview = '';
};

// 提交表单
const handleSubmit = async () => {
	// 表单验证
	if (!formData.enterpriseId) {
		uni.showToast({ title: '请选择部门', icon: 'none' });
		return;
	}
	
	submitting.value = true;
	
	try {
		const submitData = {
			enterpriseId: formData.enterpriseId,
			type: formData.type,
			code: formData.code,
			startDate: formData.startDate,
			endDate: formData.endDate,
			legalPerson: formData.legalPerson,
			photo: formData.photo
		};
		
		let res;
		if (isEdit.value) {
			// 编辑
			submitData.id = currentEditId.value;
			res = await updateLicense(submitData);
		} else {
			// 新增
			res = await addLicense(submitData);
		}
		
		if (res.code === 0) {
			uni.showToast({ 
				title: isEdit.value ? '修改成功' : '新增成功', 
				icon: 'success' 
			});
			closePopup();
			loadLicenseList();
		}
	} catch (err) {
		console.error('提交失败:', err);
		uni.showToast({ title: '操作失败', icon: 'none' });
	} finally {
		submitting.value = false;
	}
};
</script>

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

// 证照列表样式
.license-list {
	padding-bottom: 20rpx;
}

.license-item {
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.license-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
	padding-bottom: 16rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.license-type {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.license-actions {
	display: flex;
	gap: 20rpx;
}

.action-btn {
	font-size: 28rpx;
	padding: 8rpx 16rpx;
}

.license-detail {
	margin-bottom: 16rpx;
}

.detail-row {
	display: flex;
	margin-bottom: 12rpx;
	font-size: 28rpx;
	
	.label {
		color: #999;
		width: 160rpx;
		flex-shrink: 0;
	}
	
	.value {
		color: #333;
		flex: 1;
	}
}

.license-photo {
	width: 200rpx;
	height: 150rpx;
	border-radius: 8rpx;
	overflow: hidden;
	
	image {
		width: 100%;
		height: 100%;
	}
}

// 空状态
.empty-state {
	padding: 200rpx 0;
	text-align: center;
}

// 新增按钮
.add-btn {
	position: fixed;
	bottom: 40rpx;
	left: 30rpx;
	right: 30rpx;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
}

// 弹出框样式
.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-select {
	display: flex;
	align-items: center;
	line-height: 80rpx;
}

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

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

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

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

.upload-preview {
	width: 100%;
	height: 100%;
	position: relative;
}

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

.upload-delete {
	position: absolute;
	top: -16rpx;
	right: -16rpx;
	width: 40rpx;
	height: 40rpx;
	background: #ff4d4f;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}

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

// 部门选择弹窗
.dept-popup {
	width: 600rpx;
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
}

.dept-list {
	max-height: 400rpx;
	overflow-y: auto;
	margin-bottom: 30rpx;
}

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

.dept-checkbox {
	width: 36rpx;
	height: 36rpx;
	border: 2rpx solid #ccc;
	border-radius: 6rpx;
	margin-right: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

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

.dept-name {
	font-size: 28rpx;
	color: #333;
}

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