import { defineComponent, onMounted, ref } from 'vue';
import styles from './index.module.less';
import logoLarge from '@common/assets/logo-large.png';
import { Cell, Popup } from 'vant';
import { useRoute, useRouter } from 'vue-router';
import { useResizeObserver } from '@vueuse/core';

export default defineComponent({
  name: 'm-header',
  emits: ['height'],
  setup(props, { emit }) {
    const route = useRoute();
    const router = useRouter();
    const isActive = ref(false);
    const showMenu = ref(false);
    const arrowStatus = ref(false);
    const headerRef = ref();

    const onGoDetail = (path: string) => {
      showMenu.value = false;
      isActive.value = false;
      router.push(path);
    };

    onMounted(() => {
      if (
        ['/music-classroom', '/colexiu-tenant', '/colexiu-person'].includes(
          route.path
        )
      ) {
        arrowStatus.value = true;
      }

      try {
        useResizeObserver(headerRef.value, (entries: any) => {
          const entry = entries[0];
          const { height } = entry.contentRect;
          emit('height', height);
        });
      } catch {
        //
      }
    });
    return () => (
      <div class={styles.headerSection} id="headerSection">
        <div class={styles.header} ref={headerRef}>
          <img
            class={styles.logo}
            src={logoLarge}
            onClick={() => router.push('/')}
          />
          <div
            class={[styles.navMenu, isActive.value && styles['is-active']]}
            onClick={() => {
              isActive.value = !isActive.value;
              showMenu.value = !showMenu.value;
            }}>
            <span class={[styles.line, styles.line1]}></span>
            <span class={[styles.line, styles.line2]}></span>
            <span class={[styles.line, styles.line3]}></span>
          </div>
        </div>

        <Popup
          position="top"
          v-model:show={showMenu.value}
          class={styles.menuPopup}
          onUpdate:show={(val: boolean) => {
            isActive.value = val;
          }}
          teleport={'body'}>
          <div class="van-hairline--top">
            <Cell
              title={'首页'}
              border={false}
              clickable
              class={
                ['/', '/colexiu-technology'].includes(route.path) &&
                styles['is-active']
              }
              onClick={() => onGoDetail('/')}></Cell>
            <Cell
              title={'产品'}
              clickable
              border={false}
              class={['/home'].includes(route.path) && styles['is-active']}
              onClick={() => onGoDetail('/home')}></Cell>
            <Cell
              title={'解决方案'}
              isLink
              clickable
              arrowDirection={arrowStatus.value ? 'up' : 'down'}
              border={false}
              onClick={() => (arrowStatus.value = !arrowStatus.value)}></Cell>
            <div
              class={[styles.subCell, arrowStatus.value && styles.arrowActive]}>
              <Cell
                title={'数字化音乐课堂'}
                clickable
                border={false}
                class={
                  ['/music-classroom'].includes(route.path) &&
                  styles['is-active']
                }
                onClick={() => onGoDetail('/music-classroom')}></Cell>
              <Cell
                title={'器乐教培行业解决方案'}
                clickable
                border={false}
                class={
                  ['/colexiu-tenant'].includes(route.path) &&
                  styles['is-active']
                }
                onClick={() => onGoDetail('/colexiu-tenant')}></Cell>
              <Cell
                title={'音乐达人展示平台'}
                clickable
                border={false}
                class={
                  ['/colexiu-person'].includes(route.path) &&
                  styles['is-active']
                }
                onClick={() => onGoDetail('/colexiu-person')}></Cell>
            </div>
            <Cell
              title={'渠道合作'}
              border={false}
              clickable
              class={
                ['/cooperate-channels'].includes(route.path) &&
                styles['is-active']
              }
              onClick={() => onGoDetail('/cooperate-channels')}></Cell>
            <Cell
              title={'关于我们'}
              clickable
              border={false}
              class={['/about-us'].includes(route.path) && styles['is-active']}
              onClick={() => onGoDetail('/about-us')}></Cell>
          </div>
        </Popup>
      </div>
    );
  }
});
