<template>
  <router-view />
  <van-tabbar route v-if="!hide_bottom_tab && user.enabled && user.is_registered && current_role && user.real_name" :before-change="tab_change_check">
    <van-tabbar-item name="首页" replace to="/" icon="home-o">首页</van-tabbar-item>
    <template v-if="is_student">
      <van-tabbar-item name="课程" replace to="/clazz" icon="calendar-o">课程</van-tabbar-item>
      <van-tabbar-item name="打卡" replace to="/daka" icon="completed-o">打卡</van-tabbar-item>
    </template>
    <template v-if="is_teacher">
      <van-tabbar-item name="教学资源库" replace to="/course/summary" icon="music-o">教学资源库</van-tabbar-item>
      <van-tabbar-item name="课程" replace to="/clazz" icon="calendar-o">课程</van-tabbar-item>
      <van-tabbar-item name="打卡" replace to="/daka" icon="completed-o">打卡</van-tabbar-item>
    </template>
    <template v-if="is_admin">
      <van-tabbar-item name="教师管理" replace to="/admin/teachers" icon="manager-o">教师管理</van-tabbar-item>
      <van-tabbar-item name="课程体系类型" replace to="/admin/course-category" icon="music-o">课程体系类型</van-tabbar-item>
    </template>
    <template v-if="is_tester">
    </template>
    <van-tabbar-item name="我的" replace :to="`/${current_role}/profile`" :badge="user.unread_tongzhi_count" :badge-props="badge_props" icon="user-o">我的</van-tabbar-item>
  </van-tabbar>
  <van-tabbar route v-else-if="is_guest" :before-change="tab_change_check">
    <van-tabbar-item name="首页" replace to="/" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item name="我的" replace to="/guest/profile" icon="user-o">我的</van-tabbar-item>
  </van-tabbar>
  <van-overlay :show="!!loading" :style="{zIndex: 3000}">
    <div class="loading">
      <van-loading type="spinner" color="#ffffff" />
    </div>
  </van-overlay>
</template>

<script lang="ts">
import {computed, defineComponent, onMounted, watch} from 'vue';
import {Tabbar, TabbarItem, Overlay, Loading, BadgeProps, showConfirmDialog} from 'vant';
import useUser from "~/store/user";
import {isIOS, WebViewEntryUrl} from '~/utils';
import {HtyBaseRoles, HtyStates, HtySuperRoles} from "~/types";
import useLoading from "~/store/loading";
import usePool from "~/store/pool";

export default defineComponent({
  name: "App",
  components: {
    [Tabbar.name!]: Tabbar,
    [TabbarItem.name!]: TabbarItem,
    [Overlay.name!]: Overlay,
    [Loading.name!]: Loading
  },
  setup() {
    let {store} = useUser();
    const { loading } = useLoading();
    const {getKey} = usePool()
    if (isIOS()) {
      console.log('href...', window.location.href)
      window.localStorage.setItem(WebViewEntryUrl, window.location.href);
    }

    const user = computed(() => store.current)
    const is_student = computed(() => store.currentRole === HtyBaseRoles.STUDENT);
    const is_teacher = computed(() => store.currentRole === HtyBaseRoles.TEACHER);
    const is_admin = computed(() => store.currentRole === HtySuperRoles.ADMIN)
    const is_tester = computed(() => store.currentRole === HtySuperRoles.TESTER);
    const is_supervisor = computed(() => store.currentRole === HtySuperRoles.SUPERVISOR);
    const current_role = computed(() => store.currentRole?.toLowerCase())
    const is_guest = computed(() => !user.value.is_registered || !user.value.enabled)

    console.log(user.value, is_guest.value)

    const badge_props: Partial<BadgeProps> = { showZero: false, max: 99 }

    onMounted(() => {
      let vconsole = document.getElementById("__vconsole");
      if (vconsole) {
        vconsole.hidden = true;
      }
    })

    watch(() => store.current, () => {
      let haveTester = store.current.roles?.some(r => r.role_status === HtyStates.ACTIVE && r.labels?.some(l => l.label_name === 'SYS_TESTER' && l.label_status === HtyStates.ACTIVE));
      console.log('has tester...', haveTester, store.current.roles)
      let vconsole = document.getElementById("__vconsole");
      if (vconsole) {
        vconsole.hidden = !haveTester;
      }
    })

    const tab_change_check = (name: number | string) => {
      console.log('tab change...', name, is_guest.value, is_teacher.value, store.currentRole)
      if (store.editing) {
        return showConfirmDialog({
          title: "注意！",
          message: `您正在编辑的内容将会丢失，确认跳转到【${name}】页面？`
        })
      }
      return true;
    }

    const hide_bottom_tab = computed(() => getKey("hide_bottom_tab"))


    return {user, is_student, is_teacher, is_admin, is_tester, is_guest, current_role, loading, badge_props, tab_change_check, hide_bottom_tab}
  }
});
</script>

<style scoped lang="less">
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
