<template>
	<el-container style="height: 100vh;">
		<!-- 左侧菜单 -->
		<el-aside width="200px" style="background-color: #f5f7fa; border-right: 1px solid #e6e6e6;">
			<el-menu :default-active="activeMenu" @select="handleMenuSelect" router mode="vertical">
				<el-menu-item index="sendMsgMngr">
					<template #title>消息推送列表</template>
				</el-menu-item>
				<el-menu-item index="model_mngr">
					<template #title>模板管理</template>
				</el-menu-item>
			</el-menu>
		</el-aside>

		<!-- 右侧内容 -->
		<el-main>
			<!-- 消息推送列表 -->
			<div v-if="activeMenu === 'sendMsgMngr'">
				<h2>消息推送列表</h2>
				<div style="display: flex;align-items: center;margin-top: 20px;">
					<el-input v-model.number="username" ref="usernameRef" style="width: 250px;margin-right: 8px;"
						placeholder="" />
					<el-button style="width: 80px" type="primary" @click="login(ruleFormRef)"
						 >搜索</el-button>
				</div>
				<el-table :data="pushList" style="width: 100%; margin-top: 20px;">
					<el-table-column prop="type" label="推送类型" width="180" />
					<el-table-column prop="channel" label="推送渠道" width="120" />
					<el-table-column prop="content" label="推送内容" />
					<el-table-column label="操作" width="120">
						<template #default="{ row }">
							<el-button size="small" type="primary" @click="handleEdit(row)">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!-- 模板管理 -->
			<div v-else-if="activeMenu === 'model_mngr'">
				<h2>模板管理</h2>
				<div style="display: flex;align-items: center;margin-top: 20px;">
					<el-input v-model.number="username" ref="usernameRef" style="width: 250px;margin-right: 8px;"
						placeholder="" />
					<el-button style="width: 80px" type="primary" @click="login(ruleFormRef)"
						 >搜索</el-button>
					<el-button style="width: 80px"   @click="login(ruleFormRef)"
						 >新建模板</el-button>
				</div>
				<el-table :data="templates" style="width: 100%; ">
					<el-table-column prop="name" label="模板名称" />
					<el-table-column prop="channel" label="渠道" width="100" />
					<el-table-column prop="content" label="模板内容" />
					<el-table-column label="操作" width="120">
						<template #default="{ row }">
							<el-button size="small" type="primary">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-main>
	</el-container>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 当前激活的菜单项
	const activeMenu = ref('sendMsgMngr')

	// 菜单切换处理
	const handleMenuSelect = (index) => {
		activeMenu.value = index
	}

	// 推送列表数据
	const pushList = ref([{
			type: '手术预约推送',
			channel: '微信',
			content: '您的手术已预约成功，请按时就诊。'
		},
		{
			type: '手术预约推送',
			channel: '短信',
			content: '【医院】您的手术预约成功...'
		},
		{
			type: '医技预约推送',
			channel: '微信',
			content: '您的检查已预约成功...'
		},
		{
			type: '医技预约推送',
			channel: '短信',
			content: '【医院】您的检查预约成功...'
		},
		{
			type: '床位预约推送',
			channel: '微信',
			content: '您的床位已预留成功...'
		},
		{
			type: '床位预约推送',
			channel: '短信',
			content: '【医院】床位预约成功...'
		}
	])

	// 模板数据（可后续对接API）
	const templates = ref([{
			name: '手术预约-微信模板',
			channel: '微信',
			content: '您的手术已预约成功...'
		},
		{
			name: '手术预约-短信模板',
			channel: '短信',
			content: '【医院】您的手术预约成功...'
		},
		{
			name: '医技预约-微信模板',
			channel: '微信',
			content: '您的检查已预约成功...'
		},
		{
			name: '床位预约-短信模板',
			channel: '短信',
			content: '【医院】床位预约成功...'
		}
	])

	// 编辑操作（可扩展）
	const handleEdit = (row) => {
		console.log('编辑推送项:', row)
	}
</script>

<style scoped>
	.el-header {
		background-color: #409eff;
		color: white;
		line-height: 60px;
	}

	.el-aside {
		background-color: #f5f7fa;
	}

	.el-main {
		padding: 20px;
	}
</style>