<template>
  <view
    class="custom-navbar"
    :style="{
      backgroundColor: backgroundColor,
      color: textColor,
      position: fixed ? 'fixed' : 'absolute',
      paddingTop: `${statusBarHeight}px`,
      height: `${navHeight}px`
    }"
  >
    <view class="nav-grid">
      <view class="nav-side nav-left" @click="handleLeftClick">
        <slot name="left">
          <image v-if="showBack" class="arrow-icon" src="/static/images/common/left.png" mdoe="aspectFill" />
        </slot>
      </view>
      <view class="nav-title">
        <slot name="title"></slot>
      </view>
      <view class="nav-side nav-right" @click="handleRightClick">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'navBar',
  props: {
    showBack: {
      type: Boolean,
      default: true
    },
    fixed: {
      type: Boolean,
      default: true
    },
    backgroundColor: {
      type: String,
      default: 'transDOCTOR'
    },
    textColor: {
      type: String,
      default: '#000000'
    }
  },
  emits: ['leftClick', 'rightClick'],
  data() {
    return {
      statusBarHeight: 0,
      navHeight: 44
    }
  },
  mounted() {
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    // 根据平台设置 navHeight
    let navHeight = 0
    if (systemInfo.platform === 'android') {
      navHeight = 48
    } else if (systemInfo.platform === 'ios') {
      navHeight = 44
    } else {
      navHeight = 44
    }
    this.navHeight = this.statusBarHeight + navHeight
    this.$store.dispatch('SetNavHeight', this.navHeight)
  },
  methods: {
    handleLeftClick() {
      this.$emit('leftClick')
    },
    handleRightClick() {
      this.$emit('rightClick')
    }
  }
}
</script>

<style scoped lang="scss">
.custom-navbar {
  display: flex;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 999;
  .nav-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    padding: 0 30rpx;

    .nav-side {
      cursor: pointer;
      &.nav-left {
        text-align: left;
        -webkit-tap-highlight-color: transparent;
      }
      &.nav-right {
        display: flex;
        justify-content: flex-end;
        text-align: right;
      }
    }

    .arrow-icon {
      width: 28rpx;
      height: 28rpx;
      vertical-align: middle;
    }

    .nav-title {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 34rpx;
    }
  }
}
</style>
