<?php
/**
 * 单个成语显示模板
 */

get_header(); ?>


    <div class="pinyin-index-container">
        <!-- 英文字母索引 -->
        <div class="pinyin-section">

<div id="1primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        while (have_posts()) : the_post();
            $pinyin = get_post_meta(get_the_ID(), '_idiom_pinyin', true);
            $abbreviation = get_post_meta(get_the_ID(), '_idiom_abbreviation', true);
            $synonyms = get_post_meta(get_the_ID(), '_idiom_synonyms', true);
            $antonyms = get_post_meta(get_the_ID(), '_idiom_antonyms', true);
            $related_ancient_text_id = get_post_meta(get_the_ID(), '_idiom_related_ancient_text', true);
            $detailed_explanation = get_post_meta(get_the_ID(), '_idiom_detailed_explanation', true);
            $derivation = get_post_meta(get_the_ID(), '_idiom_derivation', true);
            $guoyu_dictionary = get_post_meta(get_the_ID(), '_idiom_guoyu_dictionary', true);
            $dialects = get_post_meta(get_the_ID(), '_idiom_dialects', true);
            $other_meanings = get_post_meta(get_the_ID(), '_idiom_other_meanings', true);
            
            // 检查各个字段是否有内容，用于决定是否显示对应的标签页
            $has_detailed_explanation = !empty($detailed_explanation);
            $has_derivation = !empty($derivation);
            $has_guoyu_dictionary = !empty($guoyu_dictionary);
            $has_dialects = !empty($dialects);
            $has_other_meanings = !empty($other_meanings);
        ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <!-- 删除标题显示 -->
                <!--
                <header class="entry-header">
                    <h1 class="entry-title"><?php the_title(); ?></h1>
                </header>
                -->

                <div class="idiom-basic-info">
                    <div class="idiom-display">
                        <h1><?php the_title(); ?></h1>
                        <?php if ($pinyin): ?>
                            <p class="idiom-pinyin"><?php echo esc_html($pinyin); ?></p>
                        <?php endif; ?>
                    </div>
                    
                    <div class="idiom-details">
                        <?php if ($pinyin): ?>
                            <p><strong>拼音：</strong><?php echo esc_html($pinyin); ?></p>
                        <?php endif; ?>
                        
                        <?php if ($abbreviation): ?>
                            <p><strong>缩写：</strong><?php echo esc_html($abbreviation); ?></p>
                        <?php endif; ?>
                        
                        <?php if ($synonyms): ?>
                            <p><strong>近义词：</strong><?php echo esc_html($synonyms); ?></p>
                        <?php endif; ?>
                        
                        <?php if ($antonyms): ?>
                            <p><strong>反义词：</strong><?php echo esc_html($antonyms); ?></p>
                        <?php endif; ?>
                        
                        <?php 
                        // 显示关联的古籍链接
                        if ($related_ancient_text_id) {
                            $ancient_text = get_post($related_ancient_text_id);
                            if ($ancient_text && $ancient_text->post_status === 'publish') {
                                echo '<p><strong>相关古籍：</strong><a href="' . get_permalink($ancient_text->ID) . '">' . esc_html($ancient_text->post_title) . '</a></p>';
                            }
                        }
                        ?>
                    </div>
                </div>

                <div class="idiom-explanations">
                    <div class="tab-container">
                        <ul class="tab-header">
                            <li class="tab-link active" data-tab="basic-explanation"><a href="#basic-explanation">基本解释</a></li>
                            <?php if ($has_detailed_explanation): ?>
                            <li class="tab-link" data-tab="detailed-explanation"><a href="#detailed-explanation">详细解释</a></li>
                            <?php endif; ?>
                            <?php if ($has_derivation): ?>
                            <li class="tab-link" data-tab="derivation"><a href="#derivation">成语典故</a></li>
                            <?php endif; ?>
                            <?php if ($has_guoyu_dictionary): ?>
                            <li class="tab-link" data-tab="guoyu-dictionary"><a href="#guoyu-dictionary">国语辞典</a></li>
                            <?php endif; ?>
                            <?php if ($has_dialects): ?>
                            <li class="tab-link" data-tab="dialects"><a href="#dialects">音韵方言</a></li>
                            <?php endif; ?>
                            <?php if ($has_other_meanings): ?>
                            <li class="tab-link" data-tab="other-meanings"><a href="#other-meanings">其他释义</a></li>
                            <?php endif; ?>
                        </ul>

                        <div class="tab-content">
                            <div id="basic-explanation" class="tab-section">
                                <h3>基本解释</h3>
                                <div class="entry-content">
                                    <?php the_content(); ?>
                                </div>
                            </div>

                            <?php if ($detailed_explanation): ?>
                            <div id="detailed-explanation" class="tab-section">
                                <h3>详细解释</h3>
                                <div class="entry-content">
                                    <?php echo wp_kses_post($detailed_explanation); ?>
                                </div>
                            </div>
                            <?php endif; ?>
                            
                            <?php if ($derivation): ?>
                            <div id="derivation" class="tab-section">
                                <h3>成语典故</h3>
                                <div class="entry-content">
                                    <?php echo wp_kses_post($derivation); ?>
                                </div>
                            </div>
                            <?php endif; ?>
                            
                            <?php if ($guoyu_dictionary): ?>
                            <div id="guoyu-dictionary" class="tab-section">
                                <h3>国语辞典</h3>
                                <div class="entry-content">
                                    <?php echo wp_kses_post($guoyu_dictionary); ?>
                                </div>
                            </div>
                            <?php endif; ?>
                            
                            <?php if ($dialects): ?>
                            <div id="dialects" class="tab-section">
                                <h3>音韵方言</h3>
                                <div class="entry-content">
                                    <?php echo wp_kses_post($dialects); ?>
                                </div>
                            </div>
                            <?php endif; ?>
                            
                            <?php if ($other_meanings): ?>
                            <div id="other-meanings" class="tab-section">
                                <h3>其他释义</h3>
                                <div class="entry-content">
                                    <?php echo wp_kses_post($other_meanings); ?>
                                </div>
                            </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>

                <footer class="entry-footer">
                    <?php
                    edit_post_link(
                        sprintf(
                            wp_kses(
                                /* translators: %s: Name of current post. Only visible to screen readers */
                                __('编辑 <span class="screen-reader-text">%s</span>', 'textdomain'),
                                array(
                                    'span' => array(
                                        'class' => array(),
                                    ),
                                )
                            ),
                            get_the_title()
                        ),
                        '<span class="edit-link">',
                        '</span>'
                    );
                    ?>
                </footer>
            </article>
        <?php endwhile; ?>
	</main><!-- .site-main -->
	</div><!-- .content-area -->
	<?php //get_sidebar(); ?>
               </div>
                </div>


