<template>
  <view>
    <ui-navigation-bar
      :isFixed="isFixed"
      :isOpacity="false"
      @init="initNavigation"
      splitLine
      autoHeight
      :backgroundColor="backgroundColor"
      color="#333"
    >
      <view class="header-box">
        <view class="header">
          <view class="back" v-if="back" @click="backFunc">
            <ui-icon color="#333333" name="back" size="26"></ui-icon>
          </view>
          <text class="title">{{ title }}</text>
          <view v-if="tools" class="right"
            ><ui-form-button
              size="26"
              radius="25rpx"
              color="#fff"
              background="rgb(58,138,251)"
              width="100rpx"
              height="50rpx"
              @click="handleToolsClick"
              >完成</ui-form-button
            ></view
          >
        </view>
      </view>
    </ui-navigation-bar>
    <view
      class="full-bg"
      v-if="fillBg"
      :style="{
        marginTop: statusBarHeight + 'px',
        background: backgroundColor
      }"
    ></view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
type IProps = {
  title: string;
  fillBg?: boolean;
  backgroundColor?: string;
  isFixed?: boolean;
  back?: boolean;
  tools?: boolean;
};
const props = withDefaults(defineProps<IProps>(), {
  title: '',
  fillBg: false,
  backgroundColor: '#fff',
  isFixed: true,
  back: false,
  tools: false
});
const emit = defineEmits<{
  (e: 'initNavigation', res: any): void;
  (e: 'back'): void;
  (e: 'toolsClick'): void;
}>();
const statusBarHeight = ref(20);

const backFunc = () => {
  emit('back');
};

const handleToolsClick = () => {
  emit('toolsClick');
};

const initNavigation = (res) => {
  statusBarHeight.value = res.statusBarHeight;
  emit('initNavigation', res);
};
</script>

<style scoped lang="scss">
.full-bg {
  height: 88rpx;
  background: #f8f8f9;
}
.header-box {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  .header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .title {
      font-size: 36rpx;
      color: #333333;
      font-weight: 500;
    }
    .back {
      position: absolute;
      left: 35rpx;
    }
    .right {
      position: absolute;
      right: 195rpx;
    }
  }
}
</style>
