<template>
  <div>
    <q-splitter v-model="splitterModelRef">
      <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>
        <q-tab-panels v-model="selectedTabRef" animated swipeable vertical transition-prev="jump-up" transition-next="jump-up">
          <q-tab-panel name="GB_T_4754_2017">
            <GB_T_4754_2017></GB_T_4754_2017>
          </q-tab-panel>
          <q-tab-panel name="GB_T_2260_2007">
            <GB_T_2260_2007></GB_T_2260_2007>
          </q-tab-panel>
        </q-tab-panels>
      </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>
