<template>
  <van-sticky
    :offset-top="0"
    v-if="!isNormal && !isIframeBool"
  >
    <div
      class="to-normal"
      data-weiling-mobile-ui-bc-gray
    >
      <span class="left-text">新版本体验中...</span>
      <div
        class="right-back"
        @click="backToNormal"
      >返回正式版</div>
    </div>
  </van-sticky>
</template>

<script lang="ts">
export default {
  name: "BCGrayNav",
};
</script>

<script lang="ts" setup>
import { Sticky } from 'vant';
import { ref, computed } from "vue";
import { isIframe } from "@mobileUI/utils";

type Props = {
  env_data: TEnv.TEnvData;
};

const props = withDefaults(defineProps<Props>(), {
  env_data: () => {
    return {
      sid: "",
      domain: "",
      corp_id: "",
      node_env: "uat",
      app_id: "",
      token: "",
      wl_corp_ids: [],
      card_resource: ""
    };
  },
});

const isNormal = ref(true);
// 是否卫瓴
const corpList = computed(() => props.env_data.wl_corp_ids || []);
const corp_id = computed(() => props.env_data.corp_id);
const node_env = computed(() => props.env_data.node_env);
const isIframeBool = isIframe();

const isWl = corpList.value.includes(corp_id.value);
//是不是预发布
const isPre = node_env.value === "stg";
function backToNormal() {
  //手动切回正式，保持两天增加标识
  let d = new Date();
  d.setTime(d.getTime() + 2 * 24 * 60 * 60 * 1000);
  let expires = "expires=" + d.toUTCString();
  document.cookie = "env=tmp-prod;path=/;" + expires;
  window.location.reload();
}
function autoBackToAlpha() {
  let d = new Date();
  d.setTime(d.getTime() + 365 * 24 * 60 * 60 * 1000);
  let expires = "expires=" + d.toUTCString();
  document.cookie = "env=gray;path=/;" + expires;
  window.location.reload();
}
//判断是否是灰度环境
function judgeCookie() {
  let cookie = document.cookie;
  if (cookie?.includes("env=tmp-prod")) {
    isNormal.value = true;
    return
  }
  if (cookie?.includes("env=gray")) {
    isNormal.value = false;
    return
  }
  isNormal.value = true;
  //当手动切换过期后，刷新页面，切回灰度
  if (isWl && !isPre) {
    autoBackToAlpha();
  }
}
judgeCookie();
</script>

<style lang="scss">
.to-normal[data-weiling-mobile-ui-bc-gray] {
  height: j(44);
  padding: 0 j(16);
  background: var(--wl-primary-color-light);
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left-text {
    color: var(--wl-primary-color-dark);
    font-size: j(16);
    font-weight: bold;
    font-style: italic;
  }

  .right-back {
    width: j(76);
    height: j(24);
    border-radius: j(38);
    border: 1px solid var(--wl-primary-color-dark);
    font-size: j(12);
    color: var(--wl-primary-color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
</style>
