<template>
  <view class="page-content">
    <mx-nav-bar title="错题本" />
    <view class="flex-1 min-h-1 relative">
      <view class="absolute inset-0">
        <mx-tabs-swiper v-model="current" :tabs="subjects" :key-name="keyName" template="default" border>
          <template #header>
            <date-time-picker v-model:start-date="startDate" v-model:end-date="endDate" @change="handleChange" />
          </template>
          <template #="subject">
            <wrong-book-list :subject-id="subject[keyValue]" :start-date="startDate" :end-date="endDate" />
          </template>
        </mx-tabs-swiper>
      </view>
    </view>
  </view>
</template>

<script setup>
import { watchEffect, ref } from 'vue'
import { useTopicSubjects } from "@/pagesOther/pages/topic-center/hooks/useTopicSubjects";
import WrongBookList from "@/pagesOther/pages/topic-center/wrong-book/components/wrong-book-list.vue";
import DateTimePicker from "@/pagesOther/pages/topic-center/wrong-book/components/datetime-picker.vue";
import { useTransfer } from "@/hooks/useTransfer";
import _ from "lodash";

const { prevData } = useTransfer()
const { subjects, keyName, keyValue } = useTopicSubjects()
const current = ref(0)

watchEffect(() => current.value = _.findIndex(subjects.value, s => s[keyValue] == prevData.value.subjectId))

const startDate = ref('')
const endDate = ref('')

const handleChange = (value) => {
  startDate.value = value.startDate
  endDate.value = value.endDate
}
</script>

<style lang="scss"></style>