<style>

.pinyin-index-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.pinyin-section {
    margin-bottom: 40px;
}

.pinyin-section h2 {
    border-bottom: 2px solid #0073aa;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.idiom-basic-info {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
}

.idiom-display {
    flex: 1;
    min-width: 200px;
    text-align: center;
    padding-right: 20px;
    border-right: 1px solid #ddd;
}

.idiom-display h1 {
    font-size: 4em;
    margin: 0;
    color: #333;
}

.idiom-details {
    flex: 2;
    min-width: 300px;
    padding-left: 20px;
}

.idiom-details p {
    margin: 5px 0;
}

.tab-container {
    margin-top: 20px;
}

.tab-header {
    display: flex;
    border-bottom: 1px solid #ddd;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.tab-link {
    margin-bottom: -1px;
}

.tab-link a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: #333;
}

.tab-link.active a,
.tab-link a:hover {
    background-color: #0073aa;
    border-color: #0073aa;
    border-bottom-color: #0073aa;
    color: #fff;
}

.tab22-content {
    padding: 20px 0;
}

.tab-content {
    padding: 20px;
    border: 1px solid #ddd;
    border-top: none;
    background-color: #fff;
}

.tab-section {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.tab-section h3 {
    margin-top: 0;
    color: #333;
    /* 删除了左侧蓝色竖线样式 */
}

@media (max-width: 768px) {
    .idiom-basic-info {
        flex-direction: column;
    }
    
    .idiom-display {
        border-right: none;
        border-bottom: 1px solid #ddd;
        padding-right: 0;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    
    .idiom-details {
        padding-left: 0;
    }
    
    .tab-header {
        flex-direction: column;
    }
    
    .tab-link {
        margin-bottom: 0;
    }
    
    .tab-link a {
        border-radius: 0;
        border: 1px solid #ddd;
        margin-bottom: -1px;
    }
    
    .tab-link.active a,
    .tab-link a:hover {
        border-bottom-color: #ddd;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 标签页切换功能
    const tabLinks = document.querySelectorAll('.tab-link a');
    const tabHeader = document.querySelector('.tab-header');
    
    // 滚动到指定锚点并更新标签状态
    function scrollToSection(targetId) {
        const targetElement = document.getElementById(targetId);
        if (targetElement) {
            // 平滑滚动到目标元素
            targetElement.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
            
            // 更新URL中的hash
            history.replaceState(null, null, '#' + targetId);
            
            // 更新标签页活动状态
            updateActiveTab(targetId);
        }
    }
    
    // 更新活动标签状态
    function updateActiveTab(targetId) {
        // 移除所有活动状态
        document.querySelectorAll('.tab-link').forEach(function(tabLink) {
            tabLink.classList.remove('active');
        });
        
        // 添加活动状态到当前标签
        const activeTab = document.querySelector(`.tab-link[data-tab="${targetId}"]`);
        if (activeTab) {
            activeTab.classList.add('active');
        }
    }
    
    tabLinks.forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 获取目标元素ID
            const targetId = this.getAttribute('href').substring(1);
            
            // 滚动到目标位置并更新URL
            scrollToSection(targetId);
        });
    });
    
    // 处理页面加载时的锚点定位
    const hash = window.location.hash;
    if (hash) {
        const targetId = hash.substring(1);
        // 稍微延迟执行，确保页面完全加载
        setTimeout(() => {
            scrollToSection(targetId);
        }, 100);
    }
    
    // 监听滚动事件，根据当前位置更新活动标签
    let isScrolling = false;
    window.addEventListener('scroll', function() {
        if (!isScrolling) {
            window.requestAnimationFrame(function() {
                updateActiveTabOnScroll();
                isScrolling = false;
            });
            isScrolling = true;
        }
    });
    
    // 根据滚动位置更新活动标签
    function updateActiveTabOnScroll() {
        const sections = document.querySelectorAll('.tab-section');
        const scrollPosition = window.scrollY + 100; // 添加偏移量
        
        for (let i = sections.length - 1; i >= 0; i--) {
            const section = sections[i];
            const sectionTop = section.offsetTop;
            
            if (scrollPosition >= sectionTop) {
                const sectionId = section.getAttribute('id');
                updateActiveTab(sectionId);
                // 更新URL中的hash
                history.replaceState(null, null, '#' + sectionId);
                break;
            }
        }
    }
});
</script>

<?php
get_footer();