<template>
    <ProDrawer ref="proDrawerRef">
        <el-tabs v-model="activeTab">
            <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
                <component v-if="tab.name == activeTab" :is="tab.component" v-model="activeTab" :id="clueId" />
            </el-tab-pane>
        </el-tabs>
    </ProDrawer>
</template>

<script setup lang="ts">
import ProDrawer, { type IParams } from '@/components/ProDrawer/index.vue'
import baseIfno from '../components/clue-detail/base-info.vue'
import clueRecord from '../components/clue-detail/clue-record.vue'

const proDrawerRef = ref<InstanceType<typeof ProDrawer>>()
const activeTab = ref('baseInfo')
const tabs = shallowRef([
    { label: '基础信息', name: 'baseInfo', component: baseIfno },
    { label: '线索记录', name: 'clueRecord', component: clueRecord }
])
const clueId = ref()
const openDrawer = (params: IParams) => {
    clueId.value = params.data.id
    proDrawerRef.value?.openDrawer(params)
}
defineExpose({
    openDrawer
})
</script>
<style scoped></style>
