<template>
  <q-tabs v-model="selectedTabRef" inline-label align="left" :breakpoint="0" no-caps>
    <q-tab name="dispatcherServlets" icon="bi-people" :label="$t('Dispatcher Servlets')" />
    <q-tab name="servletFilters" icon="bi-diagram-3" :label="$t('Servlet Filters')" />
    <q-tab name="servlets" icon="bi-diagram-3" :label="$t('Servlets')" />
  </q-tabs>
  <q-tab-panels v-model="selectedTabRef" animated swipeable keep-alive>
    <q-tab-panel name="dispatcherServlets" class="px-0">
      <w-grid
        :title="$t('menu.developer.springboot.bean')"
        :toolbar-actions="['refresh', 'separator', 'view', 'export']"
        :fetch-data-url="Environment.apiContextPath('/api/developer/springboot/mappings/dispatcherServletMappingDescriptions')"
        :checkbox-selection="false"
        :pageable="false"
        :columns="[
          {
            width: 100,
            name: 'httpMethod',
            label: $t('Http Method'),
            format: (value, row) => {
              return row.details?.requestMappingConditions?.methods || 'GET';
            },
            sortable: false,
          },
          {
            width: 200,
            name: 'patterns',
            label: $t('patterns'),
            format: (value, row) => {
              return row.details?.requestMappingConditions?.patterns || row.predicate;
            },
            sortable: false,
          },

          {
            width: 400,
            name: 'className',
            label: $t('className'),
            format: (value, row) => {
              return row.details?.handlerMethod?.className || row.handler;
            },
            sortable: false,
          },
          {
            width: 150,
            name: 'methodName',
            label: $t('methodName'),
            format: (value, row) => {
              return row.details?.handlerMethod?.name;
            },
            sortable: false,
          },
          {
            width: 150,
            name: 'consumes',
            label: $t('consumes'),
            format: (value, row) => {
              let result = '';
              const consumes = row.details?.requestMappingConditions?.consumes;
              if (consumes) {
                for (const consume of consumes) {
                  result += consume.mediaType + '<br/>';
                }
              }
              return result;
            },
            sortable: false,
          },
          {
            width: 150,
            name: 'produces',
            label: $t('produces'),
            format: (value, row) => {
              let result = '';
              const produces = row.details?.requestMappingConditions?.produces;
              if (produces) {
                for (const produce of produces) {
                  result += produce.mediaType + '<br/>';
                }
              }
              return result;
            },
            sortable: false,
          },
        ]"
      ></w-grid>
    </q-tab-panel>
    <q-tab-panel name="servletFilters" class="px-0">
      <w-grid
        :title="$t('menu.developer.springboot.bean')"
        :toolbar-actions="['refresh', 'separator', 'view', 'export']"
        :fetch-data-url="Environment.apiContextPath('/api/developer/springboot/mappings/filterRegistrationMappingDescriptions')"
        :checkbox-selection="false"
        :pageable="false"
        :columns="[
          { width: 200, name: 'servletNameMappings', label: $t('servletNameMappings'), sortable: false },
          { width: 200, name: 'urlPatternMappings', label: $t('urlPatternMappings'), sortable: false },
          { width: 400, name: 'className', label: $t('className'), sortable: false },
          { width: 150, name: 'name', label: $t('name'), sortable: false },
        ]"
      ></w-grid>
    </q-tab-panel>
    <q-tab-panel name="servlets" class="px-0">
      <w-grid
        :title="$t('menu.developer.springboot.bean')"
        :toolbar-actions="['refresh', 'separator', 'view', 'export']"
        :fetch-data-url="Environment.apiContextPath('/api/developer/springboot/mappings/servletRegistrationMappingDescriptions')"
        :checkbox-selection="false"
        :pageable="false"
        :columns="[
          { width: 300, name: 'mappings', label: $t('mappings'), sortable: false },
          { width: 300, name: 'className', label: $t('className'), sortable: false },
          { width: 200, name: 'name', label: $t('name'), sortable: false },
        ]"
      ></w-grid>
    </q-tab-panel>
  </q-tab-panels>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Environment } from 'platform-core';

const selectedTabRef = ref('dispatcherServlets');
</script>
