<template>
    <div class="flex flex-col">
        <channel-popup v-model="selectData">
            <slot name="popup"></slot>
        </channel-popup>
        <table-detail v-model="selectData"></table-detail>
    </div>
</template>

<script lang="ts" setup>
import type { PropType } from 'vue'
import channelPopup from './channel-popup.vue'
import tableDetail from './table-detail.vue'
import { CHANNEL_INJECTION_KEY } from '@/config/symbol'

const props = defineProps({
    modelValue: {
        type: Array as PropType<any>,
        default: () => []
    }
})
const emit = defineEmits(['update:modelValue'])

const parent = inject(CHANNEL_INJECTION_KEY)
// const channel = computed(() => parent?.channel.value)

const selectData = ref<Record<number, any[]>>({})
watch(
    () => unref(selectData),
    val => {
        emit('update:modelValue', unref(val))
        // emit('update:modelValue', val[unref(channel)!])
    }
)
</script>
