<template>
  <view class="agreement-container">
    <!-- <view class="agreement-header">
      <view class="back-btn" @click="goBack">
        <text class="iconfont icon-back">&#xe679;</text>
      </view>
      <view class="title">用户协议</view>
      <view class="placeholder"></view>
    </view> -->
    
    <scroll-view scroll-y class="agreement-content">
     <!--  <view class="agreement-title">《用户协议》</view> -->
      
      <!-- 使用v-if控制加载状态 -->
      <view v-if="loading" class="loading">
        <text>加载中...</text>
      </view>
      
      <!-- 使用v-else-if显示错误信息 -->
      <view v-else-if="error" class="error">
        <text>{{errorMsg}}</text>
        <button class="retry-btn" @click="fetchAgreement">重新加载</button>
      </view>
      
      <!-- 使用v-else和v-html动态渲染协议内容 -->
      <view v-else class="markdown-content" v-html="parsedContent"></view>
    </scroll-view>
  </view>
</template>

<script>
import { getUserAgreement } from '@/api/user';
	import { apiBaseUrl } from '@/common/config.js';

export default {
  data() {
    return {
      agreementContent: '',
      loading: true,
      error: false,
      errorMsg: '加载失败，请重试'
    }
  },
  computed: {
    parsedContent() {
      if (!this.agreementContent) return '';
      return this.parseMarkdown(this.agreementContent);
    }
  },
  onLoad() {
    this.fetchAgreement();
  },
  methods: {
    // 简单的 markdown 解析函数
    parseMarkdown(markdown) {
      if (!markdown) return '';
      
      let html = markdown
        // 标题解析
        .replace(/^### (.*$)/gim, '<h3>$1</h3>')
        .replace(/^## (.*$)/gim, '<h2>$1</h2>')
        .replace(/^# (.*$)/gim, '<h1>$1</h1>')
        // 粗体
        .replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
        // 斜体
        .replace(/\*(.*)\*/gim, '<em>$1</em>')
        // 链接
        .replace(/\[([^\]]*)\]\(([^\)]*)\)/gim, '<a href="$2">$1</a>')
        // 代码块
        .replace(/```(.*?)```/gims, '<pre><code>$1</code></pre>')
        // 行内代码
        .replace(/`([^`]*)`/gim, '<code>$1</code>')
        // 列表项
        .replace(/^\* (.*$)/gim, '<li>$1</li>')
        .replace(/^\d+\. (.*$)/gim, '<li>$1</li>')
        // 换行处理
        .replace(/\n\n/gim, '</p><p>')
        .replace(/\n/gim, '<br>');
      
      // 包装列表
      html = html.replace(/(<li>.*<\/li>)/gim, '<ul>$1</ul>');
      
      // 包装段落
      if (html && !html.startsWith('<h') && !html.startsWith('<ul') && !html.startsWith('<ol')) {
        html = '<p>' + html + '</p>';
      }
      
      return html;
    },
    goBack() {
      uni.navigateBack();
    },
    async fetchAgreement() {
      this.loading = true;
      this.error = false;
       const res = await uni.request({
          url: `${apiBaseUrl}/api/public/agreements/terms_of_service/`,
          method: 'GET',
        });
      console.log(res);
      if(res.statusCode==200){
        this.loading = false;
         this.agreementContent = res.data.content || '';
      }
      /* getUserAgreement()
        .then(res => {
          console.log(res);
          this.loading = false;
            // 假设API返回的数据中有content字段包含协议内容
            this.agreementContent = res.content || '';
            console.log(this.agreementContent);
         
        })
        .catch(err => {
          console.error('获取用户协议失败:', err);
          this.error = true;
          this.errorMsg = '网络异常，请稍后重试';
        })
        .finally(() => {
          this.loading = false;
        }); */
    }
  }
}
</script>

<style>
.agreement-container {
  /* display: flex;
  flex-direction: column; */
  height: 100vh;
  background-color: #fff;
}

.agreement-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  background-color: #fff;
  padding: 0 30rpx;
  position: relative;
  border-bottom: 1rpx solid #eee;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-back {
  font-size: 40rpx;
  color: #333;
}

.title {
  font-size: 34rpx;
  font-weight: 500;
  color: #333;
}

.placeholder {
  width: 60rpx;
}

.agreement-content {
  width: 100%;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  background-color: #fff;
}

.agreement-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
  color: #333;
}

.section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
}

.section-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.paragraph {
  display: block;
  margin-bottom: 20rpx;
  text-align: justify;
}

.loading, .error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  color: #666;
  font-size: 28rpx;
}

.error {
  color: #ff4d4f;
}

.retry-btn {
  margin-top: 20rpx;
  padding: 10rpx 30rpx;
  background-color: #1890ff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
}

/* Markdown 样式 */
.markdown-content {
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
}

.markdown-content h1 {
  font-size: 36rpx;
  font-weight: bold;
  margin: 30rpx 0 20rpx 0;
  color: #333;
}

.markdown-content h2 {
  font-size: 32rpx;
  font-weight: bold;
  margin: 25rpx 0 15rpx 0;
  color: #333;
}

.markdown-content h3 {
  font-size: 30rpx;
  font-weight: bold;
  margin: 20rpx 0 10rpx 0;
  color: #333;
}

.markdown-content p {
  margin-bottom: 20rpx;
  text-align: justify;
}

.markdown-content strong {
  font-weight: bold;
  color: #333;
}

.markdown-content em {
  font-style: italic;
}

.markdown-content a {
  color: #1890ff;
  text-decoration: underline;
}

.markdown-content code {
  background-color: #f5f5f5;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
  font-family: 'Courier New', monospace;
  font-size: 24rpx;
}

.markdown-content pre {
  background-color: #f5f5f5;
  padding: 20rpx;
  border-radius: 8rpx;
  margin: 20rpx 0;
  overflow-x: auto;
}

.markdown-content pre code {
  background: none;
  padding: 0;
  font-size: 24rpx;
  line-height: 1.4;
}

.markdown-content ul {
  margin: 20rpx 0;
  padding-left: 40rpx;
}

.markdown-content li {
  margin-bottom: 10rpx;
  list-style-type: disc;
}
</style> 