<template>
  <q-btn @click="unsubscribeManager(manager)" round>
    <q-avatar
      size="52px"
      class="attached-manager-avatar"
      color="primary"
      text-color="white"
    >
      <q-icon class="remove-icon" name="la la-times" color="white" />
      <img v-if="!!manager.avatar2x" :src="manager.avatar2x" alt="" />
      <span v-else>{{ initials }}</span>
    </q-avatar>
    <q-tooltip>{{ manager | userFullName }}</q-tooltip>
  </q-btn>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { Manager } from '@/types/Manager'
import { UserService } from '@/services'
import { QAvatar, QBtn, QIcon, QTooltip } from 'quasar'

@Component({ components: { QBtn, QAvatar, QIcon, QTooltip } })
export default class SelectedManagersItem extends Vue {
  @Prop({ type: Object, required: true })
  manager!: Manager

  get initials() {
    return UserService.getUserInitials(this.manager)
  }

  @Emit()
  unsubscribeManager(manager: Manager) {
    return manager
  }
}
</script>

<style scoped lang="sass">
.remove-icon
  position: absolute
  opacity: 0
  transition: opacity 0.2s

.attached-manager-avatar
  position: relative

  &::before
    content: ''
    position: absolute
    border-radius: 50%
    left: 0
    right: 0
    top: 0
    bottom: 0
    background-color: transparent
    transition: background-color 0.2s

  &:hover
    &::before
      background-color: rgba(0, 0, 0, 0.3)

    .remove-icon
      opacity: 1

  ::v-deep
    .q-avatar__content
      font-size: 0.4em
      line-height: 0.4em
</style>
