import { defineComponent, ref, nextTick } from 'vue';
import styles from './index.module.less';
import { NTabs, NTabPane, NSpace, NButton } from 'naive-ui';
import { useRoute } from 'vue-router';
import { getTabsCache, setTabsCaches } from '@/hooks/use-async';
import CDatePicker from '/src/components/CDatePicker';
import TrainData from '@/views/home/components/trainData';
import PracticeData from '@/views/home/components/practiceData';
import PracticeRanking from '@/views/home/components/practiceRanking';
import {
  getNowDateAndMonday,
  getNowDateAndSunday
} from '/src/utils/dateFormat';
import deepClone from '/src/helpers/deep-clone';
export default defineComponent({
  name: 'data-module',
  setup() {
    const activeTab = ref('training');
    const route = useRoute();
    getTabsCache((val: any) => {
      if (val.form.tabName) {
        activeTab.value = val.form.tabName;
      }
    });
    const TrainDataRef = ref();
    const PracticeDataRef = ref();
    const PracticeRankingRef = ref();
    const setTabs = (val: any) => {
      setTabsCaches(val, 'tabName', route);
    };
    // const showGuide = ref(false);
    const timer = ref<[number, number]>([
      getNowDateAndMonday(new Date().getTime()),
      getNowDateAndSunday(new Date().getTime())
    ]);
    // 搜索之后的时间
    const searchAfterTimer = ref<[number, number]>([
      getNowDateAndMonday(new Date().getTime()),
      getNowDateAndSunday(new Date().getTime())
    ]);

    if (route.query.times) {
      timer.value = JSON.parse(route.query.times as any);
      searchAfterTimer.value = JSON.parse(route.query.times as any);
    }


    const onSearch = () => {
      searchAfterTimer.value = deepClone(timer.value);
      if (TrainDataRef.value) {
        TrainDataRef.value.getList();
      }
      if (PracticeDataRef.value) {
        PracticeDataRef.value.getList();
      }
      if (PracticeRankingRef.value) {
        PracticeRankingRef.value.getList();
      }
    };
    const onReset = () => {
      timer.value = [
        getNowDateAndMonday(new Date().getTime()),
        getNowDateAndSunday(new Date().getTime())
      ];
      searchAfterTimer.value = [
        getNowDateAndMonday(new Date().getTime()),
        getNowDateAndSunday(new Date().getTime())
      ];
      nextTick(() => {
        onSearch();
      });
    };

    return () => (
      <div>
        <div class={styles.listWrap}>
          <NTabs
            onUpdate:value={(val: any) => setTabs(val)}
            class={styles.customTabs}
            v-model:value={activeTab.value}
            size="large"
            animated={false}
            pane-wrapper-style="margin: 0 -4px"
            pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
            v-Slots={{
              suffix: () => (
                <div class={styles.homeStudyInfoDate}>
                  <NSpace>
                    <CDatePicker
                      {...{ clearable: false }}
                      v-model:value={timer.value}
                      separator={'-'}
                      type="daterange"
                      timerValue={timer.value}></CDatePicker>
                    <NButton
                      type="primary"
                      class={styles.searchBtn}
                      onClick={() => onSearch()}>
                      搜索
                    </NButton>
                    <NButton
                      type="primary"
                      onClick={() => onReset()}
                      ghost
                      class={styles.resetBtn}>
                      重置
                    </NButton>
                  </NSpace>
                </div>
              )
            }}>
            <NTabPane
              name="training"
              tab="作业统计"
              v-slots={{ tab: () => <span id="data-0">作业统计</span> }}>
              <TrainData
                ref={TrainDataRef}
                timer={searchAfterTimer.value}></TrainData>
            </NTabPane>
            <NTabPane
              name="practice"
              tab="学练数据"
              v-slots={{ tab: () => <span id="data-1">学练数据</span> }}>
              <PracticeData
                ref={PracticeDataRef}
                timer={searchAfterTimer.value}></PracticeData>
            </NTabPane>
            <NTabPane
              name="ranking"
              tab="学练排行"
              v-slots={{ tab: () => <span id="data-2">学练排行</span> }}>
              <PracticeRanking
                ref={PracticeRankingRef}
                timer={searchAfterTimer.value}></PracticeRanking>
            </NTabPane>
          </NTabs>
        </div>
      </div>
    );
  }
});
