<template>
	<el-container>
		<!-- 顶部 Header -->
		<el-header>
			<backIndex />
		</el-header>

		<!-- 主体内容 -->
		<el-container class="ain">
			<!-- 右侧主要内容 -->
			<el-main class="el-main">
				<div class="filter-bar"
					style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;">
					<div style="display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%;">
						<!-- 筛选区域 -->
						<el-input placeholder="请输入标题" style="width: 300px;" />
						<el-date-picker placeholder="请选择日期" type="date" style="width: 200px;" />
						<el-button type="primary">查询</el-button>
						<el-button>重置</el-button>
					</div>

					<!-- 发布按钮 -->
					<el-button type="success" @click="openPublishDialog">添加发布</el-button>
				</div>

				<!-- 表格区域 -->
				<!-- 表格区域 -->
				<div style="display: flex; justify-content: center; width: 100%; padding: 20px 0;">
					<el-table :data="tableData" style="width: 75%; background-color: #fff; border-radius: 5px;">
						<el-table-column prop="title" label="公告标题" width="400" />
						<el-table-column prop="department" label="发布部门" width="200" />
						<el-table-column prop="date" label="预计发布时间" width="200" />
						<el-table-column prop="status" label="状态" width="150">
							<template #default="scope">
								<el-tag type="success" v-if="scope.row.status === '已发布'">已发布</el-tag>
								<el-tag type="info" v-else>未发布</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="400">
							<template #default="scope">
								<el-button v-if="scope.row.status === '未发布'" type="success" size="small"
									@click="publish(scope.row)">发布</el-button>
								<el-button v-else type="warning" size="small"
									@click="unpublish(scope.row)">撤回</el-button>
								<el-button type="primary" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
								<el-button type="danger" size="small" @click="remove(scope.row)">删除</el-button>
								<el-button type="info" size="small" @click="viewDetails(scope.row)">查看详情</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>


				<!-- 分页 -->
				<div style="display: flex; justify-content: center; margin-top: 20px;">
					<el-pagination background layout="prev, pager, next" :total="30" />
				</div>

			</el-main>
		</el-container>

		<!-- 页脚 -->
		<el-footer>
			<Footer />
		</el-footer>

		<!-- 发布公告的弹窗 -->
		<el-dialog title="发布公告" v-model="dialogVisible" width="600px" align-center>
			<el-form :model="formData" label-width="120px">
				<el-form-item label="公告标题">
					<el-input v-model="formData.title" placeholder="请输入公告标题" />
				</el-form-item>
				<el-form-item label="公告内容">
					<el-input type="textarea" v-model="formData.content" placeholder="请输入公告内容" />
				</el-form-item>
				<el-form-item label="预计发布时间">
					<el-date-picker v-model="formData.date" type="date" placeholder="请选择日期" />
				</el-form-item>
				<el-form-item label="发布部门">
					<el-input v-model="formData.department" placeholder="请输入发布部门" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="savePublish">保存</el-button>
			</div>
		</el-dialog>


		<!-- 编辑公告的弹窗 -->
		<el-dialog title="编辑公告" v-model="editDialogVisible" width="600px" align-center>
			<el-form :model="editFormData" label-width="120px">
				<el-form-item label="公告标题">
					<el-input v-model="editFormData.title" placeholder="请输入公告标题" />
				</el-form-item>
				<el-form-item label="公告内容">
					<el-input type="textarea" v-model="editFormData.content" placeholder="请输入公告内容" />
				</el-form-item>
				<el-form-item label="预计发布时间">
					<el-date-picker v-model="editFormData.date" type="date" placeholder="请选择日期" />
				</el-form-item>
				<el-form-item label="发布部门">
					<el-input v-model="editFormData.department" placeholder="请输入发布部门" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveEdit">保存</el-button>
			</div>
		</el-dialog>

		<!-- 查看公告详情弹窗 -->
		<el-dialog title="公告详情" v-model="detailsDialogVisible" width="600px" align-center>
			<el-row v-if="viewFormData" class="details-content">
				<el-row class="detail-item"><strong>标题：</strong>{{ viewFormData.title }}</el-row>
				<el-row class="detail-item"><strong>内容：</strong>
					<el-row class="detail-item content-item">{{ viewFormData.content }}</el-row>
				</el-row>
				<el-row class="detail-item"><strong>日期：</strong>{{ viewFormData.date }}</el-row>
				<el-row class="detail-item"><strong>部门：</strong>{{ viewFormData.department }}</el-row>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="detailsDialogVisible = false">关闭</el-button>
			</span>
		</el-dialog>
	</el-container>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';

