<template>
    <div class="site-footer" :class="[!notBg ? 'notbg-site-footer' : '' ]">
        <div class="footer-partners">
            <!-- 品牌大使 -->
            <div class="partner-group ambassador-group">
                <h4 class="footer-title">{{ t('品牌大使') }}</h4>
                <div class="ambassador-content">
                    <div class="ambassador-item">
                        <div class="ambassador-info">
                            <span class="name">{{ t('塞巴斯蒂安·维特尔') }}</span>
                            <img src="@/assets/image/qianm.png" alt="Signature" class="signature">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 官方合作伙伴 -->
            <div class="partner-group">
                <h4 class="footer-title">{{ t('官方合作伙伴') }}</h4>
                <div class="partner-logos">
                    <ul class="nav-links">
                        <li>
                            <img src="@/assets/image/footer/h2.png" class="partner-logo" alt="Mclaren">
                            <span>{{ t('迈凯伦') }}</span>
                        </li>
                        <!-- <li>
                            <img src="@/assets/image/footer/h1.png" class="partner-logo" alt="Teddy Sheringham">
                            <span>{{ t('塞巴斯蒂安·维特尔') }}</span>
                        </li> -->
                    </ul>
                </div>
            </div>

            <!-- 帮助中心 -->
            <div class="partner-group">
                <h4 class="footer-title">{{ t('帮助') }}</h4>
                <ul class="nav-links">
                    <li @click="goService">7x24{{ t('客服') }}</li>
                    <li @click="openGameRules">{{ t('玩法规则') }}</li>
                    <li @click="openRulesAndTerms">{{ t('规则条款') }}</li>
                    <li @click="openAbout">{{ t('关于我们') }}</li>
                </ul>
            </div>

            <!-- 快速链接 -->
            <!-- <div class="partner-group">
                <h4 class="footer-title">{{ t('快速链接') }}</h4>
                <ul class="nav-links">
                    <li>{{ t('体育赛事') }}</li>
                    <li>{{ t('滚球投注') }}</li>
                    <li>{{ t('彩票娱乐') }}</li>
                </ul>
            </div> -->

            <!-- 社交平台 -->
            <div class="partner-group">
                <h4 class="footer-title">{{ t('社交平台') }}</h4>
                <ul class="nav-links social-links">
                    <li class="nav-links-pt">
                        <img src="@/assets/image/footer/pt/Subtract-1.png" alt="Social">
                        <img src="@/assets/image/footer/pt/Social Icons.png" alt="Social">
                    </li>
                    <li class="nav-links-pt">
                        <img src="@/assets/image/footer/pt/Subtract-2.png" alt="Social">
                        <img src="@/assets/image/footer/pt/Subtract.png" alt="Social">
                    </li>
                </ul>
            </div>

            <!-- 下载APP -->
            <div class="partner-group app-group">
                <h4 class="footer-title">{{ t('下载APP') }}</h4>
                <div class="app-qr-box">
                    <div class="app-buttons">
                        <div style="display: flex;">
                            <img src="@/assets/image/footer/ios.png" alt="Social" style="width: 30px;height: 30px;cursor: pointer;">
                            <img src="@/assets/image/footer/android.png" alt="Social" style="width: 30px;height: 30px;margin-left: 15px;cursor: pointer;" @click="openDownload">
                        </div>
                        <!-- <div class="app-btn">
                            <el-icon><Monitor /></el-icon> iOS
                        </div>
                        <div class="app-btn">
                            <el-icon><Cellphone /></el-icon> Android
                        </div> -->
                    </div>
                </div>
            </div>
        </div>

        <el-divider border-style="dashed" />

        <!-- 关于我们 -->
        <h4 class="footer-title">{{ t('关于我们') }}</h4>
        <img src="@/assets/image/logo.png" alt="Logo" class="footer-logo">

        <div class="footer-about">
            <p>{{ t('F1bet 是亚洲值得信赖的在线赌博网站，自从正式投入服务至今最完整和最新的在线赌博游戏。 F1bet有一个简单的使命和愿景是提供诚实和信任的服务。在近期与Mclaren、塞巴斯蒂安·维特尔 达成赞助伙伴协议，进一步加深了“F1bet”的国际知名度，让平台的名声遍布全球。') }}</p>
            <p>{{ t('为了提升用户体验，使用本网站后，我们可能使用Cookies技术从服务器中收集客户信息。如果您在F1bet注册或者继续使用网站，则您将被视为同意我们使用Cookies。') }}</p>
            <p>{{ t('如果删除我们的Cookies或禁用我们之后的Cookies，将导致您无法使用平台的某些区域或特色功能。') }}</p>
        </div>

        <!-- 合规与版权 -->
        <div class="footer-compliance">
            <div class="compliance-logos">
                <img src="@/assets/image/footer/a.png" alt="Compliance">
                <img src="@/assets/image/footer/b.png" alt="Compliance">
                <img src="@/assets/image/footer/c.png" alt="Compliance">
                <img src="@/assets/image/footer/d.png" alt="Compliance">
            </div>
            <div class="copyright-text">
                <p>{{ t('© 2015 - 2026 版权所有并受法律保护。') }}</p>
                <p class="disclaimer">{{ t('本平台仅向18岁以上成人提供娱乐服务，请理性投注，谨防沉迷。') }}</p>
            </div>
        </div>
    </div>

    <el-dialog v-model="GameRulesShow" width="80%" center :title="t('玩法规则')">
        <div style="height: 70vh;overflow-y: auto;">
            <div v-html="GameRulesHTML"></div>
        </div>
    </el-dialog>

     <el-dialog v-model="RulesAndTermsShow" width="80%" center :title="t('规则条款')">
        <div style="height: 70vh;overflow-y: auto;">
            <div v-html="RulesAndTermsHTML"></div>
        </div>
    </el-dialog>

     <el-dialog v-model="AboutShow" width="80%" center :title="t('关于我们')">
        <div style="height: 70vh;overflow-y: auto;">
            <div v-html="AboutHTML"></div>
        </div>
    </el-dialog>
