<script setup lang="ts">
// P 无损跟单机制概述 —— 对应 lanhu 设计稿 14 (无损跟单.PSD)
import { ref, onMounted, useTemplateRef } from 'vue'
import { get } from '@/utils/request'
import principle1 from '@/assets/copy/principle-1.png'
import principle2 from '@/assets/copy/principle-2.png'
import principle3 from '@/assets/copy/principle-3.png'
import principle4 from '@/assets/copy/principle-4.png'
import trigger1   from '@/assets/copy/trigger-1.png'
import trigger2   from '@/assets/copy/trigger-2.png'
import trigger3   from '@/assets/copy/trigger-3.png'
import trigger4   from '@/assets/copy/trigger-4.png'
import num1       from '@/assets/copy/num-1.png'
import num2       from '@/assets/copy/num-2.png'
import num3       from '@/assets/copy/num-3.png'
import num4       from '@/assets/copy/num-4.png'
import warningImg from '@/assets/copy/warning.png'
import guaranteeOrb from '@/assets/copy/guarantee-sphere.png'
import summary3d  from '@/assets/copy/summary-logo.png'

/* ── Hero 顶级交易员榜单 —— follow/customer/top-trader-list ── */
interface TopTrader {
  id: string
  nickname: string
  avatar: string
  followCustomer: number  // 累计跟单人数
  tradingDays: number     // 累计交易天数
  profitAmount: number    // 累计收益(USDT)
}
interface TopTraderRaw {
  id?: string | number
  userId?: string | number
  nickname?: string
  avatar?: string
  followCustomer?: number | string
  tradingDays?: number | string
  registerDays?: number | string
  profitAmount?: number | string | null
}
interface TopTraderResp {
  records?: TopTraderRaw[]
}

const topTraders = ref<TopTrader[]>([])
const tradersLoading = ref(false)

async function fetchTopTraders() {
  tradersLoading.value = true
  try {
    const res = await get<TopTraderResp>('/follow/customer/top-trader-list', { isTop: 1 })
    const records = res?.records ?? []
    topTraders.value = records.map((r): TopTrader => ({
      id: String(r.id ?? r.userId ?? ''),
      nickname: r.nickname ?? '--',
      avatar: r.avatar ?? '',
      followCustomer: Number(r.followCustomer) || 0,
      tradingDays: Number(r.tradingDays ?? r.registerDays) || 0,
      profitAmount: r.profitAmount != null ? Number(r.profitAmount) || 0 : 0,
    }))
  } catch {
    topTraders.value = []
  } finally {
    tradersLoading.value = false
  }
}

onMounted(fetchTopTraders)

function formatProfit(n: number): string {
  if (!Number.isFinite(n) || n === 0) return '+0.00'
  const sign = n > 0 ? '+' : ''
  // 千分位分隔 + 2 位小数
  return sign + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}

/* ── 横向滚动：左右箭头（>3 条时显示） ── */
const scrollerRef = useTemplateRef<HTMLDivElement>('scroller')
function scrollBy(delta: number) {
  const el = scrollerRef.value
  if (el) el.scrollBy({ left: delta, behavior: 'smooth' })
}

/* ── 机制设计原则 ── */
const principles = [
  {
    icon: principle1,
    title: '条件化保障原则',
    desc: '风险保障仅在满足既定规则与触发条件的情况下启动，平台将保留最终判定权与解释权。',
  },
  {
    icon: principle2,
    title: '有限责任原则',
    desc: '平台对单一用户、单一策略或单一期间的保障金额、用户次数等均设有最大额度上限。',
  },
  {
    icon: principle3,
    title: '风控优先原则',
    desc: '在极端行情或系统性风险发生时，平台将优先保障整体系统稳定性与交易公平性。',
  },
  {
    icon: principle4,
    title: '不构成收益承诺',
    desc: '任何历史表现、策略数据或保障机制说明，均不应被理解为未来收益的保证。',
  },
]

/* ── 风险保障触发逻辑 ── */
const triggers = [
  { image: trigger1, title: '用户完全按策略信号正常跟单', note: '且产生非因广告导致的交易风险' },
  { image: trigger2, title: '用户未主动调整原单参数或提前终止策略', note: '' },
  { image: trigger3, title: '因突发市场行情、系统性风险或不可抗力事件导致的损失', note: '' },
  { image: trigger4, title: '未因违规或公告中明确排除的其他情形', note: '' },
]

/* ── 不适用及免责情形 ── */
const exemptions = [
  { num: num1, text: '用户主动调整原单参数或提前终止策略' },
  { num: num2, text: '用户主动调整原单参数或提前终止策略' },
  { num: num3, text: '因极端市场行情、系统性风险或不可抗力事件导致的损失' },
  { num: num4, text: '平台已在公告中明确排除的其他情形' },
]
</script>

