<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: "BCDefaultPage",
};
</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;
  errorMessage?: string;
};
const props = withDefaults(defineProps<Props>(), {
  code: 500,
  errorMessage: "",
});

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

const onGetErrorPicUrl = (code: TCode) => {
  const picDict = {
    1003: "search_no_result.png",
    3001: "error-page.png",
    4008: "error-no-group-member.png",
    5004: "error-page.png",
    5018: `error-no-company.png`,
    "-1001": "search_no_result.png",
    "-1002": "custom-no-auth.png",
  };
  return `${domain}/frontend/errorPage/${picDict[code]}`;
};

const onGetErrorText = (code: TCode) => {
  const textDict = {
    1003: "该分发任务已删除",
    3001: "请在移动端打开本页面，即可一键转发至客户朋友圈",
    4008: "该群由外部联系人创建，无法获取群消息",
    5004: decodeURIComponent(props.errorMessage || "系统异常！"),
    5018: `当前企业已被删除`,
    "-1001": props.errorMessage,
    "-1002": "您的账号没有该功能的使用权限，请联系管理员",
  };
  return textDict[code];
};

const onGetNeedRefresh = (code: TCode) => {
  const refreshBtnDict = {
    1003: false,
    3001: false,
    5004: true,
    4008: false,
    5018: false,
  };
  return refreshBtnDict[code];
};

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

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

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

  .error-pic-url {
    width: j(250);
    margin: 0 auto;
    padding: j(100) 0 j(50);
  }

  .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>
