<template>
  <div class="admin-dashboard">
    <header class="dashboard-header">
      <h1>管理员控制台</h1>
      <button @click="logout">退出登录</button>
    </header>

    <div class="dashboard-content">
      <nav class="sidebar">
        <ul>
          <li @click="currentView = 'staff'">员工管理</li>
          <li @click="currentView = 'customers'">顾客管理</li>
          <li @click="currentView = 'services'">服务管理</li>
          <li @click="currentView = 'reports'">统计报表</li>
        </ul>
      </nav>

      <main class="main-content">
        <!-- 员工管理 -->
        <div v-if="currentView === 'staff'" class="staff-management">
          <h2>员工管理</h2>
          <table>
            <thead>
              <tr>
                <th>员工ID</th>
                <th>姓名</th>
                <th>职位</th>
                <th>联系方式</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="staff in staffList" :key="staff.id">
                <td>{{ staff.id }}</td>
                <td>{{ staff.name }}</td>
                <td>{{ staff.position }}</td>
                <td>{{ staff.contact }}</td>
                <td>
                  <button @click="editStaff(staff)">编辑</button>
                  <button @click="deleteStaff(staff.id)">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 其他视图可以根据需要添加 -->
      </main>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminDashboard',
  data () {
    return {
      currentView: 'staff',
      staffList: [
        { id: 1, name: '张三', position: '护工', contact: '13800138000' },
        { id: 2, name: '李四', position: '护士', contact: '13800138001' }
      ]
    }
  },
  methods: {
    logout () {
      // 实现退出登录逻辑
      this.$router.push('/login')
    },
    editStaff (staff) {
      // 实现编辑员工逻辑
      console.log('编辑员工:', staff)
    },
    deleteStaff (staffId) {
      // 实现删除员工逻辑
      console.log('删除员工:', staffId)
    }
  }
}
</script>

<style scoped>
.admin-dashboard {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.dashboard-header {
  background: #2c3e50;
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-content {
  display: flex;
  flex: 1;
}

.sidebar {
  width: 200px;
  background: #34495e;
  color: white;
  padding: 1rem;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  padding: 10px;
  cursor: pointer;
}

.sidebar li:hover {
  background: #2c3e50;
}

.main-content {
  flex: 1;
  padding: 1rem;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}
</style>
