<template>
  <view
    class="k-tabbar__wrap"
    :class="{
      'k-tabbar__fixed': isFixed,
      'has-safe-area': safeAreaH > 0 && isFixed,
    }"
    :style="{ background: background, zIndex: zIndex }"
  >
    <view
      class="k-tabbar__inner"
      :class="{ 'k-tabbar__border': isBorder }"
      :style="{
        borderTopColor: isBorder && isNvue ? borderColor : 'transparent',
      }"
    >
      <view
        class="k-tabbar__item"
        v-for="(item, index) in tabs"
        :key="index"
        @tap="itemClick(index)"
      >
        <view
          class="k-tabbar__icon-wrap"
          :style="{
            width:
              (isNvue && item.midButton && item.width ? item.width : 48) +
              'rpx',
            height:
              (isNvue && item.midButton && item.height ? item.height : 48) +
              'rpx',
          }"
          v-if="item.iconPath"
        >
          <image
            class="k-tabbar__icon"
            :src="current == index ? item.selectedIconPath : item.iconPath"
            v-if="!item.midButton"
          ></image>
          <!-- #ifdef APP-NVUE -->
          <image
            v-if="item.midButton"
            class="k-tabbar__icon"
            :src="item.iconPath"
            :style="{
              width: (item.width || 48) + 'rpx',
              height: (item.height || 48) + 'rpx',
            }"
          >
          </image>
          <!-- #endif -->
          <text
            :class="[
              item.dot ? 'k-tabbar__dot' : 'k-tabbar__badge',
              badgeBackground ? '' : 'k-tabbar__badge-color',
            ]"
            :style="{
              background: badgeBackground,
              color: badgeColor,
              width: getWidth(item.badge, item.dot),
            }"
            v-if="item.badge"
            >{{ item.dot ? '' : item.badge }}</text
          >
        </view>
        <text
          class="k-tabbar__text"
          :class="{
            'k-tabbar__selected-color': !selectedColor && current == index,
          }"
          :style="{
            fontSize: size + 'rpx',
            fontWeight: fontWeight,
            color:
              current == index
                ? selectedColor
                : item.midButton
                ? item.color || color
                : color,
          }"
          v-if="item.text"
          >{{ item.text }}</text
        >

        <!-- #ifndef APP-NVUE -->
        <image
          v-if="item.midButton"
          class="k-tabbar__mid-button"
          :class="{ 'k-tabbar__mid-center': item.center }"
          :src="item.iconPath"
          :style="{
            width: (item.width || 48) + 'rpx',
            height: (item.height || 48) + 'rpx',
            bottom: item.bottom + 'rpx',
          }"
        >
        </image>
        <!-- #endif -->
      </view>
    </view>
    <view
      class="k-tabbar__safe-area"
      :class="{ 'k-tabbar__safe-weex': safeAreaH > 0 }"
      v-if="(safeAreaH > 0 || !isNvue) && isFixed"
    ></view>
  </view>
</template>

<script lang="ts">
import Vue, { VueConstructor } from 'vue';
import props from './props';
type TabBarMidButton = {
  text: string;
  iconPath: string;
  midButton: true;
  width?: number;
  height?: number;
  bottom?: number;
};
type TabBarItem = {
  text?: string;
  iconPath?: string;
  selectedIconPath?: string;
  badge?: number;
  dot?: boolean;
};
type TabBarProp = Array<TabBarItem | TabBarMidButton> | string[];
type PropType = {
  tabBar: TabBarProp;
  //当前索引
  current: number;
  //字体大小
  size: number | string;
  //字重
  fontWeight: number | string;
  //字体颜色
  color: string;
  //字体选中颜色
  selectedColor: string;
  //背景颜色
  background: string;
  //是否显示上边框
  isBorder: boolean;
  //上边框颜色
  borderColor: string;
  //固定在底部
  isFixed: boolean;
  //角标字体颜色
  badgeColor: string;
  //角标背景颜色
  badgeBackground: string;
  //z-index
  zIndex: number;
};
export default (Vue as VueConstructor<Vue & PropType>).extend({
  name: 'k-tabbar',
  mixins: [props],
  watch: {
    tabBar(vals: TabBarProp) {
      this.initData(vals);
    },
  },
  data() {
    let isNvue = false;
    // #ifdef APP-NVUE
    isNvue = true;
    // #endif
    let tabs: Array<TabBarItem | TabBarMidButton> = [];
    return {
      tabs,
      safeAreaH: 0,
      isNvue: isNvue,
    };
  },
  created() {
    // #ifdef APP-NVUE || MP-TOUTIAO
    this.safeAreaH = this.isPhoneX() ? 34 : 0;
    // #endif
    // #ifndef APP-NVUE || MP-TOUTIAO
    const res = uni.getSystemInfoSync();
    // eslint-disable-next-line no-console
    // console.log(res.safeAreaInsets);
    this.safeAreaH = res.safeAreaInsets
      ? Math.abs(res.safeAreaInsets.bottom)
      : 0;
    // #endif
    this.$emit('init', {
      // 这里固定用 142 ，
      // 在有底部安全区域时内容区的 padding- bottom 多一点页没关系
      height: uni.upx2px(142) + this.safeAreaH,
    });
    this.initData(this.tabBar);
  },
  methods: {
    initData(vals: TabBarProp) {
      if (vals && vals.length > 0) {
        if (typeof vals[0] === 'string') {
          this.tabs = (vals as string[]).map((item) => {
            return {
              text: item,
            };
          });
        } else {
          this.tabs = vals as Array<TabBarItem | TabBarMidButton>;
        }
      }
    },
    // #ifdef APP-NVUE || MP-TOUTIAO
    isPhoneX() {
      //34px
      const res = uni.getSystemInfoSync();
      let iphonex = false;
      let models = [
        'iphonex',
        'iphonexr',
        'iphonexsmax',
        'iphone11',
        'iphone11pro',
        'iphone11promax',
        'iphone12',
        'iphone12mini',
        'iphone12pro',
        'iphone12promax',
        'iphone13',
        'iphone13mini',
        'iphone13pro',
        'iphone13promax',
        'iphone14',
        'iphone14mini',
        'iphone14pro',
        'iphone14promax',
      ];
      const model = res.model.replace(/\s/g, '').toLowerCase();
      if (
        models.includes(model) ||
        (res.safeAreaInsets && res.safeAreaInsets.bottom)
      ) {
        iphonex = true;
      }
      return iphonex;
    },
    // #endif
    getWidth(value: number, dot: boolean) {
      return dot ? '16rpx' : String(value).length * 12 + 20 + 'rpx';
    },
    itemClick(index: number) {
      this.$emit('click', {
        index: index,
        ...this.tabs[index],
      });
    },
  },
});
</script>

