// 页脚组件
Vue.component('site-footer', {
    template: `
        <footer class="site-footer">
            <div class="container">
                <!-- 友情链接区域 -->
                <div class="footer-links-area">
                    <!-- 友情链接标题 -->
                    <div class="footer-title">
                        <h3>友情链接</h3>
                    </div>
                    
                    <!-- 三个下拉列表 -->
                    <div class="footer-dropdowns">
                    <!-- 植物名称数据库 -->
                    <div class="dropdown-container">
                        <button class="dropdown-toggle" @click.stop="toggleDropdown('database')" :class="{active: dropdowns.database}">
                            植物名称（名录）数据库
                            <span class="dropdown-arrow">▼</span>
                        </button>
                        <div class="dropdown-menu" v-show="dropdowns.database">
                            <a v-for="link in plantDatabases" 
                               :key="link.name" 
                               :href="link.url" 
                               target="_blank" 
                               class="dropdown-item">
                                {{ link.name }}
                            </a>
                        </div>
                    </div>

                    <!-- 国内外著名植物园 -->
                    <div class="dropdown-container">
                        <button class="dropdown-toggle" @click.stop="toggleDropdown('gardens')" :class="{active: dropdowns.gardens}">
                            国内外著名植物园
                            <span class="dropdown-arrow">▼</span>
                        </button>
                        <div class="dropdown-menu" v-show="dropdowns.gardens">
                            <a v-for="link in botanicGardens" 
                               :key="link.name" 
                               :href="link.url" 
                               target="_blank" 
                               class="dropdown-item">
                                {{ link.name }}
                            </a>
                        </div>
                    </div>

                    <!-- 园林园艺网址 -->
                    <div class="dropdown-container">
                        <button class="dropdown-toggle" @click.stop="toggleDropdown('horticulture')" :class="{active: dropdowns.horticulture}">
                            园林园艺网址
                            <span class="dropdown-arrow">▼</span>
                        </button>
                        <div class="dropdown-menu" v-show="dropdowns.horticulture">
                            <a v-for="link in horticultureSites" 
                               :key="link.name" 
                               :href="link.url" 
                               target="_blank" 
                               class="dropdown-item">
                                {{ link.name }}
                            </a>
                        </div>
                    </div>
                </div>
                </div>
                
                <!-- 版权信息 -->
                <div class="footer-copyright">
                    <p>版权所有 ©中国科学院西双版纳热带植物园</p>
                    <p>滇ICP备13004273号 公网安备53282300000X号</p>
                </div>
            </div>
        </footer>
    `,
    data() {
        return {
            dropdowns: {
                database: false,
                gardens: false,
                horticulture: false
            },
            plantDatabases: [
                { name: '全球生物图片搜索系统（CUBG）', url: 'https://image.cubg.cn/' },
             
                { name: '多识植物百科', url: 'https://duocet.ibiodiversity.net/' },
             
                { name: '植物科学数据中心', url: 'https://www.plantplus.cn/cn' },
             
                { name: '中国自然标本馆（CFH）', url: 'https://www.cfh.ac.cn/' },
             
                { name: '中国植物志（英文版）', url: 'http://www.efloras.org/' },
             
                { name: '中国生物名录（物种2000中国节点，COLChina）', url: 'http://www.sp2000.org.cn/' },
             
                { name: 'Plants of the World Online (POWO)', url: 'https://powo.science.kew.org/' },
             
                { name: 'Tropicos', url: 'https://www.tropicos.org/' },
             
                { name: 'World Flora Online (WFO)', url: 'https://www.worldfloraonline.org/' },
             
                { name: 'Taxonomic Name Resolution Service', url: 'https://tnrs.biendata.org' },
             
                { name: 'THE IUCN RED LIST OF THREATENED SPECIES', url: 'https://www.iucnredlist.org' },
             
                { name: '濒危野生动植物种国际贸易公约附录（CITES）', url: 'https://cites.org/eng' },
             
            ],
            botanicGardens: [
                { name: '国家植物园', url: 'https://chnbg.cn/' },
             
                { name: '华南国家植物园', url: 'https://www.scbg.ac.cn/' },
             
                { name: '上海辰山植物园', url: 'https://www.csnbgsh.cn' },
             
                { name: '南京中山植物园', url: 'https://jib.ac.cn/' },
             
                { name: '昆明植物园', url: 'http://kbg.kib.cas.cn/' },
             
                { name: '武汉植物园', url: 'http://www.whiob.ac.cn/' },
             
                { name: '深圳仙湖植物园', url: 'http://www.szbg.ac.cn/' },
             
                { name: '邱园', url: 'https://www.kew.org/' },
             
                { name: '爱丁堡植物园', url: 'https://www.rbge.org.uk/' },
             
                { name: '新加坡植物园', url: 'https://www.nparks.gov.sg/SBG' },
             
                { name: '密苏里植物园', url: 'https://garden.missouri.edu/' },
             
            ],
            horticultureSites: [
                { name: '园艺学报', url: 'https://www.ahs.ac.cn/' },
             
                { name: '园艺植物杂志', url: 'https://www.keaipublishing.com/en/journals/horticultural-plant-journal' },
             
                { name: '中国园林网', url: 'http://www.c-yl.com/' },
             
                { name: '英国皇家园艺学会（RHS）', url: 'https://www.rhs.org.uk/' },
             
            ]
        }
    },
    methods: {
        toggleDropdown(type) {
            // 获取当前状态
            const currentState = this.dropdowns[type];
            
            // 关闭所有下拉菜单
            this.dropdowns.database = false;
            this.dropdowns.gardens = false;
            this.dropdowns.horticulture = false;
            
            // 如果点击的菜单原来是关闭的，则打开它
            if (!currentState) {
                this.$nextTick(() => {
                    this.dropdowns[type] = true;
                });
            }
        },
        
        closeAllDropdowns() {
            this.dropdowns.database = false;
            this.dropdowns.gardens = false;
            this.dropdowns.horticulture = false;
        }
    },
    mounted() {
        // 点击页面其他地方时关闭所有下拉菜单
        document.addEventListener('click', (e) => {
            if (!e.target.closest('.footer-dropdowns')) {
                this.closeAllDropdowns();
            }
        });
    }
});