<template>
  <div
    class="default-page"
    data-weiling-mobile-ui-wl-default-page
  >
    <div class="error-pic-url">
      <WlPic :src="errorPicUrl" />
    </div>
    <p class="error-text">
      {{ errorText }}
    </p>
    <div
      class="refresh-btn"
      @click="onRefresh"
      v-if="needRefresh"
    >
      刷新
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "WlDefaultPage",
};
</script>
  
<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { domain } from "@mobileUI/utils/cdn";
import WlPic from "@mobileUI/components/WlPic";
type TCode = 500 | 5018;
type Props = {
  code?: TCode;
  needRefresh: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  code: 500,
  needRefresh: false
});

const errorPicUrl = ref("");
const errorText = ref("");

const onGetErrorPicUrl = (code: TCode) => {
  const picDict = {
    500: `error-no-company.png`,
    5018: `error-no-company.png`
  };
  return `${domain}/frontend/errorPage/${picDict[code]}`;
}

const onGetErrorText = (code: TCode) => {
  const textDict = {
    500: `服务器异常`,
    5018: `当前企业已被删除`
  };
  return textDict[code];
}

const onRefresh = () => {
  window.location.hash = "";
  window.location.reload();
};

watchEffect(() => {
  errorPicUrl.value = onGetErrorPicUrl(props.code);
  errorText.value = onGetErrorText(props.code);
});
</script>

<style lang="scss">
.default-page[data-weiling-mobile-ui-wl-default-page] {
  width: 100%;
  height: 100%;

  .error-pic-url {
    width: j(350);
    margin: 0 auto;
    padding: j(30) 0 j(15);
  }

  .error-text {
    color: #979797;
    font-size: j(16);
    word-break: break-word;
    padding: 0 j(15);
    text-align: center;
  }

  .refresh-btn {
    border-radius: j(10);
    font-size: j(14);
    width: j(80);
    color: #979797;
    cursor: pointer;
    text-align: center;
    border: j(1) solid #979797;
    padding: j(6) 0;
    margin: j(30) auto;
  }
}
</style>
