<template>
  <div class="h-full">
    <w-splitter :model-value="36" horizontal class="h-full" unit="px" disable>
      <template #before>
        <q-tabs v-model="tab" inline-label dense indicator-color="amber" align="left" active-color="amber">
          <template v-for="item in HistGird.tabs" :key="item.value">
            <q-tab :name="item.value" :icon="item.icon" :label="item.label" />
          </template>
        </q-tabs>
      </template>
      <template #after>
        <q-tab-panels v-model="tab" :keep-alive="true" animated swipeable vertical transition-prev="jump-up" transition-next="jump-up" class="h-full">
          <template v-for="item in HistGird.tabs" :key="item.value">
            <q-tab-panel :name="item.value" class="h-full p-1">
              <HistRatingGrid v-if="item.value === HistGird.type.histRating.value"></HistRatingGrid>
              <DefaultCognizanceGrid v-else-if="item.value === HistGird.type.defaultCognizance.value"></DefaultCognizanceGrid>
              <DefaultRebirthGrid v-else-if="item.value === HistGird.type.defaultRebirth.value"></DefaultRebirthGrid>
            </q-tab-panel>
          </template>
        </q-tab-panels>
      </template>
    </w-splitter>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { HistGird } from '@/views/custRating/company/ts/HistGrid';
import HistRatingGrid from '@/views/custRating/company/components/HistRatingGrid.vue';
import DefaultCognizanceGrid from '@/views/custRating/company/components/DefaultCognizanceGrid.vue';
import DefaultRebirthGrid from '@/views/custRating/company/components/DefaultRebirthGrid.vue';

const tab = ref(HistGird.type.histRating.value);
</script>
