<template>
  <div class="staff-dashboard">
    <header class="dashboard-header">
      <h1>员工工作台</h1>
      <button @click="logout">退出登录</button>
    </header>

    <div class="dashboard-content">
      <nav class="sidebar">
        <ul>
          <li @click="currentView = 'tasks'">工作任务</li>
          <li @click="currentView = 'schedule'">排班表</li>
          <li @click="currentView = 'customers'">顾客信息</li>
        </ul>
      </nav>

      <main class="main-content">
        <!-- 工作任务视图 -->
        <div v-if="currentView === 'tasks'" class="tasks-view">
          <h2>今日工作任务</h2>
          <div class="task-list">
            <div v-for="task in tasks" :key="task.id" class="task-card">
              <h3>{{ task.title }}</h3>
              <p>顾客：{{ task.customer }}</p>
              <p>时间：{{ task.time }}</p>
              <p>状态：{{ task.status }}</p>
              <button @click="completeTask(task.id)">完成任务</button>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StaffDashboard',
  data () {
    return {
      currentView: 'tasks',
      tasks: [
        {
          id: 1,
          title: '晨间护理',
          customer: '王老先生',
          time: '08:00-09:00',
          status: '待完成'
        },
        {
          id: 2,
          title: '用药提醒',
          customer: '李奶奶',
          time: '09:30-10:00',
          status: '待完成'
        }
      ]
    }
  },
  methods: {
    logout () {
      this.$router.push('/login')
    },
    completeTask (taskId) {
      // 实现完成任务逻辑
      console.log('完成任务:', taskId)
    }
  }
}
</script>

<style scoped>
.staff-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;
}

.task-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.task-card {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #45a049;
}
</style>
