<template>
  <div>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside
          style="width: 200px; min-height: 100vh; background-color: rgb(254, 64, 74)"
      >
        <div
            style="height: 60px; display: flex; align-items: center; justify-content: center;"
        >
          <img src="./photo/GH.jpg" alt="Logo" style="width: 100%; height: auto" />
        </div>

        <el-menu
            class="custom-menu"
            style="width: 200px; background-color: #fe8f8f;"
            popper-append-to-body
        >
          <el-row>
            <el-col :span="12">
              <el-menu
                  class="custom-menu"
                  style="width: 200px; background-color: #fe8f8f;"
                  popper-append-to-body
              >
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>导航栏</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="2">
                      <!-- 使用 router-link 跳转 -->
                      <router-link to="/home#section1">首页</router-link>
                    </el-menu-item>
                    <el-menu-item index="4">
                      <router-link to="/borrow">借阅系统</router-link>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-menu>
      </el-aside>

      <el-container>
        <!-- 头部 -->
        <el-header
            style="font-family: 楷体; text-align: center; font-weight: bold; background-color: rgb(254, 64, 74); color: white; font-size: 50px; position: relative;"
        >
          红色精神图书管理系统
          <!-- 注销按钮 -->
          <el-button
              type="danger"
              style="position: absolute; top: 10px; right: 20px; font-size: 14px;"
              @click="handleLogout"
          >
            注销
          </el-button>
        </el-header>

        <!-- 主要 -->
        <el-main>
          <el-carousel
              :interval="5000"
              arrow="always"
              height="692px"
              @change="startMusic"
          >
            <!-- 使用 v-for 循环动态绑定图片 -->
            <el-carousel-item
                v-for="(image, index) in carouselImages"
                :key="index"
            >
              <div
                  class="carousel-image-container"
                  @click="playMusic"
              >
                <img
                    :src="require(`${image}`)"
                    alt="carousel"
                    class="carousel-image"
                />
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-main>
      </el-container>
    </el-container>

    <!-- 音乐播放器 -->
    <audio
        ref="backgroundMusic"
        src="music/wanjiang.mp3"
        loop
    ></audio>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      // 图片列表
      carouselImages: [
        "./photo/home.png",
        "./photo/home1.png",
        "./photo/home2.png",
      ],
    };
  },
  methods: {
    // 点击注销方法
    handleLogout() {
      // 清空浏览器存储
      localStorage.removeItem("userInfo");
      sessionStorage.removeItem("userInfo");

      // 清空 Vuex 状态
      if (this.$store) {
        this.$store.commit("clearUserInfo");
      }

      console.log("已清空用户登录状态，并跳转至登录页面！");

      // 跳转到登录注册页面
      this.$router.push("/loginRegister");
    },

    // 切换图片时触发音乐
    startMusic() {
      console.log("图片切换，尝试播放音乐");
      this.playMusic();
    },

    // 播放音乐
    playMusic() {
      const audio = this.$refs.backgroundMusic;

      // 播放音乐
      audio
          .play()
          .then(() => {
            console.log("音乐播放成功");
          })
          .catch((error) => {
            console.log("音乐播放失败，可能需要用户交互：", error);
          });
    },
  },
};
</script>

<style scoped>
.el-menu-item:hover {
  background-color: yellow !important;
  color: red !important; /* 鼠标悬停时文字颜色变为红色 */
}

.carousel-image-container {
  width: 100%; /* 与 el-carousel 的宽度一致 */
  height: 692px; /* 与 el-carousel 的高度一致 */
  overflow: hidden;
  text-align: center;
  cursor: pointer; /* 鼠标悬停时显示点击手势 */
}

.carousel-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 确保图片按比例显示并适应容器 */
}
</style>
主内容，我想加一个在线阅读的功能，点击、就能弹出一个图书架，图书架可以显示图书封面，点击图书封面可以阅读这本书