</template>

<script setup>
import { useI18n } from "vue-i18n"
import { Cellphone, Monitor } from '@element-plus/icons-vue'
import { GameRulesHTML, RulesAndTermsHTML, AboutHTML } from './dataConfig'
import { ElMessage } from "element-plus"
import {userGuestRegister} from "@/request/api.js";

defineProps(['notBg'])

const router = useRouter()
const { t } = useI18n()

const GameRulesShow = ref(false)
const RulesAndTermsShow = ref(false)
const AboutShow = ref(false)

function openGameRules() {
    GameRulesShow.value =true
}
function openRulesAndTerms() {
    RulesAndTermsShow.value =true
}
function openAbout() {
    AboutShow.value =true
}

function goService() {
    if(localStorage.getItem('token')) {
        router.push({ name: 'CustomerService' })
    } else {
      if(!localStorage.getItem('youke_token')){
        userGuestRegister().then((res) => {
          localStorage.setItem('youke_token', res.data.token);
          router.push({
            name: 'CustomerService',
            query: { GuestMode: 1 }
          });
        })
      } else {
        router.push({
          name: 'CustomerService',
          query: { GuestMode: 1 }
        });
      }
    }
}


const openDownload = () => {
  const url = 'https://land.f1bet888.com/';
  window.open(window.global.landingPageURL || url, '_blank');
};
</script>

<style scoped lang="scss">
// 仅保留有用到的变量
$border-color: rgba(255, 255, 255, 0.08);
$text-primary: #e5e5e5;
$text-secondary: #999;
$main-color: #f8b932;