<template>
  <main class="page-main lossless-page">
    <!-- ── Hero ────────────────────────────────────────── -->
    <section class="ls-hero">
      <div class="hero-glow" aria-hidden="true" />
      <div class="page-container hero-inner">
        <h1 class="hero-title">无损跟单机制概述</h1>
        <p class="hero-desc">
          针对平台官方指定合约的原单策略推出的一项风险缓释与保障机制。该机制旨在降低用户参与合约跟单交易时的下行风险、
          在严格合规与规则的基础上，为用户提供更加稳健、可预期的交易体验。
        </p>

        <div class="trader-wrap">
          <button
            v-if="topTraders.length > 3"
            class="scroll-btn scroll-btn--left"
            aria-label="向左滚动"
            @click="scrollBy(-320)"
          >‹</button>
          <div
            ref="scroller"
            class="trader-grid"
            :class="{ 'is-scrollable': topTraders.length > 3 }"
          >
            <p v-if="tradersLoading && topTraders.length === 0" class="trader-empty">加载中…</p>
            <p v-else-if="!tradersLoading && topTraders.length === 0" class="trader-empty">暂无顶级交易员数据</p>

            <article
              v-for="t in topTraders"
              :key="t.id"
              class="trader-card"
            >
              <div class="trader-top">
                <div class="trader-avatar">
                  <img
                    v-if="t.avatar"
                    :src="t.avatar"
                    :alt="t.nickname"
                    referrerpolicy="no-referrer"
                    @error="(e: any) => e.target && (e.target.style.display = 'none')"
                  />
                  <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                    <circle cx="12" cy="8" r="4"/>
                    <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
                  </svg>
                </div>
                <p class="trader-name">{{ t.nickname }}</p>
              </div>
              <p class="trader-label">交易数据从未带过你</p>
              <div class="trader-stats">
                <div class="stat">
                  <span class="stat-label">累计跟单人数</span>
                  <span class="stat-value">{{ t.followCustomer.toLocaleString() }}</span>
                </div>
                <div class="stat">
                  <span class="stat-label">累计交易天数</span>
                  <span class="stat-value">{{ t.tradingDays }}</span>
                </div>
              </div>
              <div class="trader-profit">
                <p class="profit-label">收益(USDT)</p>
                <p class="profit-value" :class="{ 'is-down': t.profitAmount < 0 }">{{ formatProfit(t.profitAmount) }}</p>
              </div>
            </article>
          </div>
          <button
            v-if="topTraders.length > 3"
            class="scroll-btn scroll-btn--right"
            aria-label="向右滚动"
            @click="scrollBy(320)"
          >›</button>
        </div>
      </div>
    </section>

    <!-- ── 适用对象与范围 ──────────────────────────────── -->
    <section class="ls-section">
      <div class="page-container content">
        <h2 class="section-title">适用对象与范围</h2>
        <p class="section-desc">
          无损跟单机制仅适用于下述策略，第三方或非官方策略不在本机制适用范围内。
        </p>
        <div class="scope-layout">
          <div class="scope-text">
            <div class="scope-block">
              <h3 class="scope-title">适用策略范围</h3>
              <ul class="scope-list">
                <li>平台官方发布或运营的合约原单策略</li>
                <li>明确标注为"支持风险保障机制"的策略产品</li>
              </ul>
            </div>
            <div class="scope-block">
              <h3 class="scope-title">适用用户范围</h3>
              <ul class="scope-list">
                <li>已完成平台注册与必要身份验证的用户</li>
                <li>按平台规则发起并符合官方合约跟单的账户</li>
              </ul>
            </div>
          </div>
          <div class="scope-visual" aria-hidden="true">
            <div class="scope-orb scope-orb--1" />
            <div class="scope-orb scope-orb--2" />
          </div>
        </div>
      </div>
    </section>

    <!-- ── 机制设计原则 ────────────────────────────────── -->
    <section class="ls-section ls-section--alt">
      <div class="page-container content">
        <h2 class="section-title section-title--center">机制设计原则</h2>
        <div class="principle-grid">
          <article v-for="p in principles" :key="p.title" class="principle-card">
            <img :src="p.icon" :alt="p.title" class="principle-icon" />
            <h3 class="principle-title">{{ p.title }}</h3>
            <p class="principle-desc">{{ p.desc }}</p>
          </article>
        </div>
      </div>
    </section>

    <!-- ── 风险保障触发逻辑 ────────────────────────────── -->
    <section class="ls-section">
      <div class="page-container content">
        <h2 class="section-title section-title--center">风险保障触发逻辑</h2>
        <p class="section-desc section-desc--center">
          在符合以下前提条件时，无损跟单机制可能被触发。具体触发标准以平台当期规则或说明为准。
        </p>
        <div class="trigger-grid">
          <article v-for="t in triggers" :key="t.title" class="trigger-card">
            <div class="trigger-image">
              <img :src="t.image" :alt="t.title" />
            </div>
            <p class="trigger-title">{{ t.title }}</p>
            <p v-if="t.note" class="trigger-note">{{ t.note }}</p>
          </article>
        </div>
      </div>
    </section>

    <!-- ── 保障方式说明 ────────────────────────────────── -->
    <section class="ls-section ls-section--alt">
      <div class="page-container content">
        <div class="guarantee-layout">
          <div class="guarantee-text">
            <h2 class="section-title">保障方式说明</h2>
            <p class="section-desc">
              平台可能通过以下一种或多种方式进行处理，所有保障方式均属于平台运营层面的安排，不构成金融意义上的保障付。
            </p>
            <ul class="guarantee-list">
              <li>风险补偿金返还</li>
              <li>后续策略使用权益补偿</li>
              <li>其他平台规则允许的保障安排</li>
            </ul>
          </div>
          <div class="guarantee-visual">
            <img :src="guaranteeOrb" alt="保障方式" />
          </div>
        </div>
      </div>
    </section>

    <!-- ── 不适用及免责情形 ────────────────────────────── -->
    <section class="ls-section">
      <div class="page-container content">
        <h2 class="section-title section-title--center">不适用及免责情形</h2>
        <p class="section-desc section-desc--center">
          无损跟单机制将不适用或部分不适用：
        </p>
        <div class="exempt-grid">
          <article v-for="e in exemptions" :key="e.text + Math.random()" class="exempt-card">
            <img :src="e.num" alt="" class="exempt-num" />
            <p class="exempt-text">{{ e.text }}</p>
          </article>
        </div>
      </div>
    </section>

    <!-- ── 风险提示 ────────────────────────────────────── -->
    <section class="ls-section ls-section--alt">
      <div class="page-container content">
        <div class="warning-layout">
          <div class="warning-icon">
            <img :src="warningImg" alt="风险提示" />
          </div>
          <div class="warning-text">
            <h2 class="section-title">风险提示</h2>
            <p class="warning-p">
              数字资产合约交易具有较高风险，价格波动可能在短时间内导致较大损失。
            </p>
            <p class="warning-p">
              无损跟单机制是一项风险缓释与保障安排，并不意味着交易不存在风险，也不代表用户在任何情况下均不会产生亏损。
            </p>
            <p class="warning-p">
              用户在参与前，应充分理解合约交易机制、跟单规则及相关风险，并根据自身风险承受能力谨慎参与。
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- ── 总结性专业表述 ──────────────────────────────── -->
    <section class="ls-section ls-summary">
      <div class="page-container content">
        <div class="summary-layout">
          <div class="summary-text">
            <h2 class="section-title">总结性专业表述</h2>
            <p class="section-desc">
              CV 始终坚持以风险控制与长期稳健建设为核心原则。无损跟单机制作为一项补充性的风险缓释安排，
              旨在复杂市场环境中为用户提供更可控的交易参与方式。
            </p>
            <p class="section-desc">
              CV 平台有权根据市场情况、监管要求及风险防控需要，对相关规则及保障安排进行调整或终止。
              所有规则变更将在平台公告栏同步，请用户关注并理解。
            </p>
          </div>
          <div class="summary-visual">
            <img :src="summary3d" alt="CV" />
          </div>
        </div>
      </div>
    </section>
  </main>
