<template>
    <div class="email flex">
        <div class="left">
            <div class="email-btn flex-column">
                <el-button
                    link
                    v-for="item in emailBtn"
                    :class="{ active: item.value == activeMail }"
                    @click="changeEmail(item)"
                >
                    {{ item.label }}
                </el-button>
            </div>
        </div>
        <div class="right flex">
            <div class="content flex">
                <div class="table-div">
                    <component
                        :ref="($event: any) => setItemRef($event)"
                        :is="activeComponents"
                    ></component>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import emailSettings from './components/settings/emailSettings.vue';
    import emailTemplate from './components/settings/emailTemplate.vue';
    import blacklist from './components/settings/blacklist.vue';
    import commonPhrases from './components/settings/commonPhrases.vue';
    import folderSettings from './components/settings/folderSettings.vue';
    import folderRuleSettings from './components/settings/folderRuleSettings.vue';
    import automaticReply from './components/settings/automaticReply.vue';

    const emailBtn = ref([
        { label: '邮箱设置', value: 'settings', components: emailSettings },
        { label: '邮件模板', value: 'template', components: emailTemplate },
        { label: '黑名单', value: 'blacklist', components: blacklist  },
        // { label: '左侧显示项', value: 'STARRED', components: emailSettings  },
        // { label: '客户搜索设置', value: 'searchSetting', components: searchSetting  },
        { label: '常用语', value: 'commonPhrases', components: commonPhrases  },
        { label: '自动回复设置', value: 'automaticReply', components: automaticReply },
        { label: '文件夹管理', value: 'folderSettings', components: folderSettings  },
        { label: '自定义文件夹归档设置', value: 'folderRuleSettings', components: folderRuleSettings  },
        // { label: '有档待处理显示项', value: 'documentedShow', components: documentedShow }
    ])

    const activeMail = ref('settings')
    const activeComponents = shallowRef(emailSettings)
    const changeEmail = (item) => {
        activeMail.value = item.value
        activeComponents.value = item.components
    }

    const componentsRef = ref()
    const setItemRef = (el: any) => {
        if (el) {
            componentsRef.value = el
        }
    }
</script>

<style lang="scss" scoped>
    .email .left{
        width: 185px;
        padding-top: 15px;
        .email-btn .el-button{
            padding-left: 12px;
        }
    }
</style>