<template>
    <div class="tag-class-container" v-loading="loading">
      <div v-for="group in tagGroups" :key="group.id" class="tag-group">
        <div class="group-title">{{ group.name }}:</div>
        <div class="tags-container">
          <el-tag 
            v-for="(tag, index) in group.tag_list" 
            :key="tag.id" 
            class="tag-item"
             :type="tag.is_act ? 'primary' : 'info'"
            @click="toggleTag(tag, group)"
          >
            {{ tag.name }}
          </el-tag>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, watch } from 'vue'
  import { tagGroupList, tagList, getAllTags } from '@/api/tags'
  
  const props = defineProps({
      robot_id: {
          type: [Number, String, Object],
          default: 0
      },
      // 可以接收已选择的标签
      initialSelectedTags: {
          type: Array,
          default: () => []
      },
      is_user: {
          type: Boolean,
          default: false
      }
  })
  
  const emit = defineEmits(['update:selectedTags', 'change', 'hiddenTag'])
  const loading = ref(false)
  const tagGroups = ref([])
  const selectedTags = ref(props.initialSelectedTags)
  
  // 监听初始选择的标签变化
//   watch(() => props.initialSelectedTags, (newVal) => {
//       console.log(newVal)
//       selectedTags.value = newVal
//       console.log(selectedTags.value )
//   })
  
  const getTagIsAct = () => {
    //   return selectedTags.value.some(el => el.id == tag.id)
    tagGroups.value.forEach(group => {
        group.tag_list.forEach(tag => {
            props.initialSelectedTags.forEach(el => {
                if(tag.id == el.id){
                    tag.is_act = true
                }
            })
        })
    })

  }
  // 获取标签树
  const getTagTree = async () => {
      loading.value = true
      try {
          const res = await getAllTags({
              robot_id: props.robot_id,
              name: '',
          })
          tagGroups.value = res.list
          loading.value = false
          getTagIsAct()
      } catch (error) {
          loading.value = false
          console.error('获取标签树失败:', error)
      }
  }
  
  // 切换标签选择状态
  const toggleTag = (tag, group) => {
            tag.is_act = !tag.is_act
            if(tag.is_act){
                group.tag_list.forEach(el => {
                    if(el.id != tag.id){
                        el.is_act = false
                    }
                })
            }
            let selectedTags = []
            tagGroups.value.forEach(el => {
                el.tag_list.forEach(el => {
                    if(el.is_act){
                        selectedTags.push(el)
                    }
                })
            })
          console.log(selectedTags)
          // 向父组件发送更新事件
          emit('update:selectedTags', selectedTags)
          emit('change', selectedTags)
          emit('hiddenTag', selectedTags)
      
  }
  
  // 组件挂载时获取标签树
  onMounted(() => {
      getTagTree()
  })
  </script>
  
  <style scoped>
  .tag-class-container {
      width: 100%;
      min-height: 300px;
  }
  
  .tag-group {
      margin-bottom: 16px;
  }
  
  .group-title {
      /* font-weight: bold; */
      margin-bottom: 12px;
      /* color: var(--el-text-color-regular); */
  }
  
  .tags-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
  }
  
  .tag-item {
      /* font-size: 14px; */
      /* padding: 0px 20px;
      background-color: #f0f0f0;
      border-radius: 6px; */
      cursor: pointer;
      /* transition: all 0.3s; */
  }
  
  /* .tag-item:hover {
      background-color: #e0e0e0;
  } */
  
  /* .tag-item.selected {
      background-color: var(--el-color-primary);
      color: white;
  } */
  </style>