<template>
  <div class="border-radius">
    <div class="margin-xs-r treeview attendance-staff" style="height: 650px;">
      <ul class="list-group text-center border-radius">
        <li 
          class="list-group-item node-orgTree" 
          v-for="(item,index) in communitys" 
          :key="index" 
          @click="handleSwatchCommunity(item)"
          :class="{'vc-node-selected': communityId === item.communityId}"
        >
          {{item.name}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { listAdminCommunitys } from '@/api/iot/adminInoutApi'

export default {
  name: 'SelectAdminCommunity',
  data() {
    return {
      communitys: [],
      communityId: ''
    }
  },
  created() {
    this.loadAdminCommunitys()
  },
  methods: {
    async loadAdminCommunitys() {
      try {
        const params = {
          _uid: '123mlkdinkldldijdhuudjdjkkd',
          page: 1,
          row: 100
        }
        const res = await listAdminCommunitys(params)
        this.communitys = [
          { name: this.$t('adminInout.allCommunities'), communityId: '' },
          ...res.data
        ]
        this.handleSwatchCommunity(this.communitys[0])
      } catch (error) {
        console.error('Failed to load communities:', error)
      }
    },
    handleSwatchCommunity(community) {
      this.communityId = community.communityId
      this.$emit('change-community', community)
    }
  }
}
</script>

<style scoped>
.vc-node-selected {
  background-color: #f5f7fa;
  color: #409eff;
}
</style>