<script setup>
import { onBeforeMount, ref, watch } from "vue";
import { getRecordList } from "@/api/default_api_promises.js";
import { useRoute, useRouter } from "vue-router";
import Paginator from '@/components/common/Paginator.vue';
import DynamicDataList from '@/components/DynamicDataList.vue';

const route = useRoute();
const router = useRouter();

const currentTableTab = ref(route.query.material_type);

const items = ref(null);
const totalCount = ref(0);
const pageCount = ref(0);

const getItems = () => {
  const urlSearchParams = new URLSearchParams(route.query);
  getRecordList({ url: `/api/${currentTableTab.value}-materials/`, params: urlSearchParams })
    .then(response => {
      totalCount.value = response.data.count;
      items.value = response.data.results;
      pageCount.value = Math.ceil(totalCount.value / route.query.page_size);
    });
};

const updateTab = () => {
  const query = { ...route.query, material_type: currentTableTab.value, page: 1 };
  router.push({ name: route.name, query, params: { ...route.params } });
};

watch(currentTableTab, getItems);

onBeforeMount(getItems);
</script>

<template>
  <v-tabs
    v-model="currentTableTab"
    align-tabs="center"
    color="primary-blue"
    @update:model-value="updateTab"
  >
    <v-tab value="image">Фото</v-tab>
    <v-tab value="audio">Фоно</v-tab>
    <v-tab value="video">Видео</v-tab>
  </v-tabs>

  <template v-if="items && items.length">
    <dynamic-data-list :items="items" :materialType="currentTableTab" />
    <paginator v-if="pageCount > 1" :page-count="pageCount" />
  </template>

  <template v-else>
    <div class="d-flex justify-center mt-15">
      <span class="fs-18 color-primary">Не найдено ни одного материала</span>
    </div>
  </template>
</template>


<style scoped lang="scss">

</style>
<script setup>
import { useRouter } from "vue-router";

defineProps(["items"])

let router = useRouter()

</script>

<template>
  <v-data-iterator :items="items" class="d-flex justify-center">
    <template v-slot:default="{ items }">
      <template v-for="(item, index) in items" :key="index">
        <div class="item cursor-pointer" @click="router.push({name: 'detailImage', params: {id: item.raw.id}})">
          <div style="width: 110px; height: 110px">
            <v-icon size="110" color="primary-violet">mdi-image-outline</v-icon>
          </div>
          <div class="ml-5">
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Архивный номер:</span>
              <span class="fw-regular fs-12 ml-3">{{ item.raw.archive_number }}</span>
            </div>
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Аннотация:</span>
              <span class="fw-regular fs-12 ml-3 truncate-text">{{ item.raw.annotation }}</span>
            </div>
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Дата создания:</span>
              <span class="fw-regular fs-12 ml-3">{{ item.raw.creation_date }}</span>
            </div>
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Автор:</span>
              <span class="fw-regular fs-12 ml-3">{{ item.raw.author }}</span>
            </div>
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Вид фотодокумента:</span>
              <span class="fw-regular fs-12 ml-3">{{ item.raw.photo_type }}</span>
            </div>
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Цветность:</span>
              <span class="fw-regular fs-12 ml-3">{{ item.raw.color }}</span>
            </div>
          </div>
        </div>
      </template>
    </template>
  </v-data-iterator>
</template>

<style scoped lang="scss">
.item {
  width: 900px;
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 1px solid darkgray;
  border-radius: 8px;
  display: flex;
  justify-content: left;
  transition: background-color 0.3s ease;
}

.item:hover {
  background-color: #ebebeb;
}
</style>
<script setup>
import { useRouter } from "vue-router";

defineProps(["items"])

let router = useRouter()

</script>

<template>
  <v-data-iterator :items="items" class="d-flex justify-center">
    <template v-slot:default="{ items }">
      <template v-for="(item, index) in items" :key="index">
        <div class="item cursor-pointer" @click="router.push({name: 'detailAudio', params: {id: item.raw.id}})">
          <div style="width: 110px; height: 110px">
            <v-icon size="110" color="primary-violet">mdi-volume-high</v-icon>
          </div>
          <div class="ml-5">
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Архивный номер:</span>
              <span class="fw-regular fs-12 ml-3">{{ item.raw.archive_number }}</span>
            </div>
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Название:</span>
              <span class="fw-regular fs-12 ml-3 truncate-text">{{ item.raw.title }}</span>
            </div>
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Аннотация:</span>
              <span class="fw-regular fs-12 ml-3 truncate-text">{{ item.raw.annotation }}</span>
            </div>
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Исполнитель:</span>
              <span class="fw-regular fs-12 ml-3">{{ item.raw.performer }}</span>
            </div>
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Дата создания:</span>
              <span class="fw-regular fs-12 ml-3">{{ item.raw.creation_date }}</span>
            </div>
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Язык:</span>
              <span class="fw-regular fs-12 ml-3">{{ item.raw.language }}</span>
            </div>
          </div>
        </div>
      </template>
    </template>
  </v-data-iterator>
