<!--
 ****--@date 2024-06-07 09:54:58
 ****--@author yizhiyang
 ****--@description 自定义导航栏
-->
<template>
  <view class="page-navbar">
    <u-navbar
      :safeAreaInsetTop="true"
      :bgColor="backgroundColor"
      :placeholder="true"
      :title="title"
      :titleStyle="titleStyle"
      :titleWidth="titleWidth"
    >
      <view slot="left" class="u-nav-slot">
        <template v-if="hasBack">
          <template v-if="onlyHasBackHome">
            <u-icon :color="iconColor" name="home" size="22" @click="handleGoHome()"></u-icon>
          </template>
          <template v-else>
            <view
              v-if="hasBackHome"
              class="has-home u-nav-slot"
              :style="{ borderColor: borderColor }"
            >
              <u-icon
                :color="iconColor"
                name="arrow-left"
                size="22"
                @click="handleGoBack(backUrl)"
              ></u-icon>
              <u-line
                color="rgb(214, 215, 217)"
                direction="column"
                :hairline="false"
                length="15"
                margin="0 16rpx"
              ></u-line>
              <u-icon :color="iconColor" name="home" size="22" @click="handleGoHome()"></u-icon>
            </view>
            <u-icon
              v-if="hasGoBack"
              :color="iconColor"
              name="arrow-left"
              size="22"
              @click="handleGoBack(backUrl)"
            ></u-icon>
          </template>
        </template>
      </view>
    </u-navbar>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
    titleSize: {
      type: String,
      default: '34rpx',
    },
    bgColor: {
      type: String,
      default: '#ffffff',
    },
    borderColor: {
      type: String,
      default: '#fff',
    },
    titleColor: {
      type: String,
      default: '#0C1223',
    },
    iconColor: {
      type: String,
      default: '#0C1223',
    },
    hasBack: {
      // 是否有返回
      type: Boolean,
      default: true,
    },
    hasBackHome: {
      // 是否有返回首页
      type: Boolean,
      default: false,
    },
    onlyHasBackHome: {
      // 只有返回首页
      type: Boolean,
      default: false,
    },
    routeType: {
      type: String,
      default: 'switchTab', // navigateTo，redirectTo，switchTab，reLaunch
    },
    backUrl: {
      type: String,
      default: '',
    },
    titleWidth: {
      type: String,
      default: '350rpx', // 官方默认400rpx
    },
  },
  data() {
    return {};
  },
  computed: {
    hasGoBack() {
      // 是否有返回上一级
      return !this.hasBackHome;
    },
    titleStyle() {
      return {
        fontSize: this.titleSize,
        fontWeight: '600',
        color: this.titleColor || '#333333',
      };
    },
    backgroundColor() {
      const color = this.hasBack ? '#fff' : 'transparent';
      return this.bgColor || color;
    },
  },
  methods: {
    handleGoBack(backUrl = '') {
      if (backUrl) {
        uni.$u.route({
          type: this.routeType,
          url: backUrl,
        });
      } else {
        uni.navigateBack();
      }
    },
    handleGoHome() {
      uni.$u.route({
        type: 'switchTab',
        url: '/pages/tabbar/home.vue',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-navbar {
  .u-nav-slot {
    @include flex;
    align-items: center;
    justify-content: space-between;
  }

  .has-home {
    border: 1rpx solid #fff;
    border-radius: 200rpx;
    padding: 6rpx 12rpx;
    opacity: 0.8;
  }
}
</style>