<script setup lang="ts">
import { ref } from 'vue';
import locale from 'ant-design-vue/es/locale/ko_KR';
import { DEFAULT_THEME } from '~/constants/theme/ui';

const route = useRoute();
const router = useRouter();
const adminJoinStore = ref('');
const member = ref('');

definePageMeta({
  layout: 'empty'
});

const changeUrl = (activeKey: string) => {
  router.push(activeKey);
};

function activeKey(key) {
  console.log('Active Tab:', key);
}

const disabledInst = computed(() => {
  return false;
});

const disabledCert = computed(() => {
  return false;
});

const disabledForm = computed(() => {
  return false;
});

const disabledCmptn = computed(() => {
  return false;
});
</script>

<template>
  <a-config-provider :locale="locale" :theme="DEFAULT_THEME">
    <a-row class="w-full h-full">
      <a-row justify="center" class="w-full h-full items-center">
        <a-col :span="15">
          <a-card bordered class="p-5">
            <a-typography-title :level="4" type="secondary" class="text-center">
              참여기관 회원가입
            </a-typography-title>

            <a-tabs default-active-key="1" v-model:active-key="activeKey">
              <a-tab-pane key="/admin/login/join/trms" tab="01.약관동의" />
              <a-tab-pane
                key="/admin/login/join/inst"
                tab="02.기관선택"
                :disabled="disabledInst"
              />
              <a-tab-pane
                key="/admin/login/join/cert"
                tab="03.본인인증"
                :disabled="disabledCert"
              />
              <a-tab-pane
                key="/admin/login/join"
                tab="04.정보입력"
                :disabled="disabledForm"
              />
              <a-tab-pane
                key="/admin/login/join/cmptn"
                tab="05.가입완료"
                :disabled="disabledCmptn"
              />
            </a-tabs>

            <slot />
          </a-card>
        </a-col>
      </a-row>
    </a-row>
  </a-config-provider>
</template>

<style scoped></style>
