import { defineComponent, ref } from 'vue';
import styles from '../index2.module.less';
import bannerPerson from './images/bannerPerson.png';
import { NIcon, NImage, NDatePicker, NSpace, NButton } from 'naive-ui';
import CDatePicker from '@/components/CDatePicker';
import TrainData from './trainData';
import PracticeData from './practiceData';
import PracticeRanking from './practiceRanking';
export default defineComponent({
  name: 'home-study',
  setup() {
    const chioseTab = ref('trainData');
    const timer = ref([]);
    return () => (
      <>
        <div class={styles.homeStudy}>
          <div class={styles.homeStudyTitle}>
            <div class={styles.homeStudyTitleDot}></div>
            学情
          </div>
          <div class={styles.homeStudyInfoList}>
            <div class={styles.homeStudyInfoTabs}>
              <div
                onClick={() => {
                  chioseTab.value = 'trainData';
                }}
                class={[
                  styles.homeStudyInfoTabItem,
                  chioseTab.value == 'trainData' ? styles.active : null
                ]}>
                训练数据
              </div>
              <div
                onClick={() => {
                  chioseTab.value = 'practiceData';
                }}
                class={[
                  styles.homeStudyInfoTabItem,
                  chioseTab.value == 'practiceData' ? styles.active : null
                ]}>
                练习数据
              </div>
              <div
                onClick={() => {
                  chioseTab.value = 'practiceRanking';
                }}
                class={[
                  styles.homeStudyInfoTabItem,
                  chioseTab.value == 'practiceRanking' ? styles.active : null
                ]}>
                练习排行
              </div>
            </div>
            <div class={styles.homeStudyInfoDate}>
              <NSpace>
                <CDatePicker
                  separator={'-'}
                  type="daterange"
                  timerValue={timer.value}></CDatePicker>
                <NButton type="primary" class={styles.searchBtn}>
                  搜索
                </NButton>
                <NButton type="primary" ghost class={styles.resetBtn}>
                  重置
                </NButton>
              </NSpace>
            </div>
          </div>
          {chioseTab.value == 'trainData' ? <TrainData></TrainData> : null}
          {chioseTab.value == 'practiceData' ? (
            <PracticeData></PracticeData>
          ) : null}
          {chioseTab.value == 'practiceRanking' ? (
            <PracticeRanking></PracticeRanking>
          ) : null}
        </div>
      </>
    );
  }
});
