<template>
  <div class="dashboard-listing-container">
    <DashboardBanner />

    <TemplateContainer size="xl">
      <filters-container :id="filterId" :filters="filters" />

      <table-listing
        :id="listingId"
        :endpoint="`content/${searchContentsList.join(',')}`"
        :fields="fields"
        :filters="requestFilters"
        :filter-id="filterId"
        :items-per-page="15"
        :headers="headers"
        :rows="rows"
        :actions="actions"
        :mass-actions="massActions"
        :search-in="searchContentsList"
        :request-config="{ abortPrevious: true }"
        :selectable="true"
        empty-cell-value="-"
        loader-size="xxl"
      />
    </TemplateContainer>
  </div>
</template>

<script>
import { markRaw } from 'vue'

import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'

import filters from './filters.js'
import request from './request.js'
import common from '../common'

import DashboardBanner from '../common/DashboardBanner'
import StatusUi from '../common/StatusUi'
import FormattedReferences from '../../FormattedReferences'

export default {
  name: 'DashboardListingToValidateContainer',
  $_i18nRootPath: 'customs.DASHBOARD.LISTING',
  components: {
    DashboardBanner,
    TemplateContainer,
    FormattedReferences
  },
  mixins: [filters, request, common],
  computed: {
    rows() {
      return fields => [
        {
          value: fields.title
        },
        {
          tag: markRaw(FormattedReferences),
          data: {
            listData: fields.brands.data,
            limit: 2,
            total: fields.brands.total
          }
        },
        {
          tag: markRaw(FormattedReferences),
          data: {
            listData: fields.countries.data,
            limit: 2,
            total: fields.countries.total
          }
        },
        {
          id: 'workflowStatus',
          tag: markRaw(StatusUi),
          class: (() => {
            if (
              (fields.workflow && fields.workflow.status) ||
              fields?.workflow?.status === 0
            ) {
              return `status--${fields.workflow.status}`
            }
          })(),
          data: {
            status: (() => {
              if (
                (fields.workflow && fields.workflow.status) ||
                fields?.workflow?.status === 0
              ) {
                return this.$_statusName(fields.workflow.status)
              }

              return '-'
            })()
          }
        },
        {
          id: 'publicationStatus',
          tag: markRaw(StatusUi),
          class: (() => {
            return `status--${fields.status ? '1' : '3'}`
          })(),
          data: {
            status: (() => {
              return fields.status
                ? this.$_tr('item.published')
                : this.$_tr('item.unpublished')
            })()
          }
        },
        {
          value: this.$_tr(`contentTypes.${fields.content_type}`)
        },
        {
          value: this.$_formatDate(fields.published_at)
        }
      ]
    },
    searchContentsList() {
      return this.selectedContentType
        ? [this.selectedContentType]
        : this.searchContents.concat(['procedures'])
    }
  }
}
</script>

<style lang="scss" scoped>
@use '../common/dashboard.scss' as *;
</style>
