<template>
    <div class="bg-primary-light-10 py-[10px] pl-[16px]">
        当前您有
        <span class="text-primary">{{ accoutnInfo.quota }}</span>
        个可用的子账号名额，已使用
        <span class="text-primary">{{ accoutnInfo.quantity }}</span>
        个，剩余
        <span class="text-primary">{{ parseUnuseNumber }}</span>
        个
    </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'

export interface IAccountInfo {
    quota: number
    quantity: number
}
const props = defineProps({
    accoutnInfo: {
        type: Object as PropType<IAccountInfo>,
        default: () => ({})
    }
})
const parseUnuseNumber = computed(() => props.accoutnInfo?.quota - props.accoutnInfo?.quantity)
</script>
<style scoped></style>
