<template>
  <div class="container">
    <div v-if="loading" class="container-loading">
      <van-loading size="80px" />
    </div>
    <div v-else-if="isMask || !auth || !hasAuth" class="container-mask">
      <img src="@/assets/images/no-permission.png" alt="" srcset="" />
      <p>暂无服务权限，请联系小助理开通~</p>
    </div>
    <div v-else-if="page" class="container-page">
      <div ref="homeRef" class="home">
        <img ref="bgRef" class="bgBox" draggable="false" :src="bgUrl" />
        <img ref="btnRef" class="btnBox" draggable="false" :src="btnUrl" @click="toPage" />
      </div>
    </div>
    <div v-else>
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, computed, watch, nextTick } from "vue";
import { useRoute } from "vue-router";
import { showToast } from 'vant';

import { useHasAuth } from '@/hooks/useHasAuth';

const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  loadingText: {
    type: String,
    default: "加载中",
  },
  authorityId: {
    type: [String, Array],
    default: () => undefined,
  },
  mask: {
    type: Boolean,
    default: false,
  },
  page: {
    type: Object,
    default: () => null,
  },
  auth: {
    type: Boolean,
    default: false,
  },
});

const route = useRoute()
const isMask = computed(() => route.query.mask || props.mask)
const bgUrl = computed(() => props.page?.bgUrl || "")
const btnUrl = computed(() => props.page?.btnUrl || "")

const homeRef = ref(null)
const bgRef = ref(null)
const btnRef = ref(null)

const { hasAuth } = useHasAuth(() => props.authorityId);

watch(() => props.page, () => {
  if (!props.page) return;
  nextTick(() => {
    Promise.all([getNaturalWidth(bgRef.value), getNaturalWidth(btnRef.value)]).then(([bgWidth, btnWidth]) => {
      const addBtnStyle = `;width:${btnWidth / bgWidth * 100}%;height: auto;background-image: none;`;

      btnRef.value.style.cssText = props.page.btnStyle + addBtnStyle;
    })
    homeRef.value.style = `min-height: 100vh;background-image:url(${bgRef.value.src});background-position:bottom;background-size: 100000px;`
  })
})

function toPage() {
  if (!props.page?.paymentUrl) {
    showToast('链接不存在')
    return;
  }
  window.open(props.page.paymentUrl)
}

function getNaturalWidth(DomElement) {
  if (DomElement.naturalWidth) {
    return DomElement.naturalWidth;
  } else {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = function () {
        resolve(img.width);
      };
      img.onerror = function () {
        reject(new Error('error'));
      };
      img.src = DomElement.src;
    });
  }
}


</script>
<style scoped lang="scss">
.container {

  .container-loading {
    margin: 359px auto 55.8px;
  }

  .container-mask {
    img {
      width: 182px;
      height: 182px;
      margin: 359px auto 55.8px;
    }

    p {
      color: rgb(51, 51, 51);
      font-family: "PingFang SC";
      font-size: 35px;
      font-style: normal;
      font-weight: 400;
    }
  }

  .container-page {
    overflow-x: hidden;
    margin: 0;
    background: #f5f5f5;
  }

  .container-home {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f5f5f5;

    .bgBox {
      width: 100%;
    }

    .btnBox {
      position: absolute;
    }
  }
}
</style>
