<template>
    <div class="mainTextPage main-content12">
        <h3 class="pageTitle">摘要</h3>
        <div class="flex-between flex-common" id="summaryTitle">
            <ClientForm ref="oneLevelRef" title="中文摘要标题" :init-data="initFormData" :titlePosFlag="false"
                :fontDetailflag="false" @cancel="(data) => handleCancelEvent(data, 'oneLevel')"
                @submit="(data) => handleSubmitEvent(data, 'oneLevel')" />
            <ClientForm ref="twoLevelRef" title="英文摘要标题" :titlePosFlag="false" :fontDetailflag="false"
                :init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'twoLevel')"
                @submit="(data) => handleSubmitEvent(data, 'twoLevel')" />
        </div>
        <div class="flex-between flex-common mt12" id="summaryContent">
            <ClientForm ref="threeLevelRef" title="中文摘要标题" :titlePosFlag="false" :fontDetailflag="false"
                :init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'threeLevelRef')"
                @submit="(data) => handleSubmitEvent(data, 'threeLevelRef')" />
            <ClientForm ref="threeLevelRef" title="英文摘要标题" :titlePosFlag="false" :fontDetailflag="false"
                :init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'threeLevelRef')"
                @submit="(data) => handleSubmitEvent(data, 'threeLevelRef')" />
        </div>
        <div class="flex-between flex-common mt12" id="summaryKeyWords">
            <ClientForm ref="mainRef" title="中文关键词" :titlePosFlag="false" :fontDetailflag="false" :ch_keywords="true" :showIndentation="false"
                :init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'mainRef')"
                @submit="(data) => handleSubmitEvent(data, 'mainRef')" />
            <ClientForm ref="mainRef" title="英文关键词" :titlePosFlag="false" :fontDetailflag="false" :eng_keywords="true" :showIndentation="false"
                :init-data="initFormData" @cancel="(data) => handleCancelEvent(data, 'mainRef')"
                @submit="(data) => handleSubmitEvent(data, 'mainRef')" />
        </div>
    </div>
</template>
<script>
import ClientForm from '@/components/clientSet/clientForm.vue';
export default {
    components: {
        ClientForm,
    },
    data() {
        return {
            initFormData: {
                fontSize: '12',
                align: 1,
                indentation: '0'
            },
        };
    },
    methods: {
        // 外部重置方法
        handleCancelEvent(formData, refName) {
            console.log('外部重置方法:', formData);
            // 根据 refName 执行不同的重置逻辑
            switch (refName) {
                case 'oneLevel':
                    console.log('执行一级标题重置逻辑');
                    // 这里可以调用对应的 ref 方法
                    this.$refs[refName + 'Ref']?.someMethod();
                    break;
                case 'twoLevel':
                    console.log('执行二级标题重置逻辑');
                    break;
                case 'threeLevel':
                    console.log('执行三级标题重置逻辑');
                    break;
                case 'main':
                    console.log('执行正文内容重置逻辑');
                    break;
                case 'table':
                    console.log('执行表格标题重置逻辑');
                    break;
                case 'images':
                    console.log('执行图片标题重置逻辑');
                    break;
                default:
                    console.log('默认重置逻辑');
            }
        },

        // 外部提交方法
        handleSubmitEvent(formData, refName) {
            console.log('外部提交方法:', formData);
            // 根据 refName 调用不同的 API
            switch (refName) {
                case 'oneLevel':
                    this.submitOneLevel(formData);
                    break;
                case 'twoLevel':
                    this.submitTwoLevel(formData);
                    break;
            }
        },
        submitOneLevel(data) {
            // API待定定接口路径和参数
            console.log('提交一级标题数据:', data);
            this.$http('POST', '/api', this.formData, {
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },

        submitTwoLevel(data) {
            // 调用二级标题的 API
            console.log('提交二级标题数据:', data);
        }
    },
};
</script>
<style>
.flex-common {
    align-items: flex-start;
    padding: 24px 32px;
}
</style>