</template>

<style scoped>
/* ── 页面整体 ── */
.lossless-page {
  background: var(--color-bg-primary);
}
.content { max-width: 1200px; }
.section-title {
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}
.section-title--center { text-align: center; }
.section-desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.85;
  margin-bottom: var(--space-8);
}
.section-desc--center { text-align: center; max-width: 840px; margin-left: auto; margin-right: auto; }

.ls-section {
  padding: var(--space-16) 0;
}
.ls-section--alt {
  background: var(--color-bg-secondary);
}

/* ── Hero ── */
.ls-hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: 900px;
  height: 500px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(240,185,11,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; }
.hero-title {
  font-size: 44px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: var(--space-5);
}
.hero-desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.85;
  max-width: 820px;
  margin: 0 auto var(--space-12);
}

/* ── Trader 卡片 ── */
.trader-wrap {
  position: relative;
}
.trader-grid {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-6);
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  backdrop-filter: blur(6px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.trader-grid::-webkit-scrollbar { display: none; }
.trader-empty {
  flex: 1;
  text-align: center;
  padding: var(--space-8) 0;
  color: var(--color-text-muted);
  font-size: var(--text-small);
}
.trader-card {
  flex: 0 0 calc((100% - var(--space-6) * 2) / 3);
  min-width: 260px;
  scroll-snap-align: start;
  position: relative;
  padding: var(--space-5);
  background: #101010;
  border: 1px solid rgba(240, 185, 11, 0.25);
  border-radius: 16px;
  transition: border-color 0.2s, transform 0.2s;
}

/* 左右滚动箭头（>3 条时显示） */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.9);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.scroll-btn:hover { background: rgba(240, 185, 11, 0.15); }
.scroll-btn--left  { left: -20px; }
.scroll-btn--right { right: -20px; }
.trader-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.trader-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.trader-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(240, 185, 11, 0.12);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.trader-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profit-value.is-down { color: #ff4d4f; }
.trader-name {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}
.trader-label {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.trader-stats {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.stat {
  flex: 1;
}
.stat-label {
  display: block;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.stat-value {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.trader-profit {
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.profit-label {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.profit-value {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: #00d084;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

/* ── 适用对象与范围 ── */
.scope-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-10);
  align-items: center;
}
.scope-text { display: flex; flex-direction: column; gap: var(--space-6); }
.scope-block {}
.scope-title {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-primary);
}
.scope-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.scope-list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.75;
}
.scope-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}
.scope-visual {
  position: relative;
  aspect-ratio: 1 / 1;
}
.scope-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 170, 40, 0.55), rgba(120, 60, 0, 0.2) 55%, transparent 75%);
  box-shadow: 0 0 60px rgba(240, 185, 11, 0.35);
}
.scope-orb--1 { width: 60%; height: 40%; top: 10%; right: 8%; }
.scope-orb--2 { width: 48%; height: 48%; bottom: 6%; left: 12%; }

