<template>
  <div :class="$style.bt" @click="handleDetail(record)">
    <a-avatar
      icon="user"
      :class="$style.avatar"
      :src="`api/framework/v1/oa-base-address-user/userAvatar/userId/${record.id}` | sdResource"
      alt="avatar"
    />
    <a>{{ record.name }}</a>
  </div>
</template>

<script>
import storeMixin from '@/common/store-mixin'
import components from './_import-components/sd-company-address-avatar-import'

export default {
  name: 'SdCompanyAddressAvatar',
  components: { ...components },
  mixins: [storeMixin],
  props: {
    record: {
      type: Object,
      default: null,
    },
    permission: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      selectUserInfo: {},
    }
  },
  methods: {
    handleDetail(record) {
      const currentData = {
        recordId: record.id,
        pageId: 'base/address/oaBaseAddressUser',
      }

      if (record.account !== this.userInfo.account && !this.permission) {
        currentData.pageId = 'base/address/oaBaseAddressUserView'
      }

      this.$emit('showDetail', currentData)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.bt {
  .avatar {
    margin-right: 6px;
  }

  cursor: pointer;
  &:hover {
    color: $primary-color;
  }
}
</style>
