<template>
  <div class="homepage-customer-container">
    <Container
      v-if="manager"
      :background="true"
      :border="true"
      class="block-customer-container"
    >
      <div class="header">
        <img
          v-if="client"
          :src="$_getContentImage(getCheckedData(client, ['image']))"
          alt="Logo company image"
        />
      </div>
      <UserCard
        v-if="manager"
        :image="$_getContentImage(manager.image)"
        v-bind="manager"
      />
    </Container>
  </div>
</template>

<script>
import { http } from '@inside-library/helpers/Http'

import UserCard from '../users/UserCard'

import { Container } from 'inside-collection/components'

export default {
  name: 'homepage-block-customer',
  components: {
    Container,
    UserCard
  },
  data() {
    return {
      manager: null
    }
  },
  computed: {
    site() {
      return this.getStore('getUserInformation', 'site')
    },
    client() {
      return this.getStore('getUserInformation', 'client')
    }
  },
  beforeMount() {
    this.fetchAccountManager()
  },
  methods: {
    async fetchAccountManager() {
      try {
        const { data } = await http.get(
          'content/users',
          {
            fields: [
              'uuid',
              'firstname',
              'lastname',
              'image',
              'function',
              'phone',
              'email',
              {
                sites: ['uuid', 'title']
              },
              {
                clients: ['machine_name', 'image']
              }
            ],
            filters: {
              ...(this.isAlive(this.site, 'uuid') && {
                sites: { 'uuid:eq': this.site.uuid }
              }),
              clients: { 'machine_name:eq': this.client.machine_name },
              'is_key_account_manager:eq': true,
              'is_maintenance:eq': 0
            }
          },
          { useLangcode: false }
        )
        this.manager = this.getCheckedData(data, [0])
      } catch (err) {
        throw new Error(err)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.homepage-customer-container {
  margin-left: var(--spacing-m);

  @include tablet {
    margin: 0;
  }

  @include mobile {
    margin: var(--spacing-m) 0 0 0;
  }

  .block-customer-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: var(--color-light);
    height: 100%;

    .header {
      text-align: center;
      margin-bottom: var(--spacing-m);

      img {
        height: 44px;
        margin: auto;
      }
    }
  }
}
</style>
