<template>
    <span >
      {{roleNames}}
    </span>
</template>
<script>
export default {
  props: {
    userInfo: {
      type: Object,
      default: null
    }
  },
  data(){
    return {
      roleNames: ''
    }
  },
  methods: {
    getRoleName(){
      if (!this.userInfo||!this.userInfo.roleIds) return 
      this.roleNames = ''
      this.userInfo.roleIds.split(',').forEach(ele => {
        this.roleList.forEach(item => {
          if (item.id == ele) {
            this.roleNames = item.roleName
          }
        })
      })
    }
  },
  mounted(){
    this.getRoleName()
  },
  computed: {
    roleList(){
      return this.$store.state.roleList
    }
  }
}
</script>