<style scoped>
/* stylelint-disable selector-class-pattern */
/* stylelint-disable declaration-no-important */
/* stylelint-disable comment-empty-line-before */
.k-tabbar__wrap {
  /* #ifndef APP-NVUE */
  width: 100%;
  background-color: var(--k-color-primary-01, #064c8a);
  /* #endif */
}

.k-tabbar__fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

.k-tabbar__inner {
  position: relative;
  /* #ifndef APP-NVUE */
  width: 100%;
  display: flex;
  /* #endif */
  flex: 1;
  height: 142rpx;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.k-tabbar__border {
  /* #ifdef APP-NVUE */
  border-top-width: 0.5px;
  border-top-style: solid;
  /* #endif */
}

/* #ifndef APP-NVUE */
.k-tabbar__border::before {
  content: " ";
  border-top: 1px solid var(--k-color-neutral-03, #999);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: scaleY(0.5) translateZ(0);
  transform-origin: 0 0;
  display: block;
  z-index: 3;
}
/* #endif */

.k-tabbar__item {
  flex: 1;
  height: 142rpx;
  /* #ifndef APP-NVUE */
  display: flex;
  flex-shrink: 0;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* #ifdef H5 */
  cursor: pointer;
  /* #endif */
  position: relative;
}

.k-tabbar__icon-wrap {
  width: 48rpx;
  height: 48rpx;
  position: relative;
}

.k-tabbar__badge {
  position: absolute;
  height: 32rpx;
  padding: 0 8rpx;
  color: #fff;
  font-size: 24rpx;
  line-height: 32rpx;
  border-radius: 16rpx;
  /* #ifndef APP-NVUE */
  min-width: 32rpx !important;
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  right: -20rpx;
  top: 0;
  z-index: 10;
  text-align: center;
}

.k-tabbar__dot {
  position: absolute;
  height: 16rpx;
  width: 16rpx;
  /* #ifndef APP-NVUE */
  border-radius: 50%;
  /* #endif */

  /* #ifdef APP-NVUE */
  border-radius: 8rpx;
  /* #endif */
  right: -4rpx;
  top: -4rpx;
}

.k-tabbar__text {
  padding-top: 12rpx;
}

.k-tabbar__icon {
  width: 48rpx;
  height: 48rpx;
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
}

/* #ifndef APP-NVUE */
.k-tabbar__mid-button {
  position: absolute;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.k-tabbar__mid-center {
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* #endif */

/* #ifdef APP-NVUE || MP-TOUTIAO */
.k-tabbar__safe-weex {
  padding-bottom: 34px;
}

/* #endif */
.k-tabbar__safe-area {
  /* #ifndef APP-NVUE */
  width: 100%;
  display: flex;
  /* #endif */

  /* #ifndef APP-NVUE || MP-TOUTIAO */
  /* stylelint-disable-next-line function-no-unknown */
  padding-bottom: calc(constant(safe-area-inset-bottom) - 10px);
  padding-bottom: calc(env(safe-area-inset-bottom) - 10px);
  /* #endif */
  flex: 1;
  flex-direction: row;
  background-color: transparent;
}

/* #ifndef APP-NVUE */
/* selectedColor 为空时，选中状态下的字体颜色 */
.k-tabbar__selected-color {
  color: var(--k-color-primary-01, #064c8a) !important;
}

.k-tabbar__badge-color {
  background: #ee4d3f !important;
}
/* #endif */

.k-tabbar__wrap.has-safe-area .k-tabbar__inner {
  padding-top: 32rpx;
  height: 100rpx;
}

.k-tabbar__wrap.has-safe-area .k-tabbar__item {
  height: 100rpx;
}
</style>
