<template>
    <div class="app-container">
        <page-search :searchFormConfig="searchFormConfig" @resetBtnClick="handleResetClick"
            @queryBtnClick="handleQueryClick" />

        <page-content ref="pageContentRef" :contentTableConfig="contentTableConfig" pageName="/UserExtension/userextension" rowKey="extension"
            :isExport="false" @newBtnClick="addClick"
            @editBtnClick="edit"></page-content>
        <page-modal :defaultInfo="defaultInfo" :title="'编辑绑定'" ref="pageModalRef" pageName="/UserExtension/userextension"
            :modalConfig="newModelConfig"></page-modal>
    </div>
</template>
  
<script>
import { defineComponent, ref, computed, watch, getCurrentInstance } from 'vue'

import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModal from '@/components/page-modal'

import { searchFormConfig } from './config/search.config'
import { contentTableConfig } from './config/content.config'
import { usePageSearch } from '@/hooks/use-page-search'
import { usePageModal } from '@/hooks/use-page-modal'
import { modalConfig } from './config/modal.config'

export default defineComponent({
    name: 'ExtNumber',
    components: {
        PageSearch,
        PageContent,
        PageModal,
    },
    setup () {

        let newModelConfig = modalConfig;
        
        // 1.处理逻辑
        const newCallback = () => { }
        const editCallback = () => { }

        const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()
        const { proxy } = getCurrentInstance()

        const recordData = ref({})
        const open = ref(false)

        const clRowData = ref({})

        // 3.调用hook获取公共变量和函数
        const [pageModalRef, defaultInfo, handleNewData, handleEditData] =
            usePageModal(newCallback, editCallback)

        function edit(item) {
            console.log(modalConfig, 'formItems')
            newModelConfig = modalConfig.formItems.map((o) => {
                if (o.field === 'extension') {
                    o.otherOptions = {
                        ...o.otherOptions,
                        disabled: true,
                    }
                }
            });


            return handleEditData(item);
        }

        function addClick(item) {
            newModelConfig = modalConfig.formItems.map((o) => {
                if (o.field === 'extension') {
                     
                    o.otherOptions = {
                        ...o.otherOptions,
                        disabled: false,
                    }
                }
            });
            handleNewData(item);
        }

        return {
            newModelConfig,
            defaultInfo,
            addClick,
            edit,
            pageModalRef,
            clRowData,
            searchFormConfig,
            contentTableConfig,
            pageContentRef,
            handleResetClick,
            handleQueryClick,
            recordData,
            open,
        }
    }
})
</script>
  