<template>
	<view class="page padding">
		<view class="text-gray text-center" v-if="!hasData">暂无证件照记录</view>
		<button class="cuIcon-add bg-blue round 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="form-item">
						<view class="form-label">部门<text class="text-red">*</text></view>
						<view class="form-input form-select" @click="showDeptPopup = true">
							<text :class="formData.dept ? '' : 'text-gray'">
								{{ formData.dept || '请选择部门' }}
							</text>
						</view>
					</view>
					
					<!-- 证件类型 -->
					<view class="form-item">
						<view class="form-label">证件类型</view>
						<input class="form-input" v-model="formData.idType" placeholder="请输入证件类型" />
					</view>
					
					<!-- 证件编号 -->
					<view class="form-item">
						<view class="form-label">证件编号</view>
						<input class="form-input" v-model="formData.number" placeholder="请输入证件编号" />
					</view>
					<!-- 开始日期 -->
					<view class="form-item">
						<view class="form-label">开始日期</view>
						<view class="form-input form-select" @click="showDatePicker = true">
							<text :class="formData.expireDate ? '' : 'text-gray'">
								{{ formData.expireDate || '请选择开始时间' }}
							</text>
						</view>
					</view>
					<!-- 结束日期 -->
					<view class="form-item">
						<view class="form-label">结束日期</view>
						<view class="form-input form-select" @click="showDatePicker = true">
							<text :class="formData.expireDate ? '' : 'text-gray'">
								{{ formData.expireDate || '请选择结束时间' }}
							</text>
						</view>
					</view>
					
					<!-- 上传证件照 -->
					<view class="form-item">
						<view class="form-label">封面图片</view>
						<view class="upload-box" @click="chooseImage">
							<view class="upload-add" v-if="!formData.image">
								<text class="upload-icon">+</text>
								<text class="upload-text">上传照片</text>
							</view>
							<image v-else :src="formData.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="handleSubmit">确定</button>
				</view>
			</view>
		</u-popup>
		
		<!-- 日期选择器 -->
		<u-datetime-picker
			:show="showDatePicker"
			mode="date"
			@confirm="onDateConfirm"
			@cancel="showDatePicker = false"
		></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>
				
				<view class="dept-list">
					<view 
						class="dept-item" 
						v-for="(item, index) in deptList" 
						:key="index"
						@click="selectedDept = item"
					>
						<view class="dept-checkbox" :class="{ 'dept-checkbox-active': selectedDept === item }">
							<text v-if="selectedDept === item">✓</text>
						</view>
						<text class="dept-name">{{ item }}</text>
					</view>
				</view>
				
				<button class="btn-dept-confirm bg-blue" @click="confirmDept">确定</button>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';

const hasData = ref(false);
const showAddPopup = ref(false);
const showDatePicker = ref(false);
const showDeptPopup = ref(false);

// 部门列表
const deptList = ref([
	'湘西自治州和谐网络科技有限公司',
	'湘西自治州和谐云大数据科技有限公司',
	'湘西网络有限公司'
]);
const selectedDept = ref('');

const formData = reactive({
	dept: '',
	type: '',
	idType: '',
	number: '',
	startDate: '',
	expireDate: '',
	image: ''
});

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

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

// 日期选择确认
const onDateConfirm = (e) => {
	const date = new Date(e.value);
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0');
	const day = String(date.getDate()).padStart(2, '0');
	formData.expireDate = `${year}-${month}-${day}`;
	showDatePicker.value = false;
};

// 提交表单
const handleSubmit = () => {
	if (!formData.dept) {
		uni.showToast({ title: '请选择部门', icon: 'none' });
		return;
	}
	
	console.log('提交数据：', formData);
	uni.showToast({ title: '新增成功', icon: 'success' });
	showAddPopup.value = false;
	
	// 重置表单
	formData.dept = '';
	formData.type = '';
	formData.number = '';
	formData.startDate = '';
	formData.expireDate = '';
	formData.image = '';
	selectedDept.value = '';
};
</script>

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

// 弹出框样式
.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;
}

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

// 部门选择弹窗
.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>
