<template>
  <div class="word-list">
    <!-- {{ props.type }}{{ props }} -->
    <div
      v-for="word in words"
      :key="word"
      class="word-item"
      @click="handleWordClick(word)"
    >
      {{ word }}
    </div>

  </div>
</template>

<script setup>
import { onMounted, ref ,watch} from 'vue';
import { getTags } from "@/api/tag/tag";
const emit=defineEmits(['select'])
const props=defineProps({
  type:{
    type:String,
    default:''
  }
})
const getWords=async(type)=>{
  let res=await getTags(type);
  if(res.code==200){
    words.value=res.data.map(itme=>itme.name);
    if(words.value.length==0){
      words.value=['暂无数据']
    }
  }
}
watch(() => props.type,(newValue)=>{
  getWords(newValue);
  console.log("props",newValue);
},{
  //深度监听
  deep: true, // 启用深度监听
})
// 包含所有可点击词的数组
const words = ref([
'高数上', '高数下', '线性代数', '数学分析', '解析几何',
'概率论与数理统计', '复变函数', '实变函数', '常微分方程',
'近世代数', '数据结构', 'C语言', '软件工程类', '大学物理（简明）',
'物理实验', '力学', '热学', '光学', '电磁学', '原子物理学',
'物理专业', '高中物理', '初中物理', '高中化学', '初中化学',
'高中数学', '初中数学', '小学数学', '高中生物', '初中生物',
'有机化学', '无机化学', '分析化学', '物理化学', '结构化学',
'高分子化学', '配位化学', '生物化学', '普通生物学', '细胞生物学',
'遗传学', '微生物学', '植物学', '动物学', '数学', '物理', '化学', '生物',
'法学', '经济学', '其他'
]);
const handleWordClick = (word) => {
  console.log(`Clicked word: ${word}`);
  emit('select',word);
  // 这里可以抛出一个事件，或者调用其他方法
};
onMounted(()=>{
  getWords();
})
</script>
<style scoped>
.word-list {
  display: flex;
  flex-wrap: wrap;
  /* gap: 10px; */
}
.word-item {
  padding: 8px;
  border-bottom: 1px solid #43CF7C;
  cursor: pointer;
  user-select: none; /* 防止用户选择文本 */
}
.word-item:hover {
  background-color: #f0f0f0;
}
</style>