<template>
  <van-config-provider :theme-vars="themeVars">
    <div class="headBlue">
      <span class="fh" @click="onCLickFh" v-if="showLeft">
        <van-icon name="arrow-left" color="#fff" size="18px" />
      </span>
      <span>{{ navTitle }}</span>
      <van-popover v-model:show="showThemeSetting" :actions="actions" :theme="defaultThemeQp" :offset="[12, -15]"
        placement="bottom-end" @select="onSelectSeting" :teleport="isbody">
      </van-popover>
      <van-icon :name="rightIcon" color="#fff" size="25px" @click.stop="onClickRight" v-if="showRight" />
      <span class="rightTitle" @click="onClickRight" v-if="rightTitle">{{
        rightTitle
      }}</span>
    </div>
  </van-config-provider>
</template>

<script setup>
import watermark from "../utils/watermark.js";
import { ref, onMounted, defineEmits } from "vue";
import emitter from "../utils/eventBus.js";
import router from "../router";
const props = defineProps({
  navTitle: String, //标题
  showRight: Boolean, //是否显示右侧菜单图标
  rightTitle: String, //右侧内容
  showLeft: {
    type: Boolean,
    default: true,
  }, //是否显示左侧返回
  rightIcon: {
    type: String,
    default: "weapp-nav",
  },
});
const themeVars = {
  popoverActionWidth: "90px",
  paddingMd: "11px",
};
const showThemeSetting = ref(false); //下拉菜单
const defaultThemeQp = ref("light"); //默认的右侧气泡框主题
const isbody = ref("body");
const emit = defineEmits(["clickRight"]);
//是否显示右侧下拉菜单
const actions = [
  {
    text: "退出",
  },
];
onMounted(() => {
  isbody.value = ".headBlue";
  defaultThemeQp.value = getStorage("themeSetting")
    ? getStorage("themeSetting")
    : "dark";
});
//回退
function onCLickFh() {
  router.back();
}

function onSelectSeting(e) {
  sessionStorage.clear()
  localStorage.clear()
  clearnAllCookie()
  router.push("/login");
  watermark.remove();//移除水印
}

// 清除所有cookie
function clearnAllCookie() {
  var keys = document.cookie.match(/[^=;]+(?=\=)/g)
  if (keys) {
    for (let i = keys.length; i--;) {
      document.cookie = keys[i] + '0;expires=' + new Date(0).toUTCString()
    }
  }
}
//点击右侧按钮
function onClickRight() {
  if (props.rightIcon == "weapp-nav" && !props.rightTitle) showThemeSetting.value = true;
  emit("clickRight", {});
}
</script>

<style lang="scss" scoped>
@import "../assets/styles/mixin.scss";

.headBlue {
  position: fixed;
  width: 100%;
  top: 0;
  height: 13vw;
  text-align: center;
  line-height: 13vw;
  color: #fff;
  z-index: 999;
  @include font_size($font_large_s);
  @include top-color-title($top-color-title-theme);
}

::v-deep .van-popover__wrapper {
  position: absolute;
  right: 4vw;
  height: 14vw;
  top: 1vw;
}

::v-deep .van-badge__wrapper {
  position: absolute;
  right: 4vw;
  height: 13vw;
  line-height: 13vw;
}

::v-deep .van-popover__action-text .van-hairline--bottom {
  width: 1vw !important;
  border: 1px solid red !important;
}

.rightTitle {
  position: absolute;
  right: 3vw;
  display: inline-block;
  @include font_size($font_medium);
}

.fh {
  position: absolute;
  display: inline-block;
  width: 13vw;
  left: 0;
}
</style>
