<template>
  <div class="home-container">
    <!-- 添加抽屉 -->
    <!--   @mouseenter="buttonVisible = true" 
        @mouseleave="buttonVisible = false"  -->
    <div class="drawer-box">
      <el-button
        v-if="!drawerVisible"
        type="primary"
        @click="drawerVisible = true"
        @closed="buttonVisible = false"
        class="toggle-button"
      >
        教材大纲
        <!-- <el-icon><ArrowRightBold /></el-icon> -->
      </el-button>
      <el-drawer v-model="drawerVisible" direction="ltr" size="20%">
        <el-row class="tac">
          <el-col :span="12">
            <h2 class="mb-2">教材大纲</h2>
            <el-menu
            default-active="1"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
            >
            <el-menu-item
                v-for="(title, index) in courseTitles"
                :key="index + 1"
                :index="(index + 1).toString()"
              >
                <!-- <el-icon><icon-menu /></el-icon> -->
                <span>0{{ index + 1 }} AI{{ title }}</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-drawer>
    </div>
    <div class="box-1">
      <div class="inner-box left-box">
        <div class="box-icon" @click="goBack">
          <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
          AI智能课
        </div>
        <div class="dropdown-box">
          <!-- 下拉菜单 -->
          <el-dropdown v-model="selectedGrade">
            <el-button type="primary">
              {{ selectedGrade
              }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu class="dropdown-menu">
                <el-dropdown-item>小学低年级</el-dropdown-item>
                <el-dropdown-item>小学高年级</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="inner-box right-box">
        <div class="top-right-box">
          <el-input
            v-model="SearchInput"
            style="width: 200px; height: 40px"
            placeholder="搜索"
          >
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </div>
      </div>
    </div>
    <div class="box-2">
      <div
        class="small-box"
        v-for="(image, index) in courseImages"
        :key="index"
        v-if="selectedGrade === '小学低年级'"
      >
        <div
          class="nested-box"
          :style="{ backgroundImage: `url(${image})`, backgroundSize: 'cover' }"
        ></div>
        <div class="additional-text">
          0{{ index + 1 }} AI{{ getCourseTitle(index + 1) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowDown, ArrowRightBold } from '@element-plus/icons-vue'
import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
const selectedButton = ref('AI通识课') // 默认选中 AI 通识课
const router = useRouter() // 获取当前路由对象
// 搜索框
const SearchInput = ref('')
// 添加按钮显示状态
const buttonVisible = ref(false)
// 添加抽屉显示状态
const drawerVisible = ref(false)
// 定义 rpx 函数
// const rpx = (px) => px / 750 * 100
// 添加下拉菜单选中项
const selectedGrade = ref('小学低年级')
const goBack = () => {
  router.go(-1) // 返回上一页
}

// 添加获取课程标题
const getCourseTitle = index => {
  const titles = [
    '初体验',
    '发展历程',
    '与机器人',
    '的超级大脑-芯片',
    '的智能应用',
    '数据表征与感知智能',
    '如何学习',
    '伦理安全'
  ]
  return titles[index - 1]
}
// 新增课程标题数组
const courseTitles = Array.from({ length: 8 }, (_, i) => getCourseTitle(i + 1))

// 添加图片路径数组
const courseImages = ref([
  './src/assets/images/one.png',
  './src/assets/images/two.png',
  './src/assets/images/three.png',
  './src/assets/images/four.png',
  './src/assets/images/five.png',
  './src/assets/images/six.png',
  './src/assets/images/seven.png',
  './src/assets/images/eight.png'
])
</script>

<style scoped lang="scss">
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}

.home-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #08105e, #8271c8);
  display: flex;
  flex-direction: column;
  gap: rpx(0);
}
.tac .el-menu {
  background-color: transparent;
  border: none;
  width: 100%;
}
.mb-2{
  color: black;
}
.el-menu-item{
  width: rpx(130);
  height: rpx(25);
  margin-bottom: rpx(10);
  border-radius: rpx(6);
}
.el-menu-item span{
  color: black;
  font-size: rpx(8);
}
.el-menu ::v-deep(.el-menu-item:hover),
.el-menu ::v-deep(.el-menu-item:focus),
.el-menu ::v-deep(.el-menu-item:active) {
  background: linear-gradient(
    to bottom,
    #fee78a,
    #ffce1b
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
}
.drawer-box {
  position: absolute;
  display: flex;
  align-items: center;
  height: 100%;
}
.drawer-box .toggle-button {
  width: rpx(10);
  height: rpx(50);
  background-color: rgba(165, 209, 247, 0.2);
  border: none;
  position: relative;
  writing-mode: vertical-lr; // 文字垂直排列，从左到右
  text-orientation: upright; // 文字保持正立
}
.toggle-button:hover {
  left: 0;
}
.drawer-box ::v-deep(.el-drawer.ltr) {
  background-color: rgb(255, 255, 255,0.7);
  box-shadow: 0 8px 8px rgba(202, 52, 52, 0.1);
}
.toggle-button.is-active,
.toggle-button:active,
.toggle-button:focus {
  background-color: rgba(165, 209, 247, 0.8);
  color: black;
  border: none; // 移除点击时的边框
  outline: none; // 移除点击时的外边框
}

.box-1 {
  width: 100%;
  flex: 0.3;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: rpx(16); // 默认字体大小
}

.inner-box {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: rpx(16); // 默认字体大小
}

.left-box {
  position: relative;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1; // 设置左侧盒子占比为 2
}
.box-icon {
  width: 100%;
  height: 100%;
  flex: 0.5;
  display: flex; // 添加 flex 布局
  align-items: center; // 垂直居中
  color: white; // 设置图标颜色为白色
  padding-left: rpx(15);
  font-size: rpx(10); // 设置图标大小，可按需调整
}
.box-icon .left-icon {
  margin-left: rpx(10);
  margin-right: rpx(5); // 设置图标和文字之间的间距 ;
}

.left-box span {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: rpx(11); // 默认字体大小
  color: white;
}
.dropdown-box {
  width: 100%;
  height: 100%;
  display: flex; // 添加 flex 布局;
  flex: 1;
  align-items: center; // 垂直居中;
  padding-right: rpx(10); // 添加右侧内边距;
}
.dropdown-box .el-button {
  width: rpx(55); // 设置按钮宽度;
  height: rpx(15); // 设置按钮高度;
  background-color: white;
  color: black;
  border-radius: rpx(12);
  font-size: rpx(6); // 设置字体大小;
}
.dropdown-box .el-button:hover,
.dropdown-box .el-button:focus,
.dropdown-box .el-button:active {
  border: none; /* 移除悬停、聚焦、点击状态下的边框 */
  outline: none; /* 移除悬停、聚焦、点击状态下的轮廓线 el-scrollbar__view el-dropdown__list */
}
.dropdown-menu {
  width: rpx(100);
  height: rpx(65);
  border-radius: rpx(6);
  background-color: rgba(165, 209, 247, 0.5);
  box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
}
.dropdown-menu ::v-deep(.el-dropdown-menu__item) {
  font-size: rpx(8);
  color: black;
  border-radius: rpx(6);
  width: rpx(75);
  height: rpx(25);
  margin-left: rpx(4);
}
.dropdown-menu ::v-deep(.el-dropdown-menu__item:hover),
.dropdown-menu ::v-deep(.el-dropdown-menu__item:focus),
.dropdown-menu ::v-deep(.el-dropdown-menu__item:active) {
  background: linear-gradient(
    to bottom,
    #fee78a,
    #ffce1b
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
}
.right-box {
  flex: 2;
  position: relative; // 添加相对定位;
}
.top-right-box {
  position: absolute; // 添加绝对定位
  margin-top: rpx(10); // 调整上边距离
  margin-right: rpx(50); // 调整右边距离
  width: 100%; // 设置盒子宽度，可按需调整
  height: 60px; // 设置盒子高度，可按需调整
  display: flex;
  justify-content: flex-end;
}
.top-right-box {
  ::v-deep(.el-input__wrapper) {
    background-color: transparent;
    border-radius: rpx(12);
    color: white;
  }
  ::v-deep(.el-input__icon) {
    color: white; // 设置输入框图标颜色为白色
  }
  // 添加占位符样式
  ::v-deep(.el-input__inner::placeholder) {
    color: white;
  }
  // 添加输入框文字颜色样式
  ::v-deep(.el-input__inner) {
    color: white;
  }
}
.box-2 {
  width: 100%;
  flex: 2;
  box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
  box-sizing: border-box;
  padding: 0 rpx(30); // 添加左右内边距
  display: flex; // 确保子元素水平排列
  flex-wrap: wrap; // 允许子元素换行;
  align-content: center; // 顶部对齐;
}
.small-box {
  flex: 0 0 calc(33.333% - rpx(10)); // 每个小盒子占三分之一宽度，减去间距
  margin-left: rpx(10); // 设置小盒子间距
  margin-top: rpx(3); // 设置小盒子间距
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: white;
  font-size: rpx(8);
}
.nested-box {
  width: 70%;
  height: rpx(80);
  border-radius: rpx(10);
  display: flex;
  justify-content: center;
  align-items: center;
}
.nested-box:hover,
.nested-box:active {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.additional-text {
  margin-top: auto;
  margin-bottom: rpx(4);
  margin-top: rpx(4);
  font-size: rpx(6);
}
</style>
