<template>
  <view class="relative z-100" :style="{ opacity: bgOpacity }">
    <uv-navbar :title="title" :bgColor="fixedBgColor" :titleStyle="titleStyle" :placeholder="bgFixed" :fixed="fixed"
      leftIcon="" :autoBack="false" @leftClick="leftClick" :clickHover="clickHover">
      <template #left>
        <slot name="headerLeft">
          <view class="flex items-center">
            <uv-icon v-if="!hideBack" name="arrow-left" size="20px" bold :color="titleStyle.color"></uv-icon>
            <text v-if="leftText" class="text-[16px] text-fore-title font-semibold">{{ leftText }}</text>
          </view>
        </slot>
      </template>
      <template #right>
        <slot name="headerRight" :isTransparent="isTransparent"></slot>
      </template>
    </uv-navbar>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  options: {
    virtualHost: true
  }
});
import { useTransferPage } from "@/hooks/useTransferPage";
import { useScroll } from '@/hooks/useScroll';
import { useAppStore } from "@/store/appStore";
const { transferBack } = useTransferPage();
const { scrollTop } = useScroll();
const isTransparent = ref(false);
const appStore = useAppStore();
/**
 * ie-navbar 导航栏组件
 * @description 导航栏组件
 * @property {String} title 标题
 * @property {String} bgColor 背景颜色
 * @property {String} titleColor 标题颜色
 * @property {Boolean} fixed 是否固定
 * @property {Boolean} placeholder 是否占位
 * @property {Boolean} opacity 是否透明
 * @property {Boolean} transparent 是否透明
 * @property {Boolean} keepTitleColor 是否保持标题颜色
 * @property {Boolean} customBack 是否自定义返回
 * @property {Object} titleStyle 标题样式
 * @property {Boolean} hideBack 是否隐藏返回按钮
 */

type NavbarOptions = {
  title?: string;
  bgColor?: string;
  titleColor?: string;
  fixed?: boolean;
  placeholder?: boolean;
  opacity?: boolean;
  transparent?: boolean;
  keepTitleColor?: boolean;
  customBack?: boolean;
  clickHover?: boolean;
  titleStyle?: any;
  hideBack?: boolean;
  leftText?: string;
}
const props = withDefaults(defineProps<NavbarOptions>(), {
  fixed: true,
  placeholder: true,
  clickHover: true,
  titleStyle: () => ({}),
  hideBack: false,
  leftText: ''
});
const navHeight = 60;
const fixedBgColor = computed(() => {
  if (props.opacity) {
    return props.bgColor;
  }
  if (props.transparent) {
    return uni.$uv.colorToRgba(props.bgColor, scrollTop.value / navHeight);
  }
  return props.bgColor;
})
const titleStyle = computed(() => {
  const style = { color: '', fontWeight: 600 };
  if (props.titleColor) {
    style.color = props.titleColor;
  }
  if (props.opacity) {
    return style;
  }
  if (props.keepTitleColor) {
    return style;
  }
  if (props.transparent) {
    if (scrollTop.value / navHeight > 0.5) {
      style.color = '#333';
      isTransparent.value = false;
    } else {
      style.color = '#fff';
      isTransparent.value = true;
    }
  }
  return {
    ...style,
    ...props.titleStyle
  };
})
const bgOpacity = computed(() => {
  if (props.opacity) {
    return scrollTop.value / navHeight;
  }
  return 1
})
const bgFixed = computed(() => {
  if (!props.placeholder) {
    return false;
  }
  if (props.opacity || props.transparent) {
    return false;
  }
  return true;
})

const emit = defineEmits(["leftClick"]);
const leftClick = () => {
  emit("leftClick");
  if (props.hideBack) {
    return;
  }
  if (!props.customBack) {
    handleBack();
  }
}
const handleBack = () => {
  transferBack();
}
</script>


<style></style>
