import { ElTabPane, ElTabs } from 'element-plus'
import { defineComponent } from 'vue'
import AlbumList from './album-list'
import AlbumMy from './album-my'
import styles from './index.module.less'
import List from './list'

export default defineComponent({
  name: 'live-class',
  data() {
    return {
      activeName: 'MYSCORE'
    }
  },
  methods: {
    getList() {}
  },
  render() {
    return (
      <div class={[styles.myScore, 'relative px-[25px]']}>
        <ElTabs v-model={this.activeName}>
          <ElTabPane label="我的乐谱" name="MYSCORE">
            {this.activeName === 'MYSCORE' && <List auditStatus="MYSCORE" />}
          </ElTabPane>
          <ElTabPane label="我的专辑" name="ALBUMMY">
            {this.activeName === 'ALBUMMY' && <AlbumMy />}
          </ElTabPane>
          <ElTabPane label="收藏乐谱" name="COLLECTION">
            {this.activeName === 'COLLECTION' && (
              <List auditStatus="COLLECTION" />
            )}
          </ElTabPane>
          <ElTabPane label="收藏专辑" name="ALBUM">
            {this.activeName === 'ALBUM' && <AlbumList />}
          </ElTabPane>
        </ElTabs>
      </div>
    )
  }
})
