<script setup lang="ts">
import { provide, watch } from 'vue'
import AreaSearch from '@/components/area-common/Search.vue'
import TCMap from '@/components/area-common/Map.vue'
import ATable from '@/components/area-common/Table.vue'
import infoDialog from './components/infoDialog.vue';
import { useAreaOperation, useAreaTableOperation, useDialogOperation } from '@/components/area-common/hooks/useServiceArea'
import { MAP_INJECTION_KEY } from '@/config/symbol'

const { tcMap, areaSearch, zone, base, address, regionCode, isInited, handleSearch, searchCommon, increment } = useAreaOperation(true)
const { handleLocation, handleDelete } = useAreaTableOperation({ tcMap, base })
const { infoDialogRef, showDialog } = useDialogOperation(regionCode)

provide(MAP_INJECTION_KEY, {
    isInited,
    tcMap,
    address,
    showDialog,
    searchCommon,
    handleLocation,
    handleDelete
})
</script>

<template>
    <div class="area">
        <AreaSearch ref="areaSearch" @handleSearch="handleSearch" />
        <div class="area__part">
            <TCMap ref="tcMap" />
            <ATable :zone="zone" :pager="base" />
        </div>
    </div>
    <infoDialog ref="infoDialogRef" @handleConfrim="increment" />
</template>

<style lang="scss" scoped>
@import '@/components/area-common/styles/area.scss';
</style>