.notbg-site-footer{
    background: url('@/assets/image/layout/footer-bg.png') no-repeat;
}
.site-footer {
    color: $text-secondary;
    padding: 20px 15px;
    background-size: cover;
    padding-top: 100px;
    box-sizing: border-box;

    .footer-title {
        color: $text-primary;
        font-size: 16px;
        margin-bottom: 20px;
        font-weight: bold;
    }

    /* 顶部合作伙伴与链接区 */
    .footer-partners {
        display: flex;
        flex-wrap: wrap; // 允许折行以实现响应式
        justify-content: space-between;
        gap: 30px;
        margin-bottom: 20px;

        .partner-group {
            flex: 1;
            min-width: 140px; // 防止无限缩小

            &.ambassador-group {
                max-width: 300px;
                min-width: 220px;
            }

            &.app-group {
                min-width: 160px;
            }
        }
    }

    /* 品牌大使 */
    .ambassador-item {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 10px 0;
        border-radius: 8px;

        .ambassador-info {
            display: flex;
            flex-direction: column;
            gap: 5px;

            .name {
                color: $text-primary;
                font-weight: bold;
                font-size: 15px;
            }

            .signature {
                opacity: 0.7;
                filter: invert(1);
                max-width: 120px;
            }
        }
    }

    /* 列表链接与图标 */
    .nav-links {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
            font-size: 13px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: color 0.3s;
            display: flex;
            align-items: center;
            gap: 10px;

            &:last-child {
                margin-bottom: 0;
            }

            &:hover {
                color: $main-color;
            }

            .partner-logo {
                width: 24px;
                height: 24px;
                opacity: 0.6;
                transition: opacity 0.3s;

                &:hover {
                    opacity: 1;
                }
            }
        }
    }

    .social-links .nav-links-pt {
        gap: 15px;

        img {
            width: 30px;
            border-radius: 50%;
            transition: box-shadow 0.3s;

            &:hover {
                box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.4);
            }
        }
    }

    /* APP下载区 */
    .app-qr-box {
        display: flex;
        gap: 15px;
        align-items: center;

        .app-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;

            .app-btn {
                background: #333;
                color: #fff;
                padding: 8px 15px;
                border-radius: 4px;
                font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
                cursor: pointer;
                border: 1px solid transparent;
                transition: all 0.3s;

                &:hover {
                    border-color: $main-color;
                    color: $main-color;
                }
            }
        }
    }

    /* 关于我们区块 */
    .footer-logo {
        width: 100px;
        aspect-ratio: 104 / 16;
        margin-bottom: 15px;
    }

    .footer-about {
        margin-bottom: 30px;
        font-size: 13px;
        line-height: 1.6;

        p {
            margin-bottom: 12px;
            &:last-child { margin-bottom: 0; }
        }
    }

    /* 合规与底部版权区 */
    .footer-compliance {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
        border-top: 1px solid $border-color;
        padding-top: 30px;

        .compliance-logos {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 25px;
            align-items: center;

            img {
                width: 60px;
                object-fit: contain;
            }
        }

        .copyright-text {
            font-size: 12px;
            line-height: 1.8;

            .disclaimer {
                opacity: 0.6;
            }
        }
    }

    /* ================= 响应式媒体查询 ================= */

    /* 平板端适配 */
    @media (max-width: 1024px) {
        .footer-partners {
            gap: 20px;
            .partner-group {
                min-width: calc(33.33% - 20px); /* 3列布局 */
            }
        }
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
        .site-footer {
            padding: 15px 10px;
        }

        .footer-partners {
            flex-direction: column;
            gap: 25px;

            .partner-group {
                width: 100%;
                max-width: 100% !important;

                .footer-title {
                    margin-bottom: 12px;
                }
            }
        }

        .app-qr-box .app-buttons {
            flex-direction: row; /* 手机端App按钮横排 */

            .app-btn {
                flex: 1;
            }
        }

        .compliance-logos {
            gap: 15px;
            img { width: 50px; }
        }
    }
}

</style>
