import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import Pagination from '@/components/pagination';
import { NTabPane, NTabs } from 'naive-ui';
import CardType from '/src/components/card-type';
import SearchGroupResources from './search-group-resources';
import listData from '../xiaoku-music/data.json';
export default defineComponent({
  name: 'student-studentList',
  setup() {
    const state = reactive({
      searchWord: '',
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      tableList: [] as any
    });
    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) => {
        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 || [];
      state.pagination.pageTotal = tempList.length;
      state.pagination.rows = tempList.length;
    };
    const getList = () => {
      console.log('getList');
    };

    formatData();
    return () => (
      <div class={styles.listWrap}>
        <NTabs
          defaultValue="shareResources"
          paneClass={styles.paneTitle}
          justifyContent="center"
          paneWrapperClass={styles.paneWrapperContainer}>
          <NTabPane name="shareResources" tab="共享资源">
            <SearchGroupResources />

            <div class={styles.list}>
              {forms.list.map((item: any) => (
                <CardType item={item} />
              ))}
            </div>

            <Pagination
              v-model:page={state.pagination.page}
              v-model:pageSize={state.pagination.rows}
              v-model:pageTotal={state.pagination.pageTotal}
              onList={getList}
            />
          </NTabPane>
          <NTabPane name="myResources" tab="我的资源">
            <SearchGroupResources />

            <div class={styles.list}>
              {forms.list.map((item: any) => (
                <CardType item={item} />
              ))}
            </div>

            <Pagination
              v-model:page={state.pagination.page}
              v-model:pageSize={state.pagination.rows}
              v-model:pageTotal={state.pagination.pageTotal}
              onList={getList}
            />
          </NTabPane>
          <NTabPane name="myCollect" tab="我的收藏">
            <SearchGroupResources />

            <div class={styles.list}>
              {forms.list.map((item: any) => (
                <CardType item={item} />
              ))}
            </div>

            <Pagination
              v-model:page={state.pagination.page}
              v-model:pageSize={state.pagination.rows}
              v-model:pageTotal={state.pagination.pageTotal}
              onList={getList}
            />
          </NTabPane>
        </NTabs>
      </div>
    );
  }
});
