<template>
    <footer class="app-footer">
        <div class="footer-content">
            <div class="footer-top">
                <div class="footer-logo">
                    <el-icon class="logo-icon" :size="20"><Reading /></el-icon>
                    <span>瀚海中文网</span>
                </div>
                <!-- <div class="footer-links">
                    <router-link to="/about">关于我们</router-link>
                    <router-link to="/contact">联系我们</router-link>
                    <router-link to="/privacy">隐私政策</router-link>
                    <router-link to="/terms">使用条款</router-link>
                    <router-link to="/help">帮助中心</router-link>
                </div> -->
            </div>
            <div class="footer-bottom">
                <div class="copyright">
                    © {{ currentYear }} 瀚海中文网 版权所有
                </div>
                <div class="icp">
                    <a href="https://beian.miit.gov.cn/" target="_blank">ICP备案号: 浙ICP备xxxxxxxx号</a>
                </div>
            </div>
        </div>
    </footer>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import { Reading } from '@element-plus/icons-vue';

export default {
    name: 'AppFooter',
    components: {
        Reading
    },
    setup() {
        const currentYear = computed(() => new Date().getFullYear());

        return {
            currentYear
        };
    }
};
</script>

<style lang="scss" scoped>
@use '@/assets/styles/variables.scss' as vars;

.app-footer {
    padding: 1.875rem 0;
    background-color: #0A2463;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;

    .footer-content {
        max-width: 75rem;
        margin: 0 auto;
        padding: 0 1.25rem;
    }
    
    .footer-top {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        
        .footer-logo {
            display: flex;
            align-items: center;
            font-size: 1.125rem;
            font-weight: bold;
            
            .logo-icon {
                margin-right: 0.5rem;
            }
        }
    }

    .footer-links {
        display: flex;
        flex-wrap: wrap;

        a {
            margin: 0 0.9375rem;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.875rem;

            &:hover {
                color: #fff;
            }
        }
    }
    
    .footer-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.25rem;
    }

    .copyright {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.6);
    }
    
    .icp {
        font-size: 0.75rem;
        
        a {
            color: rgba(255, 255, 255, 0.6);
            
            &:hover {
                color: #fff;
            }
        }
    }
}

@media (max-width: vars.$md) {
    .app-footer {
        .footer-top, .footer-bottom {
            flex-direction: column;
            text-align: center;
            
            .footer-logo, .footer-links {
                margin-bottom: 0.9375rem;
                justify-content: center;
            }
        }
        
        .footer-bottom {
            .copyright, .icp {
                margin-bottom: 0.3125rem;
            }
        }
    }
}
</style>