<template>
  <view
    :class="transparent ? 'navigation-bar transparent' : 'navigation-bar'"
    :style="{ height: navigationBarHeight + 'px' }"
  >
    <view
      class="capsule"
      v-if="showLeftCapsule"
      :style="{
        top: menu.top + 'px',
      }"
    >
      <view class="back" @click="back">
        <!-- <k-icon :name="'back-' + navStyle" /> -->
        <k-icon
          name="back"
          :size="14"
          :color="navStyle == 'white' ? '#fff' : '#333'"
        />
      </view>
      <view class="home" @click="toHome" v-if="showHomeButton">
        <!-- <k-icon :name="'home-' + navStyle" /> -->
        <k-icon
          name="home"
          :size="19"
          :color="navStyle == 'white' ? '#fff' : '#333'"
        />
      </view>
    </view>
    <view :class="'title ' + navStyle">
      <text
        v-if="title"
        class="title-text"
        :style="{
          lineHeight: menu.height + 'px',
        }"
        >{{ title }}</text
      >
      <slot v-else class="title-text"></slot>
    </view>
    <view
      :style="{ color: rightLinkColor, marginRight: '10px' }"
      @click="rightLinkClick"
      class="right-link"
    >
      <slot name="right"></slot>
    </view>
  </view>
</template>

<script lang="ts">
import props from './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',
  mixins: [props],
  computed: {
    navigationBarHeight: function () {
      return getNavigationBarHeight();
    },
    menu: function () {
      return getMenuButtonBoundingClientRect();
    },
  },
  methods: {
    back: function () {
      // eslint-disable-next-line no-console
      console.log(1111);
      // 页面栈中只有当前页，且传入了 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;
      }

      // TODO mp 中不行？？
      // this.clickHomeIcon();
      (uni as any).$k.props.navigationBar.clickHomeIcon();
    },
    rightLinkClick() {
      if (!this.rightLink) return;
      uni.navigateTo({
        url: this.rightLink,
      });
    },
  },
  created: function () {
    // #ifdef MP-WEIXIN
    try {
      uni.setNavigationBarColor({
        frontColor: this.navStyle === 'black' ? '#000000' : '#ffffff',
        backgroundColor: '#F4F7FF',
      });
    } catch {}
    // #endif
  },
});
</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 {
  // position: absolute;
  // background: rgba(0, 0, 0, 0.15);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  position: fixed;
  flex: 0 0 auto;
  left: 24rpx;
  height: 64rpx;
  z-index: 99;

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

  .home {
    flex-direction: row-reverse;
    padding-right: 10px;
  }
}

.title {
  color: #fff;
  font-size: 19px;
  line-height: 32px;
  font-weight: 500;
  bottom: 5px;
  text-transform: capitalize;
  position: relative;
  box-sizing: border-box;
  flex: 1;
  overflow: hidden;

  .title-text {
    width: 100%;
    box-sizing: border-box;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    bottom: 0;
    text-align: center;
    padding-left: 85px;
    // TODO
    // 85px 其实不够，在小程序上右侧胶囊的 left 位置大概在 110px
    // 但是我们的左侧胶囊的 right 在 58 px
    // 两个值不一样，text-align 没法居中
    padding-right: 85px;
  }
}

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

.title.black {
  color: #000;
}
</style>
