<template>
  <!-- 隐私协议页面 — 独立页面，用于外部访问 -->
  <div class="privacy-policy-page">
    <div class="privacy-policy-page__content">
      <!-- 加载中状态 -->
      <div v-if="loading" class="privacy-policy-page__loading">加载中...</div>
      <!-- 协议内容渲染 -->
      <div v-else class="privacy-policy-page__body" v-html="contentHtml"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { fetchAgreement } from '@/api/common'
// @ts-ignore
import markdownit from 'markdown-it'

/** markdown-it 实例 */
const md = markdownit({ html: true, breaks: true, linkify: true })

/** 渲染后的 HTML 内容 */
const contentHtml = ref('')
/** 加载状态 */
const loading = ref(true)

/** 隐私协议 code */
const PRIVACY_CODE = 'hf8375i8'

/** 页面加载时获取协议内容 */
onMounted(async () => {
  try {
    const res = await fetchAgreement(PRIVACY_CODE)
    if (res.data?.content) {
      contentHtml.value = md.render(res.data.content)
    } else {
      contentHtml.value = '<p>暂无协议内容</p>'
    }
  } catch {
    contentHtml.value = '<p>加载失败，请稍后重试</p>'
  } finally {
    loading.value = false
  }
})
</script>

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

/* 隐私协议页面容器 */
.privacy-policy-page {
  font-size: 0.14rem;
  min-height: var(--app-height, 100vh);
  background: $bg-white;
  padding: 1rem 0;

  /* 内容区域 — 居中，12rem宽 */
  &__content {
    width: 12rem;
    margin: 0 auto;
  }

  /* 加载中提示 */
  &__loading {
    text-align: center;
    color: $text-light;
    padding: 2rem 0;
  }

  /* 协议正文样式 */
  &__body {
    color: $text-dark;
    line-height: 1.8;

    :deep(h1) {
      font-size: 0.24rem;
      font-weight: 700;
      margin-bottom: 0.2rem;
    }

    :deep(h2) {
      font-size: 0.2rem;
      font-weight: 600;
      margin-top: 0.3rem;
      margin-bottom: 0.15rem;
    }

    :deep(h3) {
      font-size: 0.17rem;
      font-weight: 600;
      margin-top: 0.2rem;
      margin-bottom: 0.1rem;
    }

    :deep(p) {
      margin-bottom: 0.12rem;
    }

    :deep(ul), :deep(ol) {
      padding-left: 0.2rem;
      margin-bottom: 0.12rem;
    }

    :deep(li) {
      margin-bottom: 0.06rem;
    }

    :deep(table) {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 0.16rem;
    }

    :deep(th), :deep(td) {
      border: 1px solid $border-color;
      padding: 0.08rem 0.12rem;
      text-align: left;
    }

    :deep(th) {
      background: $bg-main;
      font-weight: 600;
    }

    :deep(a) {
      color: $accent;
      text-decoration: underline;
    }
  }
}
</style>
