<template>
  <view class="container b-f p-b">
    <view class="agreement-content" v-if="content">
      <mp-html :content="content" />
    </view>
    <view class="empty" v-else>
      <text>协议内容不存在</text>
    </view>
  </view>
</template>

<script>
  import service from './service'
  import appPermission from './appPermission'
  import activity from './activity'
  import minor from './minor'
  import privacy from './privacy'
  import review from './review'
  import refund from './refund'
  import delivery from './delivery'
  import getByMyself from './getByMyself'

  export default {
    data() {
      return {
        // 协议ID
        agreementId: null,
        // 协议内容
        content: '',
        agreementContent: {
            service: service,
            appPermission: appPermission,
            activity: activity,
            minor: minor,
            privacy: privacy,
            review: review,
            refund: refund,
            delivery: delivery,
            getByMyself: getByMyself,
        }
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 获取协议ID
      this.agreementId = options.id
      // 加载协议内容
      this.loadAgreementContent()
    },

    methods: {
      // 加载协议内容
      loadAgreementContent() {
        if (!this.agreementId) {
          return
        }
        // 根据ID匹配协议内容
        this.content = this.agreementContent[this.agreementId] || ''
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 30rpx;
    min-height: 100vh;
  }

  .agreement-content {
    font-size: 28rpx;
    line-height: 1.8;
    color: #333;

    h2 {
      font-size: 36rpx;
      font-weight: bold;
      margin: 30rpx 0 20rpx;
      color: #333;
    }

    h3 {
      font-size: 32rpx;
      font-weight: bold;
      margin: 24rpx 0 16rpx;
      color: #333;
    }

    p {
      font-size: 28rpx;
      line-height: 1.8;
      margin: 12rpx 0;
      color: #666;
    }
  }

  .empty {
    text-align: center;
    padding: 100rpx 0;
    color: #999;
    font-size: 28rpx;
  }
</style>
