<script setup>
import { ref } from 'vue';
import ToolsBox from "../components/Tools_box.vue";

const categories = ref([
  { name: '计算', active: false },
]);


const searchQuery = ref('');


const tools = ref([
  { id: 1, title: 'GPA在线计算器', description: '手动输入在线算', image: null, category: ['计算'] },
]);


// Toggle function for categories, only one category can be active at a time
const toggleCategory = (category) => {
  if (category.active) {
    category.active = false; // Deselect if already selected
  } else {
    categories.value.forEach(cat => cat.active = false); // Deselect all other categories
    category.active = true; // Select the clicked category
  }
};

const filterTools = () => {
  return tools.value.filter(tool => {
    const matchesCategory = categories.value.some(cat => cat.active && tool.category.includes(cat.name));
    const matchesSearch = tool.title.toLowerCase().includes(searchQuery.value.toLowerCase());
    return (!categories.value.some(cat => cat.active) || matchesCategory) && matchesSearch;
  });
};
</script>

<template>
  <div class="container" v-if="/^\/tools\/?$/.test($route.path)">
    <div class="filters">
      <div class="categories">
        <span
            v-for="category in categories"
            :key="category.name"
            :class="{ active: category.active }"
            @click="toggleCategory(category)"
        >
          {{ category.name }}
        </span>
      </div>
      <input type="text" v-model="searchQuery" placeholder="搜索工具..." class="search-bar" />
    </div>

    <div class="tools">
      <ToolsBox
          v-for="tool in filterTools()"
          :key="tool.title"
          :tool="tool"

      />
    </div>
  </div>
  <router-view v-else />
</template>

<style scoped>
.container {
  height: calc(100vh - 100px);
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.categories span {
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.categories span.active {
  background-color: #007bff;
  color: white;
}

.search-bar {
  padding: 10px;
  margin: 20px 0;
  width: 50%;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.theme-light .categories span.active {
  background-color: #ffb74d;
  color: black;
}

.theme-light .search-bar {
  border: 1px solid #ffb74d;
}

::-webkit-scrollbar {
  display: none;
}
</style>