</template>

<style scoped lang="scss">
.item {
  width: 900px;
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 1px solid darkgray;
  border-radius: 8px;
  display: flex;
  justify-content: left;
  transition: background-color 0.3s ease;
}

.item:hover {
  background-color: #ebebeb;
}
</style>
<script setup>
import { useRouter } from "vue-router";

defineProps(["items"])

let router = useRouter()

</script>

<template>
  <v-data-iterator :items="items" class="d-flex justify-center">
    <template v-slot:default="{ items }">
      <template v-for="(item, index) in items" :key="index">
        <div class="item cursor-pointer" @click="router.push({name: 'detailVideo', params: {id: item.raw.id}})">
          <div style="width: 110px; height: 110px">
            <v-icon size="110" color="primary-violet">mdi-video-outline</v-icon>
          </div>
          <div class="ml-5">
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Архивный номер:</span>
              <span class="fw-regular fs-12 ml-3">{{ item.raw.archive_number }}</span>
            </div>
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Аннотация:</span>
              <span class="fw-regular fs-12 ml-3 truncate-text">{{ item.raw.annotation }}</span>
            </div>
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Дата создания:</span>
              <span class="fw-regular fs-12 ml-3">{{ item.raw.creation_date }}</span>
            </div>
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Автор:</span>
              <span class="fw-regular fs-12 ml-3">{{ item.raw.author }}</span>
            </div>
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Вид фотодокумента:</span>
              <span class="fw-regular fs-12 ml-3">{{ item.raw.photo_type }}</span>
            </div>
            <div class="d-flex">
              <span class="fs-12 fw-bold color-primary">Цветность:</span>
              <span class="fw-regular fs-12 ml-3">{{ item.raw.color }}</span>
            </div>
          </div>
        </div>
      </template>
    </template>
  </v-data-iterator>
</template>

<style scoped lang="scss">
.item {
  width: 900px;
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 1px solid darkgray;
  border-radius: 8px;
  display: flex;
  justify-content: left;
  transition: background-color 0.3s ease;
}

.item:hover {
  background-color: #ebebeb;
}
</style>
why requesat working correctl;y with audio image and videeo dataliost but not woking with dynamic data litst<script setup>
import { ref, onBeforeMount } from 'vue';
import { getOptions } from "@/api/default_api_promises";
import { useRoute } from 'vue-router';

const route = useRoute();
let material = ref(route.query.material_type);
let items = ref([]);
let loading = ref(false);
let metadata = ref({});

const iconMap = {
  audio: 'mdi-volume-high',
  image: 'mdi-image-outline',
  video: 'mdi-video-outline'
};

function getDisplayFields(item) {
  const metadataFields = metadata.value.actions.list;
  return Object.entries(item.raw).map(([key, value]) => ({
    label: metadataFields[key].label,
    value: value
  }));
}

function fetchMetadataAndItems() {
  loading.value = true;

  getOptions({
    url: `/api/${material.value}-materials/`
  })()
    .then(function(response) {
      metadata.value = response.data;
      loading.value = false;
    })
}
onBeforeMount(fetchMetadataAndItems);
</script>

<template>
  <v-data-iterator :items="items" class="d-flex justify-center">
    <template v-slot:default="{ items }">
      <template v-for="(item, index) in items" :key="index">
        <div class="item">
          <div class="item-icon">
            <v-icon size="110" color="primary-violet">
              {{ iconMap[material] || 'mdi-file-document-outline' }}
            </v-icon>
          </div>
          <div class="item-content">
            <v-progress-circular
              v-if="loading"
              indeterminate
              color="primary"
            ></v-progress-circular>
            <template v-else>
              <div v-for="field in getDisplayFields(item)" :key="field.label" class="item-field">
                <span class="field-label">{{ field.label }}:</span>
                <span class="field-value">{{ field.value }}</span>
              </div>
            </template>
          </div>
        </div>
      </template>
    </template>
  </v-data-iterator> <!-- This was missing a closing tag -->
</template>


<style scoped lang="scss">
.item {
  width: 900px;
  padding: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 1px solid darkgray;
  border-radius: 8px;
  display: flex;
  overflow: hidden;
}

.item-icon {
  flex-shrink: 0;
  width: 110px;
}

.item-content {
  flex-grow: 1;
  margin-left: 20px;
  overflow: hidden;
  padding-right: 20px;
}
.item-field {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  line-height: 1.2;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.field-label {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: bold;
  margin-right: 12px;
  color: gray;
}
.field-value {
  flex-grow: 1;
  font-size: 14px;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
</style>