// 数据源
const tableData = reactive([
	{ id: '1', title: '双十一关于快递员公告', department: '运输部', date: '2021-10-27', content: '新华社利马11月14日电（记者 张远、郝云甫）当地时间11月14日下午，国家主席习近平乘专机抵达利马，应秘鲁共和国总统博鲁阿尔特邀请，出席亚太经合组织第三十一次领导人非正式会议并对秘鲁进行国事访问。' + '习近平乘专机抵达利马卡亚俄空军基地时，秘鲁部长会议主席阿德里安森等高级官员热情迎接。当地学生向习近平献花，用中文对习近平到访表示热烈欢迎。礼兵分列红毯两侧致敬。', status: '未发布' },
	{ id: '2', title: '关于优化用户对寄件功能的完善', department: '寄件部', date: '2021-10-27', content: '这是测试内容2', status: '未发布' },
	{ id: '3', title: '因天气原因导致部分地区无法或延迟送达的地区', department: '快递部', date: '2021-10-26', content: '这是测试内容3', status: '未发布' },
	{ id: '4', title: '双十一关于快递员公告', department: '运输部', date: '2021-10-27', content: '新华社利马11月14日电（记者 张远、郝云甫）当地时间11月14日下午，国家主席习近平乘专机抵达利马，应秘鲁共和国总统博鲁阿尔特邀请，出席亚太经合组织第三十一次领导人非正式会议并对秘鲁进行国事访问。' + '习近平乘专机抵达利马卡亚俄空军基地时，秘鲁部长会议主席阿德里安森等高级官员热情迎接。当地学生向习近平献花，用中文对习近平到访表示热烈欢迎。礼兵分列红毯两侧致敬。', status: '未发布' },
	{ id: '5', title: '关于优化用户对寄件功能的完善', department: '寄件部', date: '2021-10-27', content: '这是测试内容2', status: '未发布' },
	{ id: '6', title: '因天气原因导致部分地区无法或延迟送达的地区', department: '快递部', date: '2021-10-26', content: '这是测试内容3', status: '未发布' },
	{ id: '7', title: '双十一关于快递员公告', department: '运输部', date: '2021-10-27', content: '新华社利马11月14日电（记者 张远、郝云甫）当地时间11月14日下午，国家主席习近平乘专机抵达利马，应秘鲁共和国总统博鲁阿尔特邀请，出席亚太经合组织第三十一次领导人非正式会议并对秘鲁进行国事访问。' + '习近平乘专机抵达利马卡亚俄空军基地时，秘鲁部长会议主席阿德里安森等高级官员热情迎接。当地学生向习近平献花，用中文对习近平到访表示热烈欢迎。礼兵分列红毯两侧致敬。', status: '未发布' },
	{ id: '8', title: '关于优化用户对寄件功能的完善', department: '寄件部', date: '2021-10-27', content: '这是测试内容2', status: '未发布' },
	{ id: '9', title: '因天气原因导致部分地区无法或延迟送达的地区', department: '快递部', date: '2021-10-26', content: '这是测试内容3', status: '未发布' },
	{ id: '10', title: '双十一关于快递员公告', department: '运输部', date: '2021-10-27', content: '新华社利马11月14日电（记者 张远、郝云甫）当地时间11月14日下午，国家主席习近平乘专机抵达利马，应秘鲁共和国总统博鲁阿尔特邀请，出席亚太经合组织第三十一次领导人非正式会议并对秘鲁进行国事访问。' + '习近平乘专机抵达利马卡亚俄空军基地时，秘鲁部长会议主席阿德里安森等高级官员热情迎接。当地学生向习近平献花，用中文对习近平到访表示热烈欢迎。礼兵分列红毯两侧致敬。', status: '未发布' },
	{ id: '11', title: '关于优化用户对寄件功能的完善', department: '寄件部', date: '2021-10-27', content: '这是测试内容2', status: '未发布' },
	{ id: '12', title: '因天气原因导致部分地区无法或延迟送达的地区', department: '快递部', date: '2021-10-26', content: '这是测试内容3', status: '未发布' },

]);

