<template>
  <j-nav-bar navBarBackground="#fff" color="#000" :title="tittleMap[route.query.key]"/>
  <div :style="{padding: px2vw(20)}">
    <div v-html="agreement">
    </div>
  </div>
</template>

<script lang="ts" setup>
import {getAgreement} from "@/api";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {px2vw} from "@/utils";
import { useI18n } from 'vue-i18n';

const route = useRoute()
const { t } = useI18n()
const agreement = ref('')

const _getSystemConfigOne = (key) => {
  getAgreement().then(res => {
      agreement.value = res[key]
    })
}
const tittleMap = {
  loansAgreement: t('home.loansAgreement'),
  serviceAgreement: t('home.serviceAgreement'),
  authAgreement: t('home.authAgreement'),
  lawAgreement: t('home.lawAgreement'),
}

onMounted(() => {
  tittleMap[route.query.key] ? document.title = tittleMap[route.query.key] : ''

    _getSystemConfigOne(route.query.key)
})

</script>

<style lang="scss" scoped>

</style>