<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view
    class="Mall4j component-custom-navigation-bar"
    :style="[
      isBgImg
        ? { backgroundImage: navigationBarStyle.backgroundImage }
        : { background: navigationBarStyle.background },
    ]"
  >
    <view class="content-wrap">
      <view
        class="status-line"
        :style="{
          height: lineHeight,
        }"
      />
      <view class="bar-line">
        <view class="bar-line container-in">
          <view
            v-if="!custom"
            class="bar-font bar-content"
            :class="{ 'left-text': isLeft }"
          >
            <image
              v-if="showBack && isWhiteBack"
              class="back-img"
              src="@/static/images/back-white.png"
              @click="$turnPage('1', 'navigateBack')"
            />
            <image
              v-if="showBack && !isWhiteBack"
              class="back-img"
              src="@/static/images/back.png"
              @click="$turnPage('1', 'navigateBack')"
            />
            <view
              v-if="showTitle"
              class="bar-title"
              :style="{ color: navigationBarStyle.fontColor || normal.fontColor }"
            >
              {{ title }}
            </view>
          </view>
          <view
            v-else
            class="bar-font container-in"
          >
            <slot />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>

const props = defineProps({
  custom: {
    type: Boolean,
    default: false
  }, // 自定义头部，否则沿用原生的头部样式
  navigationBarStyle: {
    type: Object,
    default: () => {
      return {
        background: '#F81A1A',
        fontColor: '#000000',
        iconColor: '#000000'
      }
    }
  }, // 原生头部自定义样式
  showBack: {
    type: Boolean,
    default: false
  }, // 是否显示回退图标，默认显示
  isBgImg: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  showTitle: {
    type: Boolean,
    default: true
  },
  url: {
    type: String,
    default: ''
  },
  isLeft: {
    type: Boolean,
    default: false
  },
  isWhiteBack: {
    type: Boolean,
    default: false
  }
})

const normal = reactive({
  backgroundImage: '',
  background: '#F81A1A',
  fontColor: '#000000',
  iconColor: '#000000'
}) // 公用样式,个性化样式可通过传值实现

const $system = inject('$system')
const lineHeight = ref('') // 状态栏高度
onMounted(() => {
  lineHeight.value = $system.ktxStatusHeight + 'rpx'
})

const $turnPage = () => {
  if (props.url) {
    uni.navigateTo({
      url: props.url
    })
  } else {
    uni.navigateBack(-1)
  }
}

</script>

<style lang="scss" scoped>
.bar-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.component-custom-navigation-bar {
  position: sticky;
  top: 0;
  z-index: 101;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}
.left-text {
  justify-content: flex-start;
  margin-left: 30rpx;
}
.container-in {
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  height: 44px;
}
.bar-line {
  height: 44px;
  .bar-title {
    font-size: 30rpx;
    line-height: 44rpx;
  }
}
.back-img {
  width: 34rpx;
  height: 34rpx;
  position: absolute;
  left: 30rpx;
}
.content-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
