<template>
  <view class="CustomNavbar" :style="{ backgroundColor: bgColor }">
    <view class="empty" :style="{ height: statusBarHeight + 2 + 'px' }"></view>
    <view
      class="Navbar"
      :style="{
        height: (bounding.top - statusBarHeight) * 2 + bounding.height + 'px',
      }"
    >
      <van-icon
        name="arrow-left"
        size="40rpx"
        class="arrow-left"
        @click="jumpPage"
      />
      <view class="title">{{ title }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "CustomNavbar",
  props: {
    title: {
      type: String,
      default: "",
    },
    bgColor: {
      type: String,
      default: "#fff",
    },
  },
  computed: {
    statusBarHeight() {
      return this.$store.state.systemInfo.statusBarHeight;
    },
    bounding() {
      return this.$store.state.bounding;
    },
  },
  methods: {
    jumpPage() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>
<style scoped lang="less">
.CustomNavbar {
  background-color: #fff;
  width: 100%;
  z-index: 10;
  .empty {
    width: 100%;
  }
  .Navbar {
    display: flex;
    align-items: center;
    position: relative;
    .arrow-left {
      position: absolute;
      left: 40rpx;
    }
    .title {
      width: 300rpx;
      height: 28rpx;
      line-height: 28rpx;
      font-size: 28rpx;
      font-weight: 500;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
    }
  }
}
</style>