<template>
  <div>
    <Banner :add="['lifestyle_contents', 'lifestyle_categories']" />

    <TemplateContainer size="l">
      <FiltersContainer
        v-if="filters.length"
        id="lifestyle-filters"
        :filters="filters"
      />

      <TableListing
        id="lifestyle-listing"
        :fields="fields"
        :headers="headers"
        :rows="rows"
        filter-id="lifestyle-filters"
        :items-per-page="12"
        :search-in="['lifestyle_contents']"
        :on-row-click="onClick"
        :actions="['edit']"
        endpoint="content/lifestyle_contents"
      />
    </TemplateContainer>
  </div>
</template>

<script>
import Banner from '@inside-commons/components/lib/Banner'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import FiltersContainer from '@inside-filters/displays/FiltersContainer'
import TableListing from '@inside-listings/components/TableListing'

import { basicFields } from '@inside-customs/constants'

export default {
  name: 'LifestylePage',
  $_i18nRootPath: 'customs.LIFESTYLE',
  components: {
    Banner,
    TemplateContainer,
    FiltersContainer,
    TableListing
  },
  computed: {
    fields() {
      return [...basicFields, { lifestyle_categories: ['uuid', 'title'] }]
    },
    headers() {
      return [
        { value: this.$_tr('headers.lifestyle') },
        { value: this.$_tr('headers.categories') },
        { value: this.$_tr('headers.date') }
      ]
    },
    filters() {
      return [
        {
          modelName: 'search',
          type: 'text',
          label: this.$_tr('filters.search')
        },
        {
          modelName: 'lifestyle_categories',
          type: 'selectbox',
          fetch: true,
          reference: 'lifestyle_categories',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectValueKey: 'uuid',
          objectLabelKey: 'title',
          label: this.$_tr('filters.categories')
        }
      ]
    }
  },
  methods: {
    rows(fields) {
      return [
        {
          id: 'title',
          class: 'title',
          value: fields.title
        },
        {
          id: 'categories',
          class: 'categories',
          children: this.getCheckedData(
            fields,
            'lifestyle_categories.data',
            []
          ).map(category => ({
            value: category.title
          }))
        },
        {
          id: 'date',
          class: 'date',
          value: this.$_formatDate(fields.updated_at, ' L')
        }
      ]
    },
    onClick(data) {
      this.triggerModal(
        'lifestyle',
        'fetch',
        {
          item: data,
          content: 'lifestyle_contents'
        },
        {
          layout: 'right',
          transition: 'fadeInLeft',
          closeAll: true,
          useUrlParams: true,
          size: 'm'
        }
      )
    }
  }
}
</script>
