<template>
  <div class="switch-page">
    <!-- 小微ai -->
    <div class="switch-btn" @click.stop="openXWAi">
      <WlPic :src="xw_ai" />
    </div>
    <!-- 切换灰度 -->
    <div v-if="needGray || !isNormal" class="switch-btn" @click="switchGray">
      <div class="btn-border">
        <WlPic :src="xw_btn_border" />
      </div>
      <WlSvg
        type="revoke"
        color="var(--wl-primary-color)"
        height="24"
        width="24"
      />
      <span>{{ isNormal ? "体验新版" : "返回旧版" }}</span>
    </div>
  </div>
</template>

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

<script setup lang="ts">
import WlSvg from "@wltech/svg";
import WlPic from "@mobileUI/components/WlPic";
import { xw_btn_border, xw_ai } from "@mobileUI/utils/cdn";

const props = withDefaults(
  defineProps<{
    isNormal?: boolean;
    needGray?: boolean;
  }>(),
  {
    isNormal: true,
    needGray: false,
  },
);

const emit = defineEmits<{
  (e: "openXWAi"): void;
}>();

// 切换灰度
function switchGray() {
  if (props.isNormal) {
    //手动切到灰度
    let d = new Date();
    d.setTime(d.getTime() + 365 * 24 * 60 * 60 * 1000);
    let expires = "expires=" + d.toUTCString();
    document.cookie = "env=gray;path=/;" + expires;
  } else {
    //手动切回正式，保持两天增加标识
    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();
}

// 打开小微ai
const openXWAi = () => {
  emit("openXWAi");
};
</script>

<style scoped lang="scss">
.switch-page {
  display: flex;
  flex-direction: column;
  gap: j(12);
  .switch-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: j(134);
    height: j(40);
    gap: j(6);
    border-radius: j(20);
    background: var(--wl-background-color, #f4f9fd);
    .btn-border {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      width: 100%;
      height: 100%;
      border-radius: j(20);
    }
    span {
      color: var(--wl-text-color-title-1, #18191a);
      font-size: j(16);
      font-weight: 400;
    }
  }
}
</style>
