<template>
    <footer
        class="layout-footer text-center bg-[#222222] py-[30px] md:py-[30px] sm:py-[15px]"
    >
        <!-- 链接区域：添加类名方便适配，分隔符单独包裹 -->
        <div class="text-[#bebebe] footer-links">
            <NuxtLink
                class="footer-link"
                :to="`/policy/${PolicyAgreementEnum.SERVICE}`"
            >
                用户协议
            </NuxtLink>
            <span class="footer-divider">｜</span>
            <NuxtLink
                class="footer-link"
                :to="`/policy/${PolicyAgreementEnum.PRIVACY}`"
            >
                隐私政策
            </NuxtLink>
            <span class="footer-divider">｜</span>
            <NuxtLink class="footer-link" to="/user/info"> 会员中心 </NuxtLink>
        </div>
        <!-- 版权信息：调整间距类名 -->
        <div class="mt-4 sm:mt-2 text-tx-secondary copyright">
            <a
                class="mx-1 sm:mx-2 sm:mb-2 hover:underline"
                :href="item.value"
                target="_blank"
                v-for="item in appStore.getCopyrightConfig"
                :key="item.key"
            >
                {{ item.key }}
            </a>
        </div>
    </footer>
</template>

<script lang="ts" setup>
import { useAppStore } from '@/stores/app'
import { PolicyAgreementEnum } from '@/enums/appEnums'
const appStore = useAppStore()
</script>

<style lang="scss" scoped>
.layout-footer {
    .footer-links {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        line-height: 1.5;
        .footer-link {
            padding: 4px 8px;
            border-radius: 4px;
            transition: background-color 0.2s;
            &:hover {
                background-color: rgba(255, 255, 255, 0.08);
            }
        }
    }
    .copyright {
        font-size: 13px;
        line-height: 1.6;
    }
    @media (max-width: 767px) {
        .footer-links {
            font-size: 12px; // 缩小字体
            flex-wrap: wrap; // 允许链接换行，避免拥挤
            gap: 6px 10px; // 换行后上下间距6px，左右间距10px
            .footer-divider {
                display: none;
            }
            .footer-link {
                padding: 6px 12px;
            }
        }
        .copyright {
            font-size: 11px; // 缩小版权字体
            a {
                display: inline-block; // 让 margin-bottom 生效
                margin-bottom: 6px; // 换行后增加垂直间距
            }
        }
    }
}
</style>
