import { ElTabPane, ElTabs } from 'element-plus'
import { defineComponent } from 'vue'
import AlbumList from './album-list'
import MusicList from './music-list'

export default defineComponent({
  name: 'select-music-album',
  props: {
    subjectIds: {
      type: Number
    },
    onSelect: {
      type: Function,
      default: (item: any) => {}
    }
  },
  data() {
    return {
      tabVal: 'music'
    }
  },

  render() {
    return (
      <div style="padding: 0 16px 16px;">
        <ElTabs v-model={this.tabVal}>
          <ElTabPane label="曲目" name="music">
            <MusicList
              subjectIds={this.subjectIds}
              onSelect={(item: any) => {
                this.onSelect(item)
              }}
            />
          </ElTabPane>
          <ElTabPane label="专辑" name="album">
            <AlbumList
              subjectIds={this.subjectIds}
              onSelect={(item: any) => {
                this.onSelect(item)
              }}
            />
          </ElTabPane>
        </ElTabs>
      </div>
    )
  }
})
