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

<script lang="ts" setup>
import { computed } from 'vue'
import goodPopup from './good-popup.vue'
import tableDetail from './table-detail.vue'

const props = withDefaults(
    defineProps<{
        modelValue?: any
        selectData: any
        disabled?: boolean
    }>(),
    {
        modelValue: [],
        selectData: [],
        disabled: false
    }
)
const emit = defineEmits(['update:modelValue', 'update:selectData'])

const selectData: any = computed({
    get: () => {
        return props.selectData || []
    },
    set: (value) => {
        emit(
            'update:modelValue',
            value.map((item: Event | any) => item.id)
        )
        emit('update:selectData', value)
    }
})
</script>