<template>
  <div
    class="nut-tabbar-item"
    :class="{ 'nut-tabbar-item__icon--unactive': !active }"
    :style="{
      color: active ? state.activeColor : state.unactiveColor
    }"
    @click="change()"
  >
    <view class="nut-tabbar-item_icon-box">
      <template v-if="!dot">
        <view class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_num" v-if="num && num <= 99">
          {{ num }}
        </view>
        <view class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_nums" v-else-if="num && num > 100">{{
          '99+'
        }}</view>
      </template>
      <template v-if="dot">
        <div class="nut-tabbar-item_icon-box_dot"></div>
      </template>

      <view v-if="icon">
        <nut-icon
          class="nut-tabbar-item_icon-box_icon"
          :size="state.size"
          :name="icon"
          :font-class-name="fontClassName"
          :class-prefix="classPrefix"
        ></nut-icon>
      </view>
      <div
        v-if="!icon && activeImg"
        class="nut-tabbar-item_icon-box_icon"
        :style="{
          backgroundImage: `url(${active ? activeImg : img})`,
          width: state.size,
          height: state.size
        }"
      ></div>
      <view
        :class="['nut-tabbar-item_icon-box_nav-word', { 'nut-tabbar-item_icon-box_big-word': !icon && !activeImg }]"
      >
        <view v-if="tabTitle">{{ tabTitle }}</view>
        <slot v-if="!tabTitle"></slot>
      </view>
    </view>
  </div>
</template>
<script lang="ts">
import { createComponent } from '../../utils/create';
import { useRouter } from '../../utils/useRoute';
import { ComponentInternalInstance, computed, getCurrentInstance, inject, onMounted, reactive, watch } from 'vue';
const { create } = createComponent('tabbar-item');
export default create({
  props: {
    tabTitle: {
      // 标签页的标题
      type: String,
      default: ''
    },
    name: {
      type: String
    },
    icon: {
      // 标签页显示的icon
      type: String,
      default: ''
    },
    href: {
      // 标签页的跳转链接
      type: String,
      default: ''
    },
    num: {
      // 页签右上角的数字角标
      type: String,
      default: ''
    },
    activeImg: {
      type: String,
      default: ''
    },
    img: {
      type: String,
      default: ''
    },
    classPrefix: {
      type: String,
      default: 'nut-icon'
    },
    dot: {
      type: Boolean,
      default: false
    },
    fontClassName: {
      type: String,
      default: 'nutui-iconfont'
    },
    to: [Object, String]
  },
  options: {
      virtualHost : true
  },
  setup(props, ctx) {
    const parent: any = inject('parent');
    const state = reactive({
      size: parent.size,
      unactiveColor: parent.unactiveColor, // 未选中的颜色
      activeColor: parent.activeColor, // 选中的颜色
      active: parent.modelValue, // 是否选中
      index: 0
    });
    const router = useRouter();
    const relation = (child: ComponentInternalInstance): void => {
      if (child.proxy) {
        parent.children.push(child.proxy);
        const index = computed(() => parent.children.indexOf(child.proxy));
        state.index = props.name ?? index.value;
      }
    };
    relation(getCurrentInstance() as ComponentInternalInstance);
    const active = computed(() => state.index === state.active);

    function change() {
      let key = props.name ?? state.index;
      let index = null;
      if (props.name) {
        index = parent.children.findIndex((item: any) => {
          return item.name == key;
        });
      }
      parent.changeIndex(index ?? key, state.index);
    }
    const choosed = computed(() => {
      if (parent) {
        return parent.modelValue;
      }
      return null;
    });
    watch(choosed, (value, oldValue) => {
      state.active = value;
      let index = value;
      if (props.name) {
        index = parent.children.findIndex((item: any) => {
          return item.name == value;
        });
      }
      setTimeout(() => {
        if (parent.children[index].href) {
          window.location.href = parent.children[index].href;
          return;
        }
        if (parent.children[index].to) {
          let to = parent.children[index].to;
          if (to && router) {
            router.push(to);
          } else {
            location.replace(to);
          }
        }
      });
    });
    return {
      state,
      active,
      change
    };
  }
});
</script>
<style lang="scss">
@import './index.scss'
</style>
