<template>
	<view class="container">
		<!-- 数据列表 -->
		<view class="table-wrapper">
			<scroll-view scroll-x class="table-scroll">
				<view class="table-container">
					<view class="table-header">
						<view class="header-cell">项目代号</view>
						<view class="header-cell">项目名称</view>
						<view class="header-cell">项目编号</view>
						<view class="header-cell">经办人</view>
						<view class="header-cell">工作地点</view>
						<view class="header-cell">国内/国外</view>
						<view class="header-cell">报工时间</view>
					</view>
					
					<view class="table-body">
						<view 
							v-for="(item, index) in projectReportList" 
							:key="item.reportId" 
							class="table-row"
						>
							<view class="table-cell">
								<u-tag v-if="!item.projectCode" type="error" text="无"></u-tag>
								<u-tag v-else :text="item.projectCode"></u-tag>
							</view>
							<view class="table-cell">
								<text v-if="item.prePay > 0">⭐</text>
								<text>{{ item.projectName }}</text>
							</view>
							<view class="table-cell">{{ item.projectNum }}</view>
							<view class="table-cell">
								<text>{{ item.nickName }}</text>
								<text v-if="item.deptName">({{ item.deptName }})</text>
							</view>
							<view class="table-cell">{{ item.workPlace }}</view>
							<view class="table-cell">
								<u-tag :type="item.workType === 0 ? 'primary' : 'warning'" :text="item.workType === 0 ? '国内' : '国外'"></u-tag>
							</view>
							<view class="table-cell">{{ formatDate(item.createTime) }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 分页 -->
		<u-loadmore 
			v-if="total > 0"
			:status="loadMoreStatus"
			@loadmore="loadMore"
		></u-loadmore>

		<!-- 圆形新增按钮 -->
		<view class="fab-button" @click="handleAdd">
			<u-icon name="plus" color="#fff" size="30"></u-icon>
		</view>

		<!-- 新增弹窗 -->
		<uni-popup ref="popup" type="bottom" :mask-click="false">
			<view class="form-popup-content">
				<view class="popup-header">
					<text class="popup-title">{{ title }}</text>
					<u-icon name="close" @click="cancel" size="40"></u-icon>
				</view>
				
				<scroll-view scroll-y class="form-content">
					<view class="form-container">
						<view class="form-item">
							<view class="form-label">工作地点</view>
							<u-input v-model="form.workPlace" placeholder="请输入工作地点"></u-input>
						</view>
						
						<view class="form-item">
							<view class="form-label">是否出差</view>
							<u-radio-group v-model="form.isTrip">
								<u-radio :name="1" label="是"></u-radio>
								<u-radio :name="0" label="否"></u-radio>
							</u-radio-group>
						</view>
						
						<view v-if="form.isTrip === 1" class="form-item">
							<view class="form-label">国内/国外</view>
							<u-radio-group v-model="form.workType">
								<u-radio :name="0" label="国内"></u-radio>
								<u-radio :name="1" label="国外"></u-radio>
							</u-radio-group>
						</view>
						
						<view class="form-item">
							<view class="form-label">请选择项目</view>
							<uni-data-select
								v-model="form.projectId"
								:localdata="projectList"
								placeholder="请选择项目"
								@change="handleProjectChange"
							></uni-data-select>
						</view>
						
						<view class="form-item">
							<view class="form-label">报工内容</view>
							<u-textarea
								v-model="form.content"
								placeholder="请输入报工内容"
								:height="200"
							></u-textarea>
						</view>
						
						<view class="form-item">
							<view class="form-label">备注</view>
							<u-input v-model="form.remark" placeholder="请输入备注"></u-input>
						</view>
					</view>
				</scroll-view>
				
				<view class="popup-footer">
					<u-button type="primary" @click="submitForm" :loading="buttonLoading">确定</u-button>
					<u-button @click="cancel">取消</u-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { listProjectReport, addProjectReport } from '@/api/oa/projectReport'
import { listProject } from '@/api/oa/project'
import { listDept } from '@/api/oa/dept'

export default {
	data() {
		return {
			// 按钮loading
			buttonLoading: false,
			// 遮罩层
			loading: true,
			// 总条数
			total: 0,
			// 项目报工表格数据
			projectReportList: [],
			// 弹出层标题
			title: "",

			// 项目列表
			projectList: [],
			// 部门列表
			deptList: [],
			// 表单参数
			form: {},
			// 加载更多状态
			loadMoreStatus: 'loadmore',
			// 分页参数
			queryParams: {
				pageNum: 1,
				pageSize: 10
			},
			// 表单校验规则
			rules: {
				workPlace: [
					{ required: true, message: "工作地点不能为空", trigger: "blur" }
				],
				projectId: [
					{ required: true, message: "项目不能为空", trigger: "blur" }
				],
				content: [
					{ required: true, message: "报工内容不能为空", trigger: "blur" }
				],
				isTrip: [
					{ required: true, message: '请选择是否出差', trigger: 'change' }
				],
				workType: [
					{
						required: true,
						message: '请选择出差地点',
						trigger: 'change',
						validator: (rule, value, callback) => {
							if (this.form.isTrip === 1 && !value && value !== 0) {
								callback(new Error('请选择出差地点'));
							} else {
								callback();
							}
						}
					}
				]
			}
		}
	},
	onLoad() {
		this.getList();
	},
	methods: {
		// 格式化日期
		formatDate(date) {
			if (!date) return '';
			const d = new Date(date);
			return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
		},
		
		// 获取项目列表
		getProjectList() {
			listProject({ pageNum: 1, pageSize: 9999 }).then(res => {
				const rawData = res.rows || [];
				// 按照 uni-data-select 的标准格式处理数据
				this.projectList = rawData.map(item => ({
					value: item.projectId,
					text: item.projectName || '未命名项目',
					// 保留原始数据用于提交
					projectId: item.projectId,
					projectName: item.projectName || '未命名项目',
					projectNum: item.projectNum,
					projectCode: item.projectCode
				}));
				console.log('处理后的项目列表数据:', this.projectList);
				// 检查数据结构
				if (this.projectList.length > 0) {
					console.log('第一个项目数据:', this.projectList[0]);
				}
			}).catch(err => {
				console.error('获取项目列表失败:', err);
				uni.showToast({
					title: '获取项目列表失败',
					icon: 'none'
				});
			});
		},
		
		// 获取部门列表
		getDeptList() {
			listDept().then(res => {
				this.deptList = res.data || [];
			}).catch(err => {
				console.error('获取部门列表失败:', err);
			});
		},
		
		// 查询项目报工列表
		getList() {
			this.loading = true;
			listProjectReport(this.queryParams).then(response => {
				this.projectReportList = response.rows || [];
				this.total = response.total || 0;
				this.loading = false;
				this.getProjectList();
				// this.getDeptList();
			}).catch(err => {
				console.error('获取报工列表失败:', err);
				this.loading = false;
				uni.showToast({
					title: '获取数据失败',
					icon: 'none'
				});
			});
		},
		
		// 新增
		handleAdd() {
			this.reset();
			this.title = "添加项目报工";
			this.$refs.popup.open();
		},
		
		// 提交表单
		submitForm() {
			// 手动验证表单
			if (!this.form.workPlace) {
				uni.showToast({
					title: '工作地点不能为空',
					icon: 'none'
				});
				return;
			}
			
			if (this.form.isTrip === undefined) {
				uni.showToast({
					title: '请选择是否出差',
					icon: 'none'
				});
				return;
			}
			
			if (this.form.isTrip === 1 && this.form.workType === undefined) {
				uni.showToast({
					title: '请选择出差地点',
					icon: 'none'
				});
				return;
			}
			
			if (!this.form.projectId) {
				uni.showToast({
					title: '项目不能为空',
					icon: 'none'
				});
				return;
			}
			
			if (!this.form.content) {
				uni.showToast({
					title: '报工内容不能为空',
					icon: 'none'
				});
				return;
			}
			
			// 验证通过，提交表单
			this.buttonLoading = true;
			
			// 获取选中的项目信息
			const selectedProject = this.projectList.find(p => p.value === this.form.projectId);
			
			const submitData = {
				...this.form,
				projectName: selectedProject?.projectName || '',
				projectNum: selectedProject?.projectNum || '',
				projectCode: selectedProject?.projectCode || null
			};
			
			addProjectReport(submitData).then(response => {
				this.buttonLoading = false;
				uni.showToast({
					title: '新增成功',
					icon: 'success'
				});
				this.$refs.popup.close();
				this.getList(); // 重新获取列表
			}).catch(err => {
				this.buttonLoading = false;
				console.error('新增失败:', err);
				uni.showToast({
					title: '新增失败',
					icon: 'none'
				});
			});
		},
		
		// 取消
		cancel() {
			this.$refs.popup.close();
			this.reset();
		},
		
		// 重置表单
		reset() {
			this.form = {
				workPlace: '',
				projectId: null,
				content: '',
				remark: '',
				isTrip: undefined,
				workType: undefined
			};
		},
		
		// 加载更多
		loadMore() {
			if (this.projectReportList.length >= this.total) {
				this.loadMoreStatus = 'nomore';
				return;
			}
			
			this.queryParams.pageNum++;
			this.loadMoreStatus = 'loading';
			
			listProjectReport(this.queryParams).then(response => {
				const newData = response.rows || [];
				this.projectReportList = [...this.projectReportList, ...newData];
				this.loadMoreStatus = 'loadmore';
			}).catch(err => {
				console.error('加载更多失败:', err);
				this.loadMoreStatus = 'loadmore';
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
			});
		},
		
		// 项目选择变化处理
		handleProjectChange(value) {
			console.log('项目选择变化:', value);
			this.form.projectId = value;
			// 获取选中的项目信息
			const selectedProject = this.projectList.find(p => p.value === value);
			if (selectedProject) {
				console.log('选中的项目:', selectedProject);
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.table-wrapper {
	background-color: #fff;
	border-radius: 10rpx;
	overflow: hidden;
}

.table-scroll {
	width: 100%;
}

.table-container {
	min-width: 1400rpx; // 设置最小宽度，确保表格内容不会被压缩
}

.table-header {
	display: flex;
	background-color: #f8f9fa;
	border-bottom: 1rpx solid #e9ecef;
	
	.header-cell {
		width: 200rpx; // 固定列宽
		padding: 20rpx 10rpx;
		text-align: center;
		font-weight: bold;
		font-size: 28rpx;
		flex-shrink: 0; // 防止列被压缩
	}
}

.table-body {
	.table-row {
		display: flex;
		border-bottom: 1rpx solid #e9ecef;
		
		&:hover {
			background-color: #f8f9fa;
		}
		
		.table-cell {
			width: 200rpx; // 固定列宽
			padding: 20rpx 10rpx;
			text-align: center;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			flex-shrink: 0; // 防止列被压缩
			word-break: break-all; // 长文本换行
		}
	}
}

.form-popup-content {
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	overflow: hidden;
	width: 100%;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #e9ecef;
		
		.popup-title {
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	
	.form-content {
		padding: 30rpx;
		flex: 1;
		overflow-y: auto;
	}
	
	.form-container {
		.form-item {
			margin-bottom: 40rpx;
			
			.form-label {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
				font-weight: 500;
			}
		}
	}
	
	.popup-footer {
		display: flex;
		justify-content: center;
		gap: 20rpx;
		padding: 30rpx;
		border-top: 1rpx solid #e9ecef;
	}
}

.fab-button {
	position: fixed;
	bottom: 20rpx;
	right: 20rpx;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: #007bff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	padding: 20rpx;
}
</style>
