import { defineComponent, reactive,onMounted, computed } 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';
import { getMinutes, getSecend, getTimes } from '/src/utils/dateFormat';
import { getTestList } from '../../classList/api';
import dayjs from 'dayjs';
import TheEmpty from '/src/components/TheEmpty';
export default defineComponent({
  name: 'student-studentList',
  props: {
    timer: {
      type: Array,
      defaut: () => []
    }
  },
  setup(props, { emit, expose }) {
    const state = reactive({
      searchWord: '',
      orchestraType: null,
      courseTypeCode: null,
      subjectId: null,
      classId: null,
      studentType: null,
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 4
      },
      tableList: [] as any
    });

    const searchForm = reactive({
      ase:0,
      sortType:1
    })
    const currentTimer = computed(() => {
      console.log('ranking===>')
      return props.timer;
    });
    const search = () => {
      console.log('search', state);
    };

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

      state.loading = true;
      try {
        const res = await getTestList({
          ...state.pagination,
          ...searchForm,
          ...getTimes(currentTimer.value, ['startTime', 'endTime'], 'YYYY-MM-DD')
        });
        state.tableList = res.data.rows;
        state.pagination.pageTotal = res.data.total;
        state.loading = false;
      } catch (e) {
        state.loading = false;
        console.log(e);
      }
    };
    expose({ getList });
    onMounted(()=>{
      getList()
    })

    const handleSorterChange = (sroter: any) => {
      if(!sroter){
        searchForm.ase = 0
        searchForm.sortType = 1
        practiceDaysRef.sortOrder = false
        practiceDurationRef.sortOrder = false
        practiceDurationAvgRef.sortOrder = false
      }else{
        const list = {
          practiceDuration:1,
          practiceDays:2,
          practiceDurationAvg:3
        }
        searchForm.sortType =
          list[
            sroter.columnKey as
              | 'practiceDuration'
              | 'practiceDays'
              | 'practiceDurationAvg'
          ];
        if (sroter.columnKey == 'practiceDuration') {
           practiceDurationRef.sortOrder = sroter.order
           practiceDaysRef.sortOrder = false
          practiceDurationAvgRef.sortOrder = false
        }
        if (sroter.columnKey == 'practiceDays') {
          practiceDaysRef.sortOrder = sroter.order
          practiceDurationRef.sortOrder = false
          practiceDurationAvgRef.sortOrder = false
        }
        if (sroter.columnKey == 'practiceDurationAvg') {
          practiceDurationAvgRef.sortOrder = sroter.order
          practiceDaysRef.sortOrder = false
          practiceDurationRef.sortOrder = false
        }
        searchForm.ase = sroter.order == 'ascend' ? 1 : 0;

      }
      getList()
    };

    const practiceDaysRef = reactive({
      title: '练习天数',
      key: 'practiceDays',
      sorter: true,
      sortOrder: false,
      render(row: any) {
        return <>{row.practiceDays ? row.practiceDays : 0}天</>;
      }
    });
    const practiceDurationRef = reactive({
      title: '练习总时长',
      key: 'practiceDuration',
      sorter: true,
      sortOrder: false,
      render(row: any) {
        return (
          <>
            {row.practiceDuration
              ? getMinutes(row.practiceDuration) > 0
                ? getMinutes(row.practiceDuration) +
                  '分' +
                  getSecend(row.practiceDuration) +
                  '秒'
                : getSecend(row.practiceDuration) + '秒'
              : 0}
          </>
        );
      }
    });
    const practiceDurationAvgRef = reactive({
      title: '平均练习时长',
      key: 'practiceDurationAvg',
      sorter: true,
      sortOrder: false,
      render(row: any) {
        return (
          <>
            {row.practiceDurationAvg
              ? getMinutes(row.practiceDurationAvg) > 0
                ? getMinutes(row.practiceDurationAvg) +
                  '分' +
                  getSecend(row.practiceDurationAvg) +
                  '秒'
                : getSecend(row.practiceDurationAvg) + '秒'
              : 0}
          </>
        );
      }
    });

    const columns: any = () => {
      return [
        {
          title: '姓名',
          key: 'studentName'
        },
        {
          title: '手机号',
          key: 'studentPhone'
        },
        practiceDaysRef  as any,
        practiceDurationRef  as any,
        practiceDurationAvgRef  as any
      ];
    };
    return () => (
      <div class={styles.listWrap}>
        <div class={styles.tableWrap}>
          <NDataTable
             v-slots={{
              empty:()=><TheEmpty></TheEmpty>
            }}
            class={styles.classTable}
            loading={state.loading}
            columns={columns()}
            data={state.tableList}
            onUpdate:sorter={handleSorterChange}></NDataTable>
          <Pagination
            v-model:page={state.pagination.page}
            v-model:pageSize={state.pagination.rows}
            v-model:pageTotal={state.pagination.pageTotal}
            onList={getList}
            sync
          />
        </div>
      </div>
    );
  }
});
