<!-- 交易商管理-交易商管理-交易商管理-审核 -->
<template>
    <DetailsView ref="detailsRef" v-bind="{ userId: record.userid, modifyStatus: record.modifystatus }">
        <el-button type="primary" @click="openComponent('Operate')">{{ t('operation.aduit') }}</el-button>
        <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ record }" @closed="closeComponent"
            v-if="componentId" />
    </DetailsView>
</template>

<script lang="ts" setup>
import { shallowRef, PropType, defineAsyncComponent } from 'vue'
import { useComponent } from '@/hooks/component'
import DetailsView from '@pc/views/investor/manage/user/components/details/view.vue'
import { i18n } from '@/stores'

defineProps({
    record: {
        type: Object as PropType<Investor.ModifyPageRsp>,
        required: true
    }
})

const { global: { t } } = i18n
const detailsRef = shallowRef()

const componentMap = new Map<string, unknown>([
    ['Operate', defineAsyncComponent(() => import('./operate/index.vue'))], // 操作
])

const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
    detailsRef.value?.close(true)
})
</script>