import {
  defineComponent,
  watch,
  reactive,
  ref,
  onMounted,
  nextTick
} from 'vue';
import styles from './index.module.less';
import MHeader from '@/components/m-header';
import MFooter from '@/components/m-footer';
import { Tab, Tabs } from 'vant';
import aiBanner from './images/co-ai/banner.png';
import musicBanner from './images/music-room/banner.png';
import CoAi from './co-ai';
import PianoRoom from './piano-room';
import MusicRoom from './music-room';
import CoTenant from './co-tenant';
import CoPerson from './co-person';
import { useRoute } from 'vue-router';
// import { useResizeObserver, useWindowScroll } from '@vueuse/core';

export default defineComponent({
  name: 'home-page',
  setup() {
    const route = useRoute();
    const changeBanner = (val: number) => {
      if (val === 1) {
        return aiBanner;
      } else if (val === 2) {
        return 'https://oss.dayaedu.com/klx/1699519482956single1.png';
      } else if (val === 3) {
        return musicBanner;
      } else if (val === 4) {
        return 'https://oss.dayaedu.com/klx/1699439591804banner.png';
      } else if (val === 5) {
        return 'https://oss.dayaedu.com/klx/1699439359542banner.png';
      } else {
        return aiBanner;
      }
    };

    const state = reactive({
      activeTab: route.query.tab ? Number(route.query.tab) : 1,
      banner: changeBanner(route.query.tab ? Number(route.query.tab) : 1),
      headerHeight: 0
    });

    // const headerRef = ref<HTMLElement | null>(null);
    // const tabRef = ref<HTMLElement | null>(null);
    // const { x, y } = useWindowScroll();

    // onMounted(() => {
    //   nextTick(() => {
    //     try {
    //       useResizeObserver(headerRef.value, (entries: any) => {
    //         const entry = entries[0];
    //         const { height } = entry.contentRect;
    //         state.headerHeight = height;
    //       });
    //     } catch {
    //       //
    //     }
    //   });
    // });
    // watch(
    //   () => y.value,
    //   () => {
    //     console.log(y.value, state.headerHeight);
    //     if (state.headerHeight > 0 && y.value >= state.headerHeight) {
    //       console.log(document.querySelector('.van-sticky'));
    //       document
    //         .querySelector('.van-sticky')
    //         ?.classList.add('van-sticky--fixed');
    //     } else {
    //       document
    //         .querySelector('.van-sticky')
    //         ?.classList.remove('van-sticky--fixed');
    //     }
    //   }
    // );
    return () => (
      <div class={styles.home}>
        <MHeader />

        <div class={styles.banner}>
          <img class={styles.bannerImg} src={state.banner} />
        </div>

        <Tabs
          v-model:active={state.activeTab}
          lazyRender
          class={styles.tabs}
          lineHeight={0}
          shrink
          // sticky
          // swipeable
          onUpdate:active={(val: number) => {
            state.banner = changeBanner(val);
          }}>
          <Tab title={'小酷Ai'} name={1}>
            <CoAi />
          </Tab>
          <Tab title="云酷琴房" name={2}>
            <PianoRoom />
          </Tab>
          <Tab title="音乐数字课堂" name={3}>
            <MusicRoom />
          </Tab>
          <Tab title="酷乐秀机构版" name={4}>
            <CoTenant />
          </Tab>
          <Tab title="酷乐秀个人版" name={5}>
            <CoPerson />
          </Tab>
        </Tabs>

        <MFooter />
      </div>
    );
  }
});
