<template>
  <view class="home-page">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <text class="page-title">智慧校园</text>
    </view>

    <view class="content-container">
      <!-- 用户信息卡片 -->
      <view class="user-info-card">
        <view class="user-avatar-placeholder">
          <image :src="currentStudent.avatar" class="w-full h-full"></image>
        </view>
        <!--        <view-->
        <!--          class="user-details"-->
        <!--          @click="navigateTo('/pages/system/login/login')"-->
        <!--        >-->
        <view
            class="user-details"
        >
          <text class="user-name">{{ currentStudent.name }}</text>
          <view class="user-class-container">
            <text class="user-class"
              >{{ currentStudent.grade }} {{ currentStudent.class }}</text
            >
            <u-icon name="edit-pen" size="14" color="#909399"></u-icon>
          </view>
        </view>
        <view class="switch-btn" @click="showStudentSelector">切换</view>
      </view>

      <!-- 学校横幅 -->
      <view class="school-banner">
        <view class="banner-placeholder">
          <image src="/static/base/home/2211.png" class="w-full h-full"></image>
        </view>
      </view>

      <!-- 功能菜单 -->
      <view class="grid-menu">
        <view
          v-for="(item, index) in menuItems"
          :key="index"
          class="grid-item"
          @click="handleMenuClick(item)"
        >
          <view class="grid-icon-placeholder">
            <image :src="item.icon" class="w-full h-full"></image>
          </view>
          <text class="grid-text">{{ item.title }}</text>
        </view>
      </view>

      <!-- 通知公告 -->
      <view class="notice-section">
        <view class="section-header">
          <view class="blue-dot"></view>
          <text class="section-title">通知公告</text>
        </view>

        <view class="notice-list">
          <view
            v-for="(notice, index) in announcements"
            :key="index"
            class="notice-item"
            @click="navigateTo('/pages/base/home/detail')"
          >
            <view class="notice-img-placeholder"></view>
            <view class="notice-content">
              <text class="notice-title">{{ notice.title }}</text>
              <text class="notice-desc">{{ notice.description }}</text>
              <text class="notice-date">{{ notice.date }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 学生选择弹窗 -->
    <u-popup
      :show="showSelector"
      @close="showSelector = false"
      mode="bottom"
      round="10"
    >
      <view class="student-selector">
        <view class="selector-header">
          <text class="selector-title">选择学生</text>
          <u-icon name="close" size="20" @click="showSelector = false"></u-icon>
        </view>
        <view class="student-list">
          <view
            v-for="(student, index) in studentList"
            :key="index"
            class="student-item"
            :class="{ 'student-item-active': currentStudent.id === student.id }"
            @click="switchStudent(student)"
          >
            <view class="student-avatar-placeholder"></view>
            <view class="student-info">
              <text class="student-name">{{ student.name }}</text>
              <text class="student-class"
                >{{ student.grade }} {{ student.class }}</text
              >
            </view>
            <u-icon
              v-if="currentStudent.id === student.id"
              name="checkmark"
              color="#409EFF"
              size="20"
            ></u-icon>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import {navigateTo} from "@/utils/uniapp";
import {ref} from "vue";
// 菜单项数据
const menuItems = ref([
  {
    title: "班级课表",
    icon: "/static/base/home/book-read-line.png",
    path: "/pages/base/class-schedule/index",
  },
  {
    title: "在线请假",
    icon: "/static/base/home/draft-line.png",
    path: "/pages/base/leave-request/index",
  },
  {
    title: "进出校园",
    icon: "/static/base/home/file-transfer-line.png",
    path: "/pages/base/campus-access/index",
  },
  {
    title: "兴趣课",
    icon: "/static/base/home/file-text-line.png",
    path: "/pages/base/interest-class/index",
  },
  {
    title: "俱乐部",
    icon: "/static/base/home/contacts-book-3-line.png",
    path: "/pages/base/club/index",
  },
  {
    title: "成绩查询",
    icon: "/static/base/home/file-search-line.png",
    path: "/pages/base/grades/index",
  },
]);

// 通知公告数据
const announcements = ref([
  {
    image: "",
    title: "关于《泸州市xxxxxxxx管理办法》的通知",
    description: "为规范本市就业见习管理工作，促进高校毕业生等青年...",
    date: "2025-02-12 12:33:44",
  },
  {
    image: "",
    title: "关于《泸州市xxxxxxxx管理办法》的通知",
    description: "为规范本市就业见习管理工作，促进高校毕业生等青年...",
    date: "2025-02-12 12:33:44",
  },
  {
    image: "",
    title: "关于《泸州市xxxxxxxx管理办法》的通知",
    description: "为规范本市就业见习管理工作，促进高校毕业生等青年...",
    date: "2025-02-12 12:33:44",
  },
]);

// 学生列表数据
const studentList = ref([
  {
    id: "1",
    name: "陶亦菲",
    grade: "2年级",
    class: "01班",
    avatar: "/static/base/home/11222.png",
  },
  {
    id: "2",
    name: "张小明",
    grade: "4年级",
    class: "03班",
    avatar: "",
  },
  {
    id: "3",
    name: "王小红",
    grade: "1年级",
    class: "02班",
    avatar: "",
  },
]);

// 当前选中的学生
const currentStudent = ref(studentList.value[0]);

// 控制选择器显示状态
const showSelector = ref(false);

// 处理菜单点击
function handleMenuClick(item: any) {
  console.log("点击菜单:", item.title);
  if (item.path) {
    uni.navigateTo({
      url: item.path,
    });
  }
}

// 显示学生选择器
function showStudentSelector() {
  showSelector.value = true;
}

// 切换学生
function switchStudent(student: any) {
  currentStudent.value = student;
  showSelector.value = false;

  // 这里可以添加切换学生后的其他操作，如刷新页面数据等
  uni.showToast({
    title: `已切换到${student.name}`,
    icon: "none",
  });
}
</script>

<style lang="scss" scoped>
.home-page {
  background-color: #f8f8f8;
  min-height: 100vh;
}

/* 自定义导航栏 */
.custom-navbar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 15px;
  padding-top: var(--status-bar-height);
  background-color: #ffffff;

  .page-title {
    font-size: 18px;
    font-weight: 500;
    color: #303133;
  }

  .navbar-right {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
    display: flex;
    align-items: center;
  }
}

