<template>
  <el-card>
    <div class="community-selector">
      <el-scrollbar style="height: 650px">
        <ul class="community-list">
          <li
            v-for="(item, index) in communitys"
            :key="index"
            class="community-item"
            :class="{ 'selected': communityId === item.communityId }"
            @click="handleSelectCommunity(item)"
          >
            {{ item.name }}
          </li>
        </ul>
      </el-scrollbar>
    </div>
  </el-card>
</template>

<script>
import { listAdminCommunitys } from '@/api/fee/adminPayFeeDetailApi'

export default {
  name: 'SelectAdminCommunity',
  data() {
    return {
      communitys: [
        { name: this.$t('adminPayFeeDetail.allCommunities'), communityId: '' }
      ],
      communityId: ''
    }
  },
  created() {
    this.loadCommunities()
  },
  methods: {
    async loadCommunities() {
      try {
        const params = {
          page: 1,
          row: 100
        }
        const { data } = await listAdminCommunitys(params)
        this.communitys = [...this.communitys, ...data]
      } catch (error) {
        this.$message.error(this.$t('adminPayFeeDetail.fetchCommunityError'))
      }
    },
    handleSelectCommunity(community) {
      this.communityId = community.communityId
      this.$emit('changeCommunity', community)
    }
  }
}
</script>

<style lang="scss" scoped>
.community-selector {
  .community-list {
    list-style: none;
    padding: 0;
    margin: 0;
    
    .community-item {
      padding: 12px 15px;
      cursor: pointer;
      text-align: center;
      border-bottom: 1px solid #ebeef5;
      transition: all 0.3s;
      
      &:hover {
        background-color: #f5f7fa;
      }
      
      &.selected {
        background-color: #409eff;
        color: white;
      }
    }
  }
}
</style>