<template>
  <div class="role-list-wrap">
    <div class="role-item" v-for="(role, index) in list" :key="`role-${index}`" :class="{active: currentId === role.id}"
      @click="selectRole(role.id)">
      <p class="role-name">{{role.name}}({{role.count}})</p>
      <Icon type="md-create" size="18" @click.stop="operRole('edit', role)" v-if="!role.disabled" />
      <Icon type="ios-remove-circle-outline" size="18" @click.stop="operRole('delete', role)" v-if="!role.disabled" />
    </div>
    <div class="add-role action-btn" @click="operRole('add')">
      <Icon type="ios-add-circle-outline" size="18" />新增角色
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: Array,
    currentId: String
  },
  data () {
    return {}
  },
  created () { },
  methods: {
    selectRole (id) {
      if (this.currentId === id) return
      this.$emit('select-role', id)
    },
    operRole (type = 'add', role = {}) {
      this.$emit('oper-role', type, role)
    }
  }
}
</script>