<template>
  <uv-navbar
    :fixed="fixed"
    :bgColor="bgColor"
    :leftIcon="leftIcon"
    :title="title"
    :titleStyle="{...titleStyle}"
    :placeholder="placeholder"
    @leftClick="onLeftClick"
    z-index="1000"
  >
    <template #left>
      <slot name="left">
        <!-- <image
          v-if="isBack && !leftIcon"
          class="w-54rpx h-54rpx"
          src="/static/images/icon_back_def.svg"
        ></image> -->
        <uv-icon size="36rpx" color="white" v-if="isBack && !leftIcon" name="arrow-left"></uv-icon>
      </slot>
    </template>
    <template #center>
      <slot name="center"></slot>
    </template>

    <template #right>
      <view :style="[{ paddingRight: addUnit(paddingRight) }]">
        <slot name="right"></slot>
      </view>
    </template>
  </uv-navbar>
</template>

<script setup>
let menuButtonInfo = {}
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect()
// #endif

import { computed } from 'vue'
import { addUnit, sys } from '@climblee/uv-ui/libs/function/index.js'

const props = defineProps({
  fixed: {
    type: Boolean,
    default: true,
  },
  isBack: {
    type: Boolean,
    default: true,
  },
  autoBack: {
    type: Boolean,
    default: true,
  },
  placeholder: {
    type: Boolean,
    default: true,
  },
  bgColor: {
    type: String,
    default: '#ee2c37',
  },
  imgMode: {
    type: String,
    default: 'aspectFill',
  },
  safeAreaInsetTop: {
    type: Boolean,
    default: true,
  },
  height: {
    type: [String, Number],
    default: '44px',
  },
  title: {
    type: String,
    default: '',
  },
  leftIcon: {
    type: String,
    default: '',
  },
  titleStyle: {
    type: Object,
    default: () => {
      return {
        color: '#fff',
      }
    },
  },
})

const emit = defineEmits(['leftClick'])

const paddingRight = computed(() => {
  let rightButtonWidth = 0
  rightButtonWidth =
    sys().windowWidth - (menuButtonInfo?.left ?? sys().windowWidth)
  return `${rightButtonWidth}px`
})
const onLeftClick = () => {
  if (!props.isBack) return
  emit('leftClick')
  if (props.autoBack) {
    // #ifdef H5
    let canNavBack = getCurrentPages()
    if (canNavBack && canNavBack.length > 1) {
      uni.navigateBack({
        delta: 1,
      })
    } else {
      history.back()
    }
    // #endif
    // #ifndef H5
    uni.navigateBack()
    // #endif
  }
}
</script>
