<template>
  <div class="container">
    <!-- 顶部筛选区域 -->
    <div class="filter-section">
      <el-select
        v-model="selectedType"
        placeholder="选择生物学小实验类型"
        style="width: 200px"
        multiple
      >
        <el-option
          v-for="type in experimentTypes"
          :key="type.value"
          :label="type.label"
          :value="type.value"
        />
      </el-select>
    </div>
    <!-- 下方正方形网格 -->
    <div class="grid-container">
      <div class="grid-item" v-for="item in filteredExperiments" :key="item.id">
        <div class="card">
          <h3 class="card-title">{{ item.title }}</h3>
          <iframe
            :src="item.url"
            frameborder="0"
            width="100%"
            height="80%"
            loading="lazy"
            allowfullscreen
          ></iframe>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 模拟生物学实验类型数据
const experimentTypes = ref([
  { value: '1', label: '运动' },
  { value: '2', label: '声音、振动、波' },
  { value: '3', label: '热学' },
  { value: '4', label: '量子现象' },
  { value: '5', label: '光和辐射' },
  { value: '6', label: '电场、磁场、电路' },
  { value: '7', label: '功、能量、功率' },
])

// 模拟实验列表数据（实际应从接口获取）
const allExperiments = ref([
  { id: 1, type: '1', title: '重力和轨道', url: 'https://phet.colorado.edu/sims/html/gravity-and-orbits/latest/gravity-and-orbits_zh_CN.html' },
  { id: 2, type: '1', title: '能量滑板竞技场', url: 'https://phet.colorado.edu/sims/html/energy-skate-park/latest/energy-skate-park_zh_CN.html' },
  { id: 3, type: '5', title: '波动入门', url: 'https://phet.colorado.edu/sims/html/waves-intro/latest/waves-intro_zh_CN.html' },
  { id: 4, type: '4', title: '钟摆实验', url: 'https://phet.colorado.edu/sims/html/pendulum-lab/latest/pendulum-lab_zh_CN.html' },
  { id: 5, type: '3', title: '扩散', url: 'https://phet.colorado.edu/sims/html/diffusion/latest/diffusion_zh_CN.html' },
  { id: 6, type: '5', title: '几何光学', url: 'https://phet.colorado.edu/sims/html/geometric-optics/latest/geometric-optics_zh_CN.html' }
])

// 当前选择的筛选类型
const selectedType = ref([])

// 计算筛选后的实验列表
const filteredExperiments = computed(() => {
  if (selectedType.value.length === 0) return allExperiments.value
  return allExperiments.value.filter(item => selectedType.value.includes(item.type))
})
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
}

.filter-section {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.grid-item {
  aspect-ratio: 1/1; /* 保持正方形 */
}

.card {
  width: 100%;
  height: 100%;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s;

  &:hover {
    transform: translateY(-2px);
  }
}

.card-title {
  padding: 12px;
  margin: 0;
  font-size: 16px;
  color: #303133;
  background-color: #f8f9fa;
  border-bottom: 1px solid #ebeef5;
}
</style>
