<template>
  <view
    class="wrapper"
    :style="{ paddingTop: menu.top + 'px', backgroundColor: bgColor }"
    :class="{ isPrimary: props.bgColor == '$primaryColor' }"
  >
    <!-- #ifdef APP-PLUS || H5  -->
    <view class="status-bar"> </view>
    <!-- #endif -->
    <view
      class="header-wrapper"
      :style="{ backgroundColor: bgColor, color: color, height: menu.height + 'px', lineHeight: menu.height + 'px' }"
    >
      <view class="header-left" @tap="navBack" v-if="back">
        <image :src="imgUrl" mode="scaleToFill" />
      </view>
      <view class="header-left logo-out" v-if="logOut" @tap="loginOut">
        <image :src="imgUrl" mode="scaleToFill" />退出登录</view
      >
      <view class="header-text">{{ title }}</view>
    </view>
  </view>
  <!-- <view class="wrapper-block" :style="{ backgroundColor: bgColor, paddingBottom: pdB }"></view> -->
</template>

<script setup>
import { ref, watch } from "vue"
import user from "@/hooks/user.js"
const props = defineProps({
  bgColor: {
    type: String,
    default: "#fff",
  },
  title: {
    type: String,
    default: "首页",
  },
  color: {
    type: String,
    default: "#000",
  },
  pdB: {
    type: String,
    default: "100rpx",
  },
  imgUrl: {
    type: String,
    default: "/static/iconImg/left-arrow.svg",
  },
  back: {
    type: Boolean,
    default: true,
  },
  logOut: { type: Boolean, default: false },
})
const emits = defineEmits(["back"])
let menu = { top: 0, height: "" }
// #ifdef MP-WEIXIN
menu = uni.getMenuButtonBoundingClientRect()
// #endif
const navBack = () => {
  emits("back")
  uni.navigateBack({
    fail: (err) => {},
  })
}
const loginOut = () => {
  user.logout()
  uni.showToast({
    icon: "none",
    title: "退出成功",
  })
}
</script>

<style lang="scss" scoped>
.wrapper {
  position: sticky;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  padding-bottom: 10rpx;
  z-index: 50;
  .status-bar {
    height: var(--status-bar-height);
    width: 100%;
  }
  .header-wrapper {
    position: relative;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    font-weight: 700;
    .header-left {
      position: absolute;
      top: 50%;
      left: 30rpx;
      width: 50rpx;
      height: 50rpx;
      transform: translateY(-50%);
      image {
        width: 100%;
        height: 100%;
      }
    }
    .logo-out {
      display: flex;
      align-items: center;
      width: 150rpx;
      font-size: 25rpx;
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
.wrapper-block {
  height: var(--status-bar-height);
}

.isPrimary {
  background: $primaryColor !important;
}
</style>
