<template>
  <div class="role-container">
    <div
      class="item"
      v-for="item in roles"
      :key="item.id"
      :class="item.id === selectedId ? 'is-active' : ''"
      @click="select(item)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
import uc from '@/api/uc'
export default {
  name: 'AppRoleSelector',
  data() {
    return {
      selectedId: '',
      roles: [],
    }
  },
  created() {
    this.initRole()
  },
  methods: {
    initRole() {
      let param = {pageBean: {page: 1, pageSize: -1}}
      uc.getRolePage(param).then((resp) => {
        this.roles = resp.rows
        if (this.roles.length >= 1) {
          this.select(this.roles[0])
        }
      })
    },
    select(item) {
      this.selectedId = item.id
      this.$emit('select', item)
    },
  },
}
</script>

<style lang="scss" scoped>
.role-container {
  .item {
    padding: 10px 24px;
    cursor: pointer;
  }
  .is-active {
    background: rgba(64, 158, 255, 0.1);
  }
}
</style>
