<template>
  <ModalTransition :show="show">
    <div class="agreement">
      <div class="agreement-wrapper">
        <div class="agreement-content" v-html="agreeHtml"></div>
      </div>
      <div class="agreement-close" @click="$emit('close')"></div>
    </div>
  </ModalTransition>
</template>

<script setup>
import { ref } from "vue"
import ModalTransition from "./ModalTransition.vue";

const show = ref(false)
const agreeHtml = ref("")
const loading = weui.loading("加载中……")

fetch(`./agreement.html`, {
  method: "GET",
  headers: new Headers({
    "Content-Type": "text/html"
  })
}).then(res => res.text())
  .catch(error => {
    loading.hide()
    console.log(error)
  })
  .then(res => {
    loading.hide()
    agreeHtml.value = res
    show.value = true
  })
</script>

<style scoped>
.agreement {
  background-color: #fff;
  border-radius: 2vw 2vw 0 0;
}

.agreement-wrapper {
  width: 100%;
  height: 90vh;
  overflow: auto;
}

.agreement-content {
  padding: 6vw;
}

.agreement-close {
  z-index: 1;
  position: absolute;
  top: 25vw;
  right: 3vw;
  border-radius: 50%;
  width: 8.425926vw;
  height: 8.703704vw;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: rgba(255,255,255,.5);
  background-size: 80% auto;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MiA3MiIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4Ij48cGF0aCBkPSJNIDE5IDE1IEMgMTcuOTc3IDE1IDE2Ljk1MTg3NSAxNS4zOTA4NzUgMTYuMTcxODc1IDE2LjE3MTg3NSBDIDE0LjYwOTg3NSAxNy43MzM4NzUgMTQuNjA5ODc1IDIwLjI2NjEyNSAxNi4xNzE4NzUgMjEuODI4MTI1IEwgMzAuMzQzNzUgMzYgTCAxNi4xNzE4NzUgNTAuMTcxODc1IEMgMTQuNjA5ODc1IDUxLjczMzg3NSAxNC42MDk4NzUgNTQuMjY2MTI1IDE2LjE3MTg3NSA1NS44MjgxMjUgQyAxNi45NTE4NzUgNTYuNjA4MTI1IDE3Ljk3NyA1NyAxOSA1NyBDIDIwLjAyMyA1NyAyMS4wNDgxMjUgNTYuNjA5MTI1IDIxLjgyODEyNSA1NS44MjgxMjUgTCAzNiA0MS42NTYyNSBMIDUwLjE3MTg3NSA1NS44MjgxMjUgQyA1MS43MzE4NzUgNTcuMzkwMTI1IDU0LjI2NzEyNSA1Ny4zOTAxMjUgNTUuODI4MTI1IDU1LjgyODEyNSBDIDU3LjM5MTEyNSA1NC4yNjUxMjUgNTcuMzkxMTI1IDUxLjczNDg3NSA1NS44MjgxMjUgNTAuMTcxODc1IEwgNDEuNjU2MjUgMzYgTCA1NS44MjgxMjUgMjEuODI4MTI1IEMgNTcuMzkwMTI1IDIwLjI2NjEyNSA1Ny4zOTAxMjUgMTcuNzMzODc1IDU1LjgyODEyNSAxNi4xNzE4NzUgQyA1NC4yNjgxMjUgMTQuNjEwODc1IDUxLjczMTg3NSAxNC42MDk4NzUgNTAuMTcxODc1IDE2LjE3MTg3NSBMIDM2IDMwLjM0Mzc1IEwgMjEuODI4MTI1IDE2LjE3MTg3NSBDIDIxLjA0ODEyNSAxNS4zOTE4NzUgMjAuMDIzIDE1IDE5IDE1IHoiLz48L3N2Zz4=);
}
</style>