<template>
  <div class="tw-overflow-y-auto">
    <draggable
      :id="folder.id"
      :list="folder.reportList"
      :animation="300"
      group="data"
      ghost-class="ghostCard"
      drag-class="dragCard"
      filter=".ignoreItem"
      handle=".drag_handle"
      :force-fallback="true"
      @start="dragReports = true"
      @end="dragReports = false"
      :style="{ height: heightDrag }"
      :move="move"
    >
      <q-item
        class="
          tw-py-3 
          tw-border-b 
        "
        v-for="(report, index) in uniqBy(folder.reportList)"
        :key="report.id"
      >
        <q-item-section 
          avatar 
          class="f-cursor-grab"
        >
          <q-icon 
            name="drag_handle" 
            class="drag_handle" 
          />
        </q-item-section>
        <q-item-section>
          <q-item-label 
            class="tw-font-bold" 
            lines="1"
          >
            {{ report.title || report.id }}
          </q-item-label>
          <q-item-label caption lines="1">
            {{ report.name || report.description }} 
          </q-item-label>
        </q-item-section>
        <q-item-section side>
          <q-btn 
            flat 
            round 
            color="tw-gray-300" 
            size="sm"
            icon="more_vert"
          >
            <q-menu>
              <q-list class="list-report-menu">
                <q-item 
                  clickable
                  v-close-popup
                  v-for="(item, index) in fieldRelationActions" 
                  :key="index"  
                  @click.native="item.action(report)"
                  v-if="item.vIf !== undefined ? item.vIf : true"
                >
                  <q-item-section avatar>
                    <q-icon 
                      :class="item.icon" 
                      color="primary" 
                      size="xs" 
                    />
                  </q-item-section>
                  <q-item-section>
                    {{  item.label  }}
                  </q-item-section>
                </q-item>
                <q-separator />
              </q-list>
            </q-menu>
          </q-btn>
        </q-item-section>
      </q-item>
    </draggable>
    <div
      v-if="!dragReports && folder.reportList.length === 0"
      class="
        tw-py-8 
        tw-text-center 
        tw-text-5xl"
      >
        <div class="fa-light fa-folder-xmark" />
        <div class="tw-text-base tw-py-2">
         {{ $tr('isite.cms.message.searchNotFound') }}
        </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import foldersStore from './store/foldersStore.js';
import _ from "lodash";

export default {
  components: {
    draggable,
  },
  props: {
    folder: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      toFolderId: null,
    };
  },
  inject: {
    updateRelationData: {
      type: Function,
      default: () => false,
    },
    getFieldRelationActions: {
      type: Function,
      default: () => false,
    },
  },
  computed: {
    dragReports: {
      get() {
        return foldersStore().getDragReports();
      },
      set(value) {
        foldersStore().setDragReports(value);
      },
    },
    fieldRelationActions() {
      return this.getFieldRelationActions();
    },
    heightDrag() {
      if(this.dragReports && this.folder.reportList.length === 0) {
        return '100px';
      }
      return this.folder.reportList.length <= 5 ? 'auto' : '300px';
    },
  },
  methods: {
    async move(elm) {
      if (elm.from.id === elm.to.id) return;
      const reportList = elm.draggedContext.element;
      reportList.folderId = Number(elm.to.id);
      this.toFolderId = reportList.folderId;
      await this.updateRelationData(reportList);
    },
    uniqBy(data){
      return _.uniqBy(data, 'id');
    },
  },
};
</script>

<style>
</style>