<template>
  <n-space :vertical="true">
    <n-divider class="!mb-0 text-14px text-#666">登录账户类型</n-divider>
    <n-space justify="center">
      <n-radio-group v-model:value="checkedValue" name="loginType" size="large">
        <n-radio-button
          v-for="item in accounts"
          :key="item.type"
          :value="item.type"
          type="primary"
          @click="change(item.type)"
        >
          {{ item.label }}
        </n-radio-button>
      </n-radio-group>
    </n-space>
  </n-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
interface Emits {
  (e: 'change', param: { type: string }): void;
}
const checkedValue = ref('admin');
const emit = defineEmits<Emits>();
const accounts = [
  {
    label: '教务人员登录',
    type: 'admin'
  },
  {
    label: '学生账户登录',
    type: 'student'
  }
];

function change(type: string) {
  emit('change', { type });
}
</script>

<style scoped></style>
