<template>
  <view class="layout">
    <view :style="{ background: backgroundColor }" class="navbar">
      <view :style="{ height: getStatusBarHeight() + 'px' }" class="statusBar"></view>
      <view
        :style="{ height: getTitleBarHeight() + 'px', marginLeft: getLeftIconLeft() + 'px' }"
        class="titleBar"
      >
        <!-- 返回按钮 -->
        <view v-if="showBack" class="back-button" @click="goBack">
          <image :src="commonEnum.BACK" class="left-icon"></image>
        </view>

        <!-- 标题 -->
        <view :style="{ color: titleColor, textAlign: titleAlign }" class="title"
          >{{ title }}
        </view>

        <!-- 右侧搜索按钮 -->
        <view v-if="showSearch" class="search" @click="handleSearch">
          <uni-icons :color="iconColor" class="icon" size="18" type="search"></uni-icons>
          <text :style="{ color: iconColor }" class="text">></text>
        </view>
      </view>
    </view>

    <view :style="{ height: getNavBarHeight() + 'px' }" class="fill"></view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import {
  getStatusBarHeight,
  getTitleBarHeight,
  getNavBarHeight,
  getLeftIconLeft,
} from '@/utils/system.js'
import commonEnum from '../../enum/commonEnum'
import { navigateBack } from '../../utils/router'
import UniIcons from '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue'

// 定义组件属性
const props = defineProps({
  // 标题
  title: {
    type: String,
    default: '标题',
  },
  // 背景颜色
  backgroundColor: {
    type: String,
    default: '#ffddca',
  },
  // 标题颜色
  titleColor: {
    type: String,
    default: '#3d3d3d',
  },
  // 图标颜色
  iconColor: {
    type: String,
    default: '#888',
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: false,
  },
  // 是否显示搜索按钮
  showSearch: {
    type: Boolean,
    default: false,
  },
  // 标题对齐方式
  titleAlign: {
    type: String,
    default: 'center', // 'left', 'center', 'right'
  },
  // 返回按钮点击事件
  onBack: {
    type: Function,
    default: null,
  },
  // 搜索按钮点击事件
  onSearch: {
    type: Function,
    default: null,
  },
})

// 定义事件
const emit = defineEmits(['back', 'search'])

// 返回按钮点击处理
function goBack() {
  if (props.onBack) {
    props.onBack()
  } else {
    navigateBack(1)
  }
  emit('back')
}

// 搜索按钮点击处理
function handleSearch() {
  if (props.onSearch) {
    props.onSearch()
  }
  emit('search')
}
</script>

<style lang="scss" scoped>
.layout {
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;

    .statusBar {
      // 状态栏高度
    }

    .titleBar {
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      position: relative;

      .title {
        font-size: 36rpx;
        font-weight: 400;
        flex: 1;
        text-align: center;

        // 根据对齐方式调整样式
        &.title-left {
          text-align: left;
          margin-left: 80rpx; // 为返回按钮留出空间
        }

        &.title-center {
          text-align: center;
        }

        &.title-right {
          text-align: right;
          margin-right: 80rpx; // 为搜索按钮留出空间
        }
      }

      .back-button {
        position: absolute;
        left: 0;
        width: 80rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;

        .left-icon {
          width: 18rpx;
          height: 32rpx;
        }
      }

      .search {
        position: absolute;
        right: 0;
        width: 80rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;

        .icon {
          margin-right: 5rpx;
        }

        .text {
          padding-left: 5rpx;
          font-size: 24rpx;
        }
      }
    }
  }

  .fill {
    // 占位高度
  }
}
</style>