/* ── 机制设计原则 ── */
.principle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.principle-card {
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s;
}
.principle-card:hover { border-color: var(--color-primary); }
.principle-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: var(--space-4);
}
.principle-title {
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.principle-desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.8;
}

/* ── 风险保障触发逻辑 ── */
.trigger-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}
.trigger-card {
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid rgba(240, 185, 11, 0.3);
  border-radius: var(--radius-lg);
}
.trigger-image {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
  background: #000;
}
.trigger-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.trigger-title {
  font-size: var(--text-small);
  color: var(--color-text-primary);
  line-height: 1.7;
  font-weight: var(--fw-medium);
}
.trigger-note {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ── 保障方式说明 ── */
.guarantee-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 280px;
  gap: var(--space-10);
  align-items: center;
}
.guarantee-list {
  list-style: disc;
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.guarantee-list li {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.8;
}
.guarantee-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-4);
}
.guarantee-visual img {
  width: 100%;
  max-width: 320px;
  object-fit: contain;
  mix-blend-mode: screen;
}

/* ── 不适用及免责情形 ── */
.exempt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  max-width: 960px;
  margin: 0 auto;
}
.exempt-card {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.exempt-num {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}
.exempt-text {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  line-height: 1.7;
}

/* ── 风险提示 ── */
.warning-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}
.warning-icon {
  display: flex;
  justify-content: center;
}
.warning-icon img {
  width: 100%;
  max-width: 220px;
  object-fit: contain;
  filter: drop-shadow(0 0 32px rgba(240, 185, 11, 0.4));
}
.warning-p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.9;
  margin-bottom: var(--space-3);
}
.warning-p:last-child { margin-bottom: 0; }

/* ── 总结 ── */
.ls-summary {
  background: var(--color-bg-primary);
  border-top: 1px solid var(--color-border);
}
.summary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-10);
  align-items: center;
}
.summary-visual img {
  width: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
}

/* ── 移动端 ── */
@media (max-width: 960px) {
  .trader-card { flex: 0 0 calc((100% - var(--space-4)) / 2); min-width: 240px; }
  .trader-grid { gap: var(--space-4); }
  .scope-layout,
  .guarantee-layout,
  .warning-layout,
  .summary-layout {
    grid-template-columns: 1fr;
  }
  .principle-grid { grid-template-columns: 1fr; }
  .trigger-grid { grid-template-columns: 1fr 1fr; }
  .exempt-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 32px; }
}
@media (max-width: 768px) {
  .ls-section { padding: var(--space-10) 0; }
  .ls-hero { padding: var(--space-10) 0; }
  .trigger-grid { grid-template-columns: 1fr; }
}
</style>
