<template>
  <view>
    <view
      v-if="isWeixinH5"
      :class="transparent ? 'navigation-bar transparent' : 'navigation-bar'"
      :style="{ height: navigationBarHeight + 'px' }"
    >
      <view
        class="capsule"
        :style="{
          top: menu.top + 'px',
        }"
      >
        <view class="back" @click="back">
          <!-- <k-icon :name="'back-' + navStyle" /> -->
          <k-icon name="back" :size="14" />
        </view>
      </view>
      <view :class="'title ' + navStyle"> </view>
      <view class="right-link">
        <view class="home" @click="toHome">
          <!-- <k-icon :name="'home-' + navStyle" /> -->
          <k-icon name="home" :size="19" />
        </view>
      </view>
    </view>
    <k-navigation-bar
      v-else
      :title="title"
      :backDelta="backDelta"
      :transparent="transparent"
      :navStyle="navStyle"
      :backToTabbar="backToTabbar"
      :showLeftCapsule="showLeftCapsule"
      :showHomeButton="showHomeButton"
      :rightLinkColor="rightLinkColor"
      :rightLink="rightLink"
    >
      <slot name="title" />
      <template v-slot:right>
        <slot name="right" />
      </template>
    </k-navigation-bar>
  </view>
</template>

<script lang="ts">
import props from '../k-navigation-bar/props';
import { isInAppWebView, isInWeixinH5 } from '../../utils';
import {
  getNavigationBarHeight,
  getMenuButtonBoundingClientRect,
} from '../../utils/device';
import Vue, { VueConstructor } from 'vue';
type PropType = {
  [Property in keyof typeof props.props]: typeof props.props[Property]['default'];
};
export default (Vue as VueConstructor<Vue & PropType>).extend({
  name: 'k-navigation-bar-h5',
  mixins: [props],
  data() {
    return {
      isWeixinH5: true,
    };
  },
  computed: {
    navigationBarHeight: function () {
      return getNavigationBarHeight();
    },
    menu: function () {
      return getMenuButtonBoundingClientRect();
    },
  },
  methods: {
    back: function () {
      // 页面栈中只有当前页，且传入了 defaultBackUrl，则去往 defaultBackUrl
      if (getCurrentPages().length == 1 && this.defaultBackUrl) {
        uni.redirectTo({
          url: this.defaultBackUrl,
        });
        return;
      }

      if (getCurrentPages().length < this.backDelta) {
        this.toHome();
      } else if (getCurrentPages().length > 1) {
        uni.navigateBack({
          delta: this.backDelta,
        });
      } else if (this.backToTabbar) {
        this.toHome();
      }
    },
    toHome: function () {
      if (isInAppWebView()) {
        (uni as any).webView.postMessage({
          data: {
            action: 'BACK',
          },
        });
        return;
      }

      this.clickHomeIcon();
    },
  },
  created: function () {
    this.isWeixinH5 = isInWeixinH5();
  },
});
</script>

<style scoped lang="scss">
.navigation-bar {
  width: 100%;
  background: var(--k-bg-color-navigation-bar, #f4f7ff);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  display: flex;
  flex-flow: row nowrap;
}

.transparent {
  background: transparent;
}

.capsule {
  display: flex;
  flex-flow: row nowrap;
  flex: 0 0 auto;
  align-items: center;
  position: fixed;
  left: 24rpx;
  height: 64rpx;
  z-index: 99;

  .back {
    flex: 1;
    display: flex;
    align-items: center;
    height: 46rpx;
    width: 46rpx;
  }
}

.right-link {
  font-size: 19px;
  line-height: 24px;
  font-weight: 400;
  position: absolute;
  bottom: 10px;
  right: 0;
  text-transform: capitalize;
  margin-right: 24rpx;
}
</style>
