import { NButton, NIcon, NScrollbar, NTabPane, NTabs } from 'naive-ui';
import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import CardType from '@/components/card-type';
import SearchGroup from './search-group';
import listData from '@views/xiaoku-music/data.json';

export default defineComponent({
  name: 'select-music',
  emits: ['select'],
  setup(props, { emit }) {
    const forms = reactive({
      list: [],
      height: '100%' as any
    });

    const formatData = () => {
      const rows = listData.rows || [];
      console.log(rows);
      const tempList: any = [];
      rows.forEach((row: any, i: number) => {
        if (i <= 10) {
          tempList.push({
            id: row.id,
            type: 'SONG',
            title: row.musicSheetName,
            url: row.fixedTone ? row.fixedTone.split(',')[0] : '',
            isCollect: i % 3 ? false : true,
            isSelected: i % 4 ? false : true
          });
        }
      });

      forms.list = tempList || [];
    };

    formatData();
    return () => (
      <div class={styles.selectMusic}>
        <NTabs
          animated
          defaultValue="shareResources"
          paneClass={styles.paneTitle}
          justifyContent="center"
          paneWrapperClass={styles.paneWrapperContainer}>
          <NTabPane name="shareResources" tab="选择曲目">
            <SearchGroup />
            <NScrollbar class={styles.listContainer}>
              <div class={styles.list}>
                {forms.list.map((item: any) => (
                  <CardType
                    isShowAdd
                    item={item}
                    onAdd={(i: any) => emit('select', i)}
                  />
                ))}
              </div>
            </NScrollbar>
          </NTabPane>
        </NTabs>
      </div>
    );
  }
});