// 用一个计数器来生成唯一的 ID
let nextId = 4;

// 发布弹窗的控制
const dialogVisible = ref(false);
const formData = reactive({
	id: '',
	title: '',
	content: '',
	date: new Date(),
	department: '',
});

const publish = (row) => {
	row.status = '已发布';
	// console.log(`公告 "${row.id}" 已发布`);
};

const unpublish = (row) => {
	row.status = '未发布';
	// console.log(`公告 "${row.id}" 已撤回发布`);
};

// 编辑弹窗的控制
const editDialogVisible = ref(false);
const editFormData = reactive({
	id: '',
	title: '',
	content: '',
	date: new Date(),
	department: '',
});

// 查看详情弹窗的控制
const detailsDialogVisible = ref(false);
const viewFormData = reactive({
	id: '',
	title: '',
	content: '',
	date: '',
	department: '',
});

// 打开发布弹窗
const openPublishDialog = () => {
	dialogVisible.value = true;
};

// 打开编辑弹窗
const openEditDialog = (row: any) => {
	Object.assign(editFormData, row);
	editFormData.date = new Date(row.date);
	editDialogVisible.value = true;
};

// 打开查看详情弹窗
const viewDetails = (row: any) => {
	// 填充查看详情的表单数据
	Object.assign(viewFormData, row);
	detailsDialogVisible.value = true;
};

// 保存发布公告
const savePublish = () => {
	if (formData.title && formData.content && formData.date && formData.department) {
		const newId = nextId++;
		tableData.push({
			...formData,
			date: formData.date.getFullYear() + '-' + (formData.date.getMonth() + 1).toString().padStart(2, '0') + '-' + formData.date.getDate().toString().padStart(2, '0'),
			status: '未发布',
		});
		// 清空表单数据
		Object.assign(formData, {
			title: '',
			content: '',
			date: '',
			department: '',
		});
	}
	// console.log('保存公告:', formData.id);
	dialogVisible.value = false;
};

// 保存编辑内容
const saveEdit = () => {
	const formattedDate = editFormData.date.getFullYear() + '-' + (editFormData.date.getMonth() + 1).toString().padStart(2, '0') + '-' + editFormData.date.getDate().toString().padStart(2, '0');
	const index = tableData.findIndex(item => item.id === editFormData.id);
	if (index !== -1) {
		const updatedRow = {
			...tableData[index],
			title: editFormData.title,
			content: editFormData.content,
			department: editFormData.department,
			date: formattedDate,
		};
		tableData[index] = updatedRow; // 更新表格数据
	}

	editDialogVisible.value = false;
};

// 删除公告
const remove = (row: any) => {
	tableData.splice(tableData.indexOf(row), 1);
	// console.log('删除:', row);
};
</script>

<style scoped>
.el-main {
	padding: 20px;
	background-color: #ecf0f1;
}

.ain {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}


.el-footer {
	color: #fff;
	text-align: center;
}

.details-content {
	display: flex;
	flex-direction: column;
	padding-right: 15px;
}

.detail-item {
	margin-bottom: 10px;
	line-height: 1.5;
}

.details-content strong {
	margin-right: 10px;
}

.content-item {
	display: flex;
	flex-direction: column;
}

.dialog-footer {
	display: flex;
	justify-content: center;
	/* 水平居中 */
	gap: 20px;
	/* 按钮之间的间距 */
}

.content-box {
	max-height: 200px;
	overflow-y: auto;
	padding: 5px;
	border: 1px solid #ddd;
	margin-top: 5px;
}
</style>