import { NTabPane, NTabs } from 'naive-ui';
import { defineComponent } from 'vue';
import styles from './index.module.less';
import SelectItem from './select-item';

export default defineComponent({
  name: 'select-music',
  emits: ['select'],
  setup(props, { emit }) {
    return () => (
      <div class={styles.selectMusic}>
        <NTabs
          animated
          defaultValue="shareResources"
          paneClass={styles.paneTitle}
          justifyContent="center"
          paneWrapperClass={styles.paneWrapperContainer}>
          <NTabPane
            name="shareResources"
            tab="共享资源"
            displayDirective="show:lazy">
            <SelectItem type="shareResources" />
          </NTabPane>
          <NTabPane
            name="myResources"
            tab="我的资源"
            displayDirective="show:lazy">
            <SelectItem type="myResources" />
          </NTabPane>
          <NTabPane
            name="myCollect"
            tab="我的收藏"
            displayDirective="show:lazy">
            <SelectItem type="myCollect" />
          </NTabPane>
        </NTabs>
      </div>
    );
  }
});