import { computed, defineComponent, ref } from 'vue';
import './index.less';
import TabsSvg from '@/assets/svg/header/tab.svg';
import LogoSvg from '@/assets/logo.svg';
import HomeSvg from '@/assets/svg/header/home.svg';
import RaffleSvg from '@/assets/svg/header/raffle.svg';
import LpSvg from '@/assets/svg/header/lp.svg';
import { RouterView, useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import SelectLanguage from '@/components/SelectLanguage';
import FoxWallet from './FoxWallet';
import { getCurrentDevice } from '@/utils/tool';
export default defineComponent({
  setup(props) {
    let navStatusKey = 'navstatus';
    const route = useRoute();
    const router = useRouter();
    const { t } = useI18n();
    // 当前路由
    const currentRoute = ref<string>(route.path);
    // 文字要加个延迟显示
    const navTextShow = ref<boolean>(false);
    // 获取nav默认状态
    const getNavDefaultStatus = () => {
      // 还需判断是否为手机端
      let is_mobile = getCurrentDevice();
      if (is_mobile) {
        navTextShow.value = false;
        return 'close';
      }
      let status = window.localStorage.getItem(navStatusKey);
      if (status) {
        if (status == 'open') {
          navTextShow.value = true;
        } else {
          navTextShow.value = false;
        }
        return status;
      }
      // 默认展开
      navTextShow.value = true;
      return 'open';
    };
    // nav当前状态-默认展开
    const navStatus = ref<string>(getNavDefaultStatus());
    const tabOptions = computed(() => [
      {
        icon: <HomeSvg></HomeSvg>,
        label: t('layout.Home'),
        value: '/',
        disable: true,
      },
      {
        icon: <RaffleSvg></RaffleSvg>,
        label: t('layout.raffle'),
        value: '/raffle',
        disable: false,
      },
      {
        icon: <LpSvg></LpSvg>,
        label: t('layout.lp'),
        value: '/lp',
        disable: true,
      },
    ]);
    const backImg = new URL('@/assets/img/body.png', import.meta.url).href;

    // 切换导航栏展示形式
    const changeNavStatus = () => {
      if (navStatus.value == 'open') {
        navStatus.value = 'close';
        navTextShow.value = false;
      } else {
        navStatus.value = 'open';
        setTimeout(() => {
          navTextShow.value = true;
        }, 100);
      }
      // 存到本地
      window.localStorage.setItem(navStatusKey, navStatus.value);
    };
    // 关闭nav
    const CloseMask = () => {
      navStatus.value = 'close';
      navTextShow.value = false;
    };
    // 判断当前路由
    const getCurRoute = (value: string) => {
      if (value == '/raffle' && currentRoute.value.indexOf('/raffle') != -1) {
        return 'nav-icon-active';
      }
      return currentRoute.value == value ? 'nav-icon-active' : '';
    };
    const NavChange = (item: any) => {
      if (item.disable) {
        return;
      }
      navStatus.value = 'open';
      setTimeout(() => {
        navTextShow.value = true;
      }, 100);
      currentRoute.value = item.value;
      router.push({
        path: item.value,
      });
    };
    return () => (
      <header class="custom-nav">
        <img class="custom-background" src={backImg} alt="" />
        <div class="custom-header">
          <div class="header-left">
            <span
              class="custom-systole-tab-icon"
              onClick={changeNavStatus.bind(this)}
            >
              <TabsSvg></TabsSvg>
            </span>
            <div class="custom-web-logo">
              <LogoSvg></LogoSvg>
            </div>
          </div>
          <div class="header-right">
            <SelectLanguage></SelectLanguage>
            <FoxWallet></FoxWallet>
          </div>
        </div>
        <div class="custom-tabs">
          <div
            class={[
              'custom-tab-nav',
              navStatus.value == 'close' ? 'custom-close-nav' : '',
            ]}
          >
            <div class="nav-item-fa">
              {tabOptions.value.map((item: any) => (
                <div
                  class={['nav-item', item.disable ? 'disable' : '']}
                  onClick={NavChange.bind(this, item)}
                >
                  <div
                    v-show={navStatus.value == 'open'}
                    class={[
                      currentRoute.value == item.value ? 'line' : '',
                      'default-line',
                    ]}
                  ></div>
                  <div class={['nav-icon', getCurRoute(item.value)]}>
                    {item.icon}
                    <span
                      class="nav-text"
                      v-show={navStatus.value == 'open' && navTextShow.value}
                    >
                      {item.label}
                    </span>
                  </div>
                </div>
              ))}
              {getCurrentDevice() ? (
                <div class="mobile-nav-mask" onClick={CloseMask}></div>
              ) : (
                ''
              )}
            </div>
          </div>
          <div class="custom-content custom-scrollbar">
            <RouterView></RouterView>
          </div>
        </div>
      </header>
    );
  },
});
