<template>
  <div class="navbar w-full" style="z-index: 300" v-if="!bangsBlock">
    <div
      class="h-full theBar flex items-end px-5 justify-center relative h46"
      style="background: #f7f7fa; padding-bottom: 8px"
      :style="[isBangs ? 'height:' + `${46 + heightOfNotch}px` : '']"
      v-bind="$attrs"
    >
      <div class="relative w-full flex items-center justify-center">
        <IconVue
          v-if="showBackIcon"
          @click="$router.go(-1)"
          name="icon-fanhui"
          class="absolute left-0"
          size="18"
          :color="iconColor"
        />
        <IconVue
          v-if="showSecondIcon && isRole"
          name="icon-kefu"
          class="absolute left-11"
          size="18"
          @click="$emit('clickSecondIcon')"
          :color="iconColor"
        />
        <IconVue
          v-if="showSearchIcon"
          name="icon-sousuo"
          class="absolute left-11"
          size="18"
          @click="$router.push(path)"
          :color="iconColor"
        />
        <div
          class="title whitespace-nowrap overflow-hidden overflow-ellipsis px-5"
        >
          {{ title }}
        </div>
      </div>
    </div>
    <div
      class="h46"
      :style="[isBangs ? 'height:' + `${46 + heightOfNotch}px` : '']"
      v-if="occupyPosition"
    ></div>
  </div>
  <div v-else class="navbar w-full">
    <div
      class="h-full theBar flex items-end px-5 justify-center relative"
      style="background: rgb(237, 237, 237)"
      v-bind="$attrs"
      :style="{
        height: heightOfNotch + 'px',
      }"
      v-if="isBangs"
    ></div>
    <div
      :style="{
        height: heightOfNotch + 'px',
      }"
      v-if="isBangs"
    ></div>
  </div>
</template>
<script lang="ts">
import { notchHeight } from "@/store/AppStore";
import { defineComponent } from "vue";
import IconVue from "../common/Icon.vue";
export default defineComponent({
  inheritAttrs: false,
  emits: ["clickSecondIcon"],
  components: { IconVue },
  props: {
    title: {
      type: String,
    },
    showBackIcon: {
      type: Boolean,
      default: true,
    },
    occupyPosition: {
      type: Boolean,
      default: true,
    },
    iconColor: {
      type: String,
      default: "#343640",
    },
    showSecondIcon: {
      type: Boolean,
      default: false,
    },
    isRole: {
      type: Boolean,
      default: false,
    },
    showSearchIcon: {
      type: Boolean,
      default: false,
    },
    path: {
      type: Object,
      default: () => {
        return { path: "/Search" };
      },
    },
    bangsBlock: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    console.log(
      document.documentElement.clientWidth,
      window.screen.width,
      "show width"
    );
    console.log(window.devicePixelRatio, "show window.devicePixelRatio");
  },
  computed: {
    isBangs() {
      return true;
    },
    heightOfNotch() {
      // 刘海屏的刘海高度 单位px
      return notchHeight.value / window.devicePixelRatio;
      return 103;
    },
  },
});
</script>
<style lang="less" scoped>
.navbar {
  .h46 {
    height: 46px;
  }
  .theBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
  }

  .title {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }
}
</style>
