<template>
	<div class="dailyreport-statistics-container">
		<el-card>
			<template #header>
				<div class="card-header">
					<span>日报统计</span>
					<div>
						<el-date-picker
							v-model="dateRange"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							@change="loadStatistics"
							style="width: 240px; margin-right: 10px"
						/>
						<el-button @click="loadStatistics">刷新</el-button>
					</div>
				</div>
			</template>

			<!-- 统计卡片 -->
			<el-row :gutter="20" style="margin-bottom: 20px">
				<el-col :span="6">
					<el-card shadow="hover">
						<div class="stat-card">
							<div class="stat-icon" style="background-color: #409eff">
								<el-icon :size="32"><Document /></el-icon>
							</div>
							<div class="stat-content">
								<div class="stat-label">总日报数</div>
								<div class="stat-value">{{ statistics.totalReports || 0 }}</div>
							</div>
						</div>
					</el-card>
				</el-col>

				<el-col :span="6">
					<el-card shadow="hover">
						<div class="stat-card">
							<div class="stat-icon" style="background-color: #67c23a">
								<el-icon :size="32"><Check /></el-icon>
							</div>
							<div class="stat-content">
								<div class="stat-label">已提交</div>
								<div class="stat-value">{{ statistics.submittedCount || 0 }}</div>
							</div>
						</div>
					</el-card>
				</el-col>

				<el-col :span="6">
					<el-card shadow="hover">
						<div class="stat-card">
							<div class="stat-icon" style="background-color: #e6a23c">
								<el-icon :size="32"><Edit /></el-icon>
							</div>
							<div class="stat-content">
								<div class="stat-label">草稿</div>
								<div class="stat-value">{{ statistics.draftCount || 0 }}</div>
							</div>
						</div>
					</el-card>
				</el-col>

				<el-col :span="6">
					<el-card shadow="hover">
						<div class="stat-card">
							<div class="stat-icon" style="background-color: #f56c6c">
								<el-icon :size="32"><TrendCharts /></el-icon>
							</div>
							<div class="stat-content">
								<div class="stat-label">提交率</div>
								<div class="stat-value">{{ statistics.submissionRate || '0%' }}</div>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>

			<!-- 未提交人员列表 -->
			<el-divider />
			<div class="unsubmitted-section">
				<div class="section-header">
					<span class="section-title">未提交人员</span>
					<el-date-picker
						v-model="unsubmittedDate"
						type="date"
						placeholder="选择日期"
						@change="loadUnsubmittedUsers"
						style="width: 200px"
					/>
				</div>

				<el-alert
					v-if="unsubmittedUsers.length > 0"
					:title="`共 ${unsubmittedUsers.length} 人未提交 ${unsubmittedDateStr} 的日报`"
					type="warning"
					:closable="false"
					style="margin-bottom: 15px"
				/>

				<el-table
					v-if="unsubmittedUsers.length > 0"
					:data="unsubmittedUsers"
					style="width: 100%"
					max-height="400"
				>
					<el-table-column type="index" label="序号" width="60" />
					<el-table-column prop="nickName" label="姓名" width="120" />
					<el-table-column prop="phone" label="手机号" width="130" />
					<el-table-column prop="position" label="职位" min-width="120" />
					<el-table-column prop="jobNumber" label="工号" width="100" />
				</el-table>

				<el-empty
					v-else
					:image-size="100"
					description="当日所有用户均已提交日报"
				/>
			</div>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
defineOptions({
	name: 'dailyreport-statistics'
});

import { ref, onMounted, computed } from 'vue';
import { useCool } from '/@/cool';
import { ElMessage } from 'element-plus';
import { Document, Check, Edit, TrendCharts } from '@element-plus/icons-vue';

const { service } = useCool();

// 统计数据
const statistics = ref<any>({});

// 日期范围
const dateRange = ref<any>([
	new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), // 7天前
	new Date() // 今天
]);

// 未提交人员日期
const unsubmittedDate = ref<any>(new Date());

// 未提交人员列表
const unsubmittedUsers = ref<any[]>([]);

// 未提交日期字符串
const unsubmittedDateStr = computed(() => {
	if (unsubmittedDate.value) {
		return unsubmittedDate.value.toISOString().split('T')[0];
	}
	return '';
});

// 加载统计信息
async function loadStatistics() {
	try {
		const params: any = {};

		if (dateRange.value && dateRange.value.length === 2) {
			params.startDate = dateRange.value[0].toISOString().split('T')[0];
			params.endDate = dateRange.value[1].toISOString().split('T')[0];
		}

		const res = await service.dailyreport.report.getStatistics(params);
		statistics.value = res || {};

		console.log('统计信息:', statistics.value);
	} catch (err: any) {
		ElMessage.error(err.message || '加载统计信息失败');
	}
}

// 加载未提交人员列表
async function loadUnsubmittedUsers() {
	try {
		const params: any = {};

		if (unsubmittedDate.value) {
			params.reportDate = unsubmittedDate.value.toISOString().split('T')[0];
		}

		const res = await service.dailyreport.report.getUnsubmittedUsers(params);
		unsubmittedUsers.value = res.users || [];

		console.log('未提交人员:', unsubmittedUsers.value.length);
	} catch (err: any) {
		ElMessage.error(err.message || '加载未提交人员列表失败');
	}
}

// 组件挂载
onMounted(() => {
	loadStatistics();
	loadUnsubmittedUsers();
});
</script>

<style lang="scss" scoped>
.dailyreport-statistics-container {
	padding: 20px;

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.stat-card {
		display: flex;
		align-items: center;
		padding: 10px 0;

		.stat-icon {
			width: 60px;
			height: 60px;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			margin-right: 15px;
		}

		.stat-content {
			flex: 1;

			.stat-label {
				font-size: 14px;
				color: #909399;
				margin-bottom: 5px;
			}

			.stat-value {
				font-size: 24px;
				font-weight: bold;
				color: #303133;
			}
		}
	}

	.unsubmitted-section {
		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;

			.section-title {
				font-size: 16px;
				font-weight: bold;
				color: #303133;
			}
		}
	}
}
</style>
