import { Tab, Tabs } from 'vant'
import { defineComponent, onMounted, ref } from 'vue'
import AlbumList from '../album'
import Practice from './practice'
import Personal from './personal'
import Collection from './collection'
import Album from './album'
import AlbumMy from './album-my'
import bgImg from '../../images/bg-image-1.png'
import styles from './index.module.less'
import { getRandomKey } from '../music'
import { useEventTracking } from '@/helpers/hooks'
import TheSticky from '@/components/the-sticky'
import ColHeader from '@/components/col-header'
import TenantAlbum from './tenant-album'

export default defineComponent({
  name: 'MusicPersonal',
  setup() {
    localStorage.setItem('behaviorId', getRandomKey())
    const activeTab = ref('train-course')
    const personal = ref()
    const collection = ref()
    const practice = ref()
    onMounted(() => {
      useEventTracking('我的乐谱')
    })
    return () => {
      return (
        <div class={styles.personal}>
          <TheSticky position="top">
            <ColHeader
              background="transparent"
              isFixed={false}
              border={false}
              color="#131415"
            />
          </TheSticky>
          <img class={styles.bgImg} src={bgImg} />
          <Practice
            ref={practice}
            onFavorite={() => {
              if (activeTab.value === 'personal') {
                personal.value?.reset?.()
              } else if (activeTab.value === 'collection') {
                collection.value?.reset?.()
              }
            }}
          />
          <Tabs
            color="var(--van-primary)"
            background="transparent"
            lineWidth={20}
            shrink
            v-model:active={activeTab.value}
            onChange={val => (activeTab.value = val)}
          >
            <Tab title="训练教程" name="train-course"></Tab>
            <Tab title="我的单曲" name="personal"></Tab>
            <Tab title="我的专辑" name="personal-album"></Tab>
            <Tab title="收藏单曲" name="collection"></Tab>
            <Tab title="收藏专辑" name="album"></Tab>
            {/* <Tab title="赠送单曲" name="personal-gift"></Tab>
            <Tab title="赠送专辑" name="album-gift"></Tab> */}
          </Tabs>
          {activeTab.value === 'train-course' && <TenantAlbum />}
          {(activeTab.value === 'personal' ||
            activeTab.value === 'personal-gift') && (
            <Personal
              ref={personal}
              gift={activeTab.value === 'personal-gift' ? 1 : 0}
              onFavorite={() => {
                practice.value?.reload?.()
              }}
            />
          )}
          {(activeTab.value === 'personal-album' ||
            activeTab.value === 'album-gift') && (
            <AlbumMy gift={activeTab.value === 'album-gift' ? 1 : 0} />
          )}
          {activeTab.value === 'collection' && (
            <Collection
              ref={collection}
              onFavorite={() => {
                practice.value?.reload?.()
              }}
            />
          )}
          {activeTab.value === 'album' && <Album />}
        </div>
      )
    }
  }
})