<template>
  <van-config-provider :theme-vars="themeVars">
    <div class="headBlue" :style="{ backgroundColor: props.bgColor }">
      <span class="fh" @click="onCLickFh" v-if="showLeft">
        <van-icon name="arrow-left" :color="props.fontColor" size="24px" />
      </span>
      <span :style="{color:fontColor}" class="navtitle">{{ title }}</span>
      <van-icon :name="rightIcon" :color="props.fontColor" 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 { ref, onMounted, defineEmits } from "vue";
import router from "../router";
const props = defineProps({
  title: String, //标题
  showRight: Boolean, //是否显示右侧菜单图标
  rightTitle: String, //右侧内容
  fontColor: {
    type: String,
    default: '#333',
  }, //背景颜色
  bgColor: {
    type: String,
    default: '#fff',
  }, //背景颜色
  showLeft: {
    type: Boolean,
    default: true,
  }, //是否显示左侧返回
  rightIcon: {
    type: String,
    default: "weapp-nav",
  },
});
const themeVars = {
  popoverActionWidth: "90px",
  paddingMd: "11px",
};
const showThemeSetting = ref(false); //下拉菜单
const emit = defineEmits(["clickRight"]);
onMounted(() => {
});

//回退
function onCLickFh() {
  router.back();
}

//点击右侧按钮
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 {
  width: 100%;
  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);
  border-bottom: 1px solid #e5e5e5;
}
.navtitle{
  font-weight: 600;
}
::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>
