<template>
  <view class="nav" :style="'height:calc(' + height + 'rpx + var(--safe-top));'">
    <!-- #ifndef  MP-TOUTIAO -->
  <view class="nav-box" :class="[fixed ? 'fixed' : 'pos', blueTheme ? 'blue-theme' : '']">
    <view class="left-btn-box btn-box abs flex flex-center" @click="handleBack">
      
      <image mode="aspectFill" class="back-btn" src="@/static/icon/arrow-dark.png" />
      
    </view>
    <view class="title flex flex-center">{{ title }}</view>
    <view class="right-btn-box abs flex flex-center">
      <slot name="right" />
    </view>
  </view>
  <!-- #endif -->
</view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    height: {
      type: Number,
      default: 376,
    },
    fixed: {
      type: Boolean,
      default: true,
    },
    blueTheme: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleBack() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        uni.navigateBack();
      } else {
        uni.switchTab({
          url: "/pages/index/index"
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.nav{
  width: 750rpx;
  height: 376rpx;
  position: fixed;
  background: linear-gradient(180deg, #B1E5FF 0%, #F7F8F9  100%);
  z-index: 99;
}
.nav-box {
  padding-top: var(--safe-top);
  height: calc(88rpx + var(--safe-top));

  
  // background-color: #ffffff;
   /* #ifdef MP-TOUTIAO */
   .title{
    align-items: flex-end;
    padding-bottom: 16rpx;
  }
  /* #endif */

  &.blue-theme {
    background: linear-gradient(85deg, #3875EA 0%, #1890FC 100%);
    color: #ffffff;

    .btn-box {
      filter: invert(1);
    }
  }

  &.fixed {
    left: 0;
    right: 0;
    z-index: 999;
	top: 0;
  }
}

.btn-box {
  width: 88rpx;
  height: 88rpx;
  left: 0;
  bottom: 0;
}

.title {
  height: 100%;
}

.right-btn-box {
  right: 0;
  bottom: 0;
  height: 88rpx;
}

.back-btn {
  width: 15rpx;
  height: 29rpx;
  
}
</style>
