<template>
    <component :is="componentName" v-model="queryParams[activeTab]" @reset-page="resetPage" @reset-params="resetParams" />
    <el-card shadow="never" class="!border-none mt-4 summary">
        <el-tabs v-model="activeTab">
            <el-tab-pane label="总结模板" name="template">
                <summary-template v-if="activeTab === 'template'" ref="summaryTemplateRef" :queryParams="queryParams[activeTab]" />
            </el-tab-pane>
            <el-tab-pane label="总结记录" name="record">
                <summary-record v-if="activeTab === 'record'" ref="summaryRecordRef" :queryParams="queryParams[activeTab]" />
            </el-tab-pane>
        </el-tabs>
    </el-card>
</template>

<script setup lang="ts">
import templateSearchForm from './modules/template-search-form.vue'
import recordSearchForm from './modules/record-search-form.vue'
import summaryTemplate from './modules/summary-template.vue'
import summaryRecord from './modules/summary-record.vue'

const queryParams = ref<Record<string, any>>({
    template: {
        name: '',
        postId: ''
    },
    record: {
        userName: '',
        startTime: '',
        endTime: ''
    }
})
const componentName = computed(() => (activeTab.value == 'template' ? templateSearchForm : recordSearchForm))
const activeTab = ref('template')

const summaryTemplateRef = ref<InstanceType<typeof summaryTemplate>>()
const summaryRecordRef = ref<InstanceType<typeof summaryRecord>>()
const resetPage = () => {
    switch (activeTab.value) {
        case 'template':
            summaryTemplateRef.value?.resetPage()
            break
        case 'record':
            console.log(queryParams.value[activeTab.value])

            summaryRecordRef.value?.resetPage()
            break
    }
}
const resetParams = () => {
    switch (activeTab.value) {
        case 'template':
            summaryTemplateRef.value?.resetParams()
            break
        case 'record':
            summaryRecordRef.value?.resetParams()
            break
    }
}
</script>

<style scoped lang="scss">
.summary {
    :deep(.el-card__body) {
        padding-top: 0;
    }
}
</style>
