<template lang="">
  <div class="agreement" :class="{ dark }">
    <!-- eslint-disable-next-line vue/no-v-html -->
    <div class="content-wrap p-4" v-html="content"></div>
  </div>
</template>
<script>
export default {
  name: 'Agreement',
  auth: false,
  data() {
    return {
      data: {
        title: '',
        content: '',
      },
      dark: false,
    };
  },
  async fetch() {
    const agreementCoding = this.$route.params.code;
    if (this.$route.query.dark === 'true') {
      this.dark = true;
    }
    const res = await this.$axios.$get(
      '/public/v5/agreementApi/content/getContentByType',
      {
        params: {
          agreementCoding,
          type: 1,
        },
      },
    );
    this.data = res.data;
  },
  computed: {
    content() {
      return this.data.content
        .replace(/[\d\D]*<body>([\d\D]+)<\/body>[\d\D]*/i, '$1')
        .replace(/<div class="phone-container">([\d\D]+)<\/div>/g, '$1');
    },
  },
};
</script>

<style lang="scss" scoped>
.agreement {
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  &.dark {
    background-color: #000;
  }
}
.content-wrap {
}
</style>
