<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-08-14 15:56:31
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-09-04 17:26:11
 * @FilePath: \housekeeping-admin\src\components\service-area\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="flex flex-col">
        <!-- 服务选择框 Start -->
        <area-popup v-model="selectData">
            <slot name="popup"></slot>
        </area-popup>
        <!-- 服务选择框 End -->

        <!-- Table Start -->
        <table-detail v-model="selectData" :disabled="disabled"></table-detail>
        <!-- Table End -->
    </div>
</template>

<script lang="ts" setup>
import { withDefaults, computed } from 'vue'
// import areaPopup from './area-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>
