<template>
  <div style="height: 100%">
    <q-splitter v-model="splitterModelRef" style="height: 100%">
      <template #before>
        <q-tabs v-model="selectedTabRef" vertical active-class="active-class">
          <q-tab name="GB_T_4754_2017" no-caps>
            <div class="text-left" style="width: 200px">国民经济行业分类</div>
          </q-tab>
          <q-tab name="GB_T_2260_2007" no-caps>
            <div class="text-left" style="width: 200px">行政区划分</div>
          </q-tab>
        </q-tabs>
      </template>

      <template #after>
        <div class="pl-1" style="height: 100%">
          <q-tab-panels v-model="selectedTabRef" animated swipeable keep-alive style="height: 100%">
            <q-tab-panel name="GB_T_4754_2017" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
              <GB_T_4754_2017></GB_T_4754_2017>
            </q-tab-panel>
            <q-tab-panel name="GB_T_2260_2007" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
              <GB_T_2260_2007></GB_T_2260_2007>
            </q-tab-panel>
          </q-tab-panels>
        </div>
      </template>
    </q-splitter>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import GB_T_4754_2017 from './standard/GB_T_4754_2017.vue';
import GB_T_2260_2007 from './standard/GB_T_2260_2007.vue';

const splitterModelRef = ref(15);
const selectedTabRef = ref('GB_T_4754_2017');
</script>
<style>
.active-class {
  font-weight: 700;
}
</style>
