<template>
  <Block
    v-if="showReport"
    :title="$_tr('title')"
    title-tag="h3"
    class="space-visit-report-listing-container"
  >
    <table-listing
      id="space-visit-report-listing"
      :items-per-page="16"
      :fields="requestFields"
      :filters="requestFilters"
      :headers="headers"
      :rows="scaffoldRow"
      :on-row-click="onRowClick"
      :actions="['edit', 'delete']"
      endpoint="content/visit_report"
      :on-request-success="onRequestSuccess"
    />
  </Block>
</template>

<script>
import Block from '@inside-commons/components/lib/Block'

export default {
  name: 'SpaceVisitReportListing',
  $_i18nRootPath: 'customs.SPACE.VISIT_REPORT_LISTING',
  components: { Block },
  data() {
    return {
      showReport: true,
      requestFields: [
        'uuid',
        'title',
        'slug',
        'admin',
        'content_type',
        'updated_at',
        'content',
        { comments: ['count'] },
        { franchised_spaces: ['uuid', 'title', 'slug'] }
      ],
      requestFilters: {
        status: 1,
        franchised_spaces: { 'slug:eq': this.$route.params.slug }
      }
    }
  },
  computed: {
    headers() {
      return [
        {
          value: this.$_tr('headers.title'),
          sortable: true,
          key: 'title',
          default: true
        },
        {
          value: this.$_tr('headers.updatedAt'),
          sortable: true,
          key: 'updated_at',
          order: 'desc',
          default: true
        }
      ]
    }
  },
  methods: {
    onRequestSuccess({ data }) {
      this.showReport = data.length > 0

      return data
    },
    scaffoldRow(fields) {
      return [
        { id: 'title', value: fields.title, cellOptions: { width: '90%' } },
        { id: 'date', tag: 'date-ui', data: { date: fields.updated_at } }
      ]
    },
    onRowClick(data) {
      this.$router.push({
        name: 'SpaceVisitReport',
        params: { slug: this.$route.params.slug, rapport: data.slug[0] }
      })
    }
  }
}
</script>

<style lang="scss">
.space-visit-report-listing-container {
  margin-bottom: var(--spacing-xxl);
}
</style>