.content-container {
  padding: 15px;
}

/* 用户信息卡片 */
.user-info-card {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 12px 15px;
  margin-bottom: 15px;

  .user-avatar-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px dashed #d0d0d0;
    flex-shrink: 0;
  }

  .user-details {
    flex: 1;
    margin-left: 12px;

    .user-name {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
      margin-bottom: 6px;
    }

    .user-class-container {
      display: flex;
      align-items: center;

      .user-class {
        font-size: 13px;
        color: #606266;
        margin-right: 5px;
      }
    }
  }

  .switch-btn {
    padding: 4px 12px;
    background-color: rgba(64, 158, 255, 0.05);
    color: #409eff;
    border: 1px solid #409eff;
    border-radius: 20px;
    font-size: 13px;
    flex-shrink: 0;
  }
}

/* 学校横幅 */
.school-banner {
  margin-bottom: 15px;
  border-radius: 12px;
  overflow: hidden;

  .banner-placeholder {
    width: 100%;
    height: 150px;
    border: 1px dashed #d0d0d0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* 功能菜单 */
.grid-menu {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 20px;

  .grid-item {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;

    .grid-icon-placeholder {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      margin-bottom: 8px;
    }

    .grid-text {
      font-size: 14px;
      color: #303133;
    }
  }
}

/* 通知公告 */
.notice-section {
  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    .blue-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #1976d2;
      margin-right: 8px;
    }

    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }
  }

  .notice-list {
    border-radius: 12px;
    overflow: hidden;

    .notice-item {
      display: flex;
      background-color: #ffffff;
      padding: 15px;
      margin-bottom: 10px;
      border-radius: 12px;

      .notice-img-placeholder {
        width: 80px;
        height: 80px;
        background-color: #f0f0f0;
        border: 1px dashed #d0d0d0;
        border-radius: 8px;
        margin-right: 12px;
      }

      .notice-content {
        flex: 1;
        display: flex;
        flex-direction: column;

        .notice-title {
          font-size: 15px;
          font-weight: 500;
          color: #303133;
          margin-bottom: 6px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        .notice-desc {
          font-size: 13px;
          color: #909399;
          margin-bottom: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          flex: 1;
        }

        .notice-date {
          font-size: 12px;
          color: #c0c4cc;
        }
      }
    }
  }
}

/* 学生选择器弹窗样式 */
.student-selector {
  background-color: #ffffff;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding-bottom: 20px;

  .selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;

    .selector-title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }
  }

  .student-list {
    padding: 0 15px;

    .student-item {
      display: flex;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid #f2f2f2;

      &:last-child {
        border-bottom: none;
      }

      &-active {
        background-color: rgba(64, 158, 255, 0.05);
      }

      .student-avatar-placeholder {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: #f0f0f0;
        border: 1px dashed #d0d0d0;
        flex-shrink: 0;
      }

      .student-info {
        flex: 1;
        margin-left: 12px;

        .student-name {
          font-size: 15px;
          font-weight: 500;
          color: #303133;
          margin-bottom: 4px;
        }

        .student-class {
          font-size: 13px;
          color: #606266;
        }
      }
    }
  }
}
</style>
