<script setup>
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import { getMemberAgreement } from "./agreementData";

const agreementType = ref("renew");

onLoad((options) => {
  agreementType.value = options.type || "renew";
});

const agreement = computed(() => getMemberAgreement(agreementType.value));
</script>

<template>
  <Container :title="agreement.navTitle">
    <scroll-view scroll-y class="agreement-page" :show-scrollbar="false">
      <view class="content">
        <view class="page-title">{{ agreement.title }}</view>
        <view v-if="agreement.meta" class="meta">{{ agreement.meta }}</view>

        <block v-for="(item, index) in agreement.content" :key="index">
          <view v-if="item.type === 'heading'" class="section-title">
            {{ item.text }}
          </view>
          <view v-else-if="item.type === 'list'" class="list">
            <view v-for="(listItem, listIndex) in item.items" :key="listIndex" class="list-item">
              <text class="list-dot">•</text>
              <text class="list-text">{{ listItem }}</text>
            </view>
          </view>
          <view v-else class="paragraph">
            <text>{{ item.text }}</text>
          </view>
        </block>

        <view class="company">{{ agreement.company }}</view>
      </view>
    </scroll-view>
  </Container>
</template>

<style scoped lang="scss">
.agreement-page {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

.content {
  padding: 30rpx;
  box-sizing: border-box;
}

.page-title,
.section-title {
  color: #333333;
  font-size: 28rpx;
  line-height: 40rpx;
  font-weight: 700;
}

.page-title {
  margin-bottom: 20rpx;
}

.meta {
  margin-bottom: 26rpx;
  color: #666666;
  font-size: 24rpx;
  line-height: 34rpx;
}

.section-title {
  margin: 42rpx 0 22rpx;
}

.paragraph,
.list-item,
.company {
  color: #333333;
  font-size: 26rpx;
  line-height: 38rpx;
}

.paragraph {
  margin-bottom: 22rpx;
}

.list {
  margin-bottom: 22rpx;
}

.list-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 14rpx;
}

.list-dot {
  width: 28rpx;
  flex-shrink: 0;
  color: #333333;
  line-height: 38rpx;
}

.list-text {
  flex: 1;
  color: #333333;
  line-height: 38rpx;
}

.company {
  margin-top: 42rpx;
  padding-bottom: 30rpx;
  text-align: right;
  font-weight: 700;
}
</style>
