<template>
    <div class="flex flex-col h-full">
        <account-number :accoutnInfo="accoutnInfo" />
        <div class="flex flex-1 bg-white overflow-x-auto">
            <organization @set-selected-node="setSelectedNode" :curSelectedNode="selectedNode" @fetch-table-list="fetchTableList" />
            <account-list ref="accountListRef" :curOrganization="selectedNode" @refresh-sub-account-number="fetchSubAccountNumber" />
        </div>
    </div>
</template>

<script setup lang="ts">
import accountNumber, { type IAccountInfo } from './modules/account-number.vue'
import organization from './modules/organization.vue'
import accountList from './modules/account-list.vue'
import type { Tree } from './components/organization/organization-tree.vue'
import { subAccountNumber } from '@/api/account_center/sub_account'
import { StatusEnum } from '@/enums'
import feedback from '@/utils/feedback'

const selectedNode = ref()
const setSelectedNode = (data: Tree) => {
    selectedNode.value = data
}
watch(
    () => selectedNode.value,
    val => {
        if (val) {
            if (val.status == StatusEnum.Stop) feedback.msgError('当前组织状态为停用，请先启用')
            fetchTableList()
        }
    }
)
const accountListRef = ref<InstanceType<typeof accountList>>()
const fetchTableList = () => {
    accountListRef.value?.fetchTableList(selectedNode.value?.id)
}
const accoutnInfo = ref<IAccountInfo>()
const fetchSubAccountNumber = async () => {
    try {
        const result = await subAccountNumber()
        accoutnInfo.value = result
    } catch (error) {}
}
fetchSubAccountNumber()
</script>
<style scoped></style>
