import { defineComponent, reactive } 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 painoBanner from './images/piano-room/banner.png';
import musicBanner from './images/music-room/banner.png';
import tenantBanner from './images/co-tenant/banner.png';
import personBanner from './images/co-person/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';

export default defineComponent({
  name: 'home-page',
  setup() {
    const state = reactive({
      activeTab: 1,
      banner: aiBanner
    });
    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
          onUpdate:active={(val: number) => {
            if (val === 1) {
              state.banner = aiBanner;
            } else if (val === 2) {
              state.banner = painoBanner;
            } else if (val === 3) {
              state.banner = musicBanner;
            } else if (val === 4) {
              state.banner = tenantBanner;
            } else if (val === 5) {
              state.banner = personBanner;
            }
          }}>
          <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>
    );
  }
});
