import { defineComponent, reactive } from 'vue';
import styles from '../index.module.less';
import {
  NButton,
  NDataTable,
  NForm,
  NFormItem,
  NImage,
  NSelect,
  NSpace
} from 'naive-ui';
import SearchInput from '@/components/searchInput';
import CSelect from '@/components/CSelect';
import Pagination from '@/components/pagination';
import add from './images/add.png';
export default defineComponent({
  name: 'student-studentList',
  setup(props, { emit }) {
    const state = reactive({
      searchWord: '',
      orchestraType: null,
      courseTypeCode: null,
      subjectId: null,
      classId: null,
      studentType: null,
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 4
      },
      tableList: [
        {
          studentName: '胡小小',
          phone: '17625367893',
          trainNum: '49',
          trainDay: '9',
          averageNum: '35'
        },
        {
          studentName: '丁曼蓉',
          phone: '14677789334',
          trainNum: '49',
          trainDay: '9',
          averageNum: '35'
        },
        {
          studentName: '李书意',
          phone: '13467857893',
          trainNum: '49',
          trainDay: '9',
          averageNum: '35'
        },
        {
          studentName: '夏小满',
          phone: '13925367893',
          trainNum: '49',
          trainDay: '9',
          averageNum: '35'
        }
      ] as any
    });
    const search = () => {
      console.log('search', state);
    };

    const onReset = () => {
      console.log('search');
    };
    const getList = () => {
      console.log('getList');
    };

    const columns = () => {
      return [
        {
          title: '姓名',
          key: 'studentName'
        },
        {
          title: '练习天数',
          key: 'trainDay',
          render(row: any) {
            return <span>{row.trainDay}天</span>;
          }
        },
        {
          title: '练习总时长',
          key: 'trainNum',
          render(row: any) {
            return <span>{row.trainNum}分钟</span>;
          }
        },

        {
          title: '平均练习时长',
          key: 'averageNum',
          render(row: any) {
            return <span>{row.averageNum}分钟</span>;
          }
        }
      ];
    };
    return () => (
      <div class={styles.listWrap}>
        <div class={styles.tableWrap}>
          <NDataTable
            class={styles.classTable}
            loading={state.loading}
            columns={columns()}
            data={state.tableList}></NDataTable>
          <Pagination
            v-model:page={state.pagination.page}
            v-model:pageSize={state.pagination.rows}
            v-model:pageTotal={state.pagination.pageTotal}
            onList={getList}
            sync
            saveKey="orchestraRegistration-key"
          />
        </div>
      </div>
    );
  }
});
