<template>
  <div class="vn-pp row justify-center">
  <div class="vn-w-md">
    <q-card>
      <q-card-section>
        <div>{{user.nickname}}</div>
        <div class="text-caption">#{{user.id}}</div>
        <div class="text-caption">{{user.name}}</div>
      </q-card-section>
    </q-card>
    <q-card class="q-mt-md">
      <q-list bordered separator>
        <q-item v-if="visits && !visits.length">
          <q-item-section class="text-center">
            {{$t('noDataFound')}}
          </q-item-section>
        </q-item>
        <q-item
          v-for="visit in visits"
          :key="visit.id">
          <q-item-section>
            <q-item-label>{{visit.stamp | date('ddd, MMMM Do H:mm')}}</q-item-label>
            <q-item-label caption>
              {{visit.access.agent.platform}} -
              {{visit.access.agent.browser}}
              {{visit.access.agent.version}}
            </q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-card>
  </div>
  </div>
</template>

<script>
export default {
  name: 'AccessLog',
  data () {
    return {
      user: {},
      visits: null
    }
  },
  mounted () {
    let filter = {
      fields: ['id', 'nickname', 'name']
    }
    this.$axios.get(`Accounts/${this.$route.params.user}`, { params: { filter } })
      .then(res => (this.user = res.data))

    filter = {
      fields: ['stamp', 'accessFk'],
      where: { userFk: this.$route.params.user },
      order: 'stamp DESC',
      limit: 10,
      include: {
        relation: 'access',
        scope: {
          fields: ['agentFk'],
          include: {
            relation: 'agent',
            scope: {
              fields: [
                'platform',
                'browser',
                'version'
              ]
            }
          }
        }
      }
    }
    this.$axios.get(`VisitUsers`, { params: { filter } })
      .then(res => (this.visits = res.data))
  }
}
</script>
