<template>
  <view ref="container" class="h-full flex flex-col">
    <ie-navbar title="填志愿" custom-back>
      <template #headerLeft>
        <view>
          <uv-icon v-if="currentStep > 0" name="arrow-left" size="20px" @click="handlePrev"></uv-icon>
        </view>
      </template>
    </ie-navbar>
    <view class="flex-1 min-h-1">
      <swiper :current="currentStep" disable-touch class="h-full">
        <swiper-item class="h-full">
          <score-step />
        </swiper-item>
        <swiper-item>
          <batch-step />
        </swiper-item>
        <swiper-item>
          <cart-step v-if="showCart" />
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useProvideTransfer } from "@/hooks/useTransfer";
import { useProvideVoluntaryStep } from "@/pagesOther/pages/voluntary/hooks/useVoluntaryStepInjection";
import { useProvideVoluntaryData } from "@/hooks/useVoluntaryDataInjection";
import { useProvideVoluntaryForm } from "@/pagesOther/pages/voluntary/hooks/useVoluntaryFormInjection";
import { useProvideVoluntaryCart } from "@/pagesOther/pages/voluntary/hooks/useVoluntaryCartInjection";
import { useProvideVoluntaryAssistant } from "@/pagesOther/pages/voluntary/hooks/useVoluntaryAssistantInjection";
import ScoreStep from "@/pagesOther/pages/voluntary/index/components/score-step.vue";
// import {useElementSize} from "@vueuse/core";
import { useProvideUserSnapshot } from "@/pagesOther/pages/ie/hooks/useUserSnapshotInjection";
import BatchStep from "@/pagesOther/pages/voluntary/index/components/batch-step.vue";
import CartStep from "@/pagesOther/pages/voluntary/index/components/cart-step.vue";
import { useProvideVoluntaryMajorHighlight } from "@/pagesOther/pages/voluntary/hooks/useVoluntaryMajorHighlightInjection";
import { useProvideVoluntaryHeader } from "@/pagesOther/pages/voluntary/hooks/useVoluntaryHeaderInjection";

useProvideUserSnapshot()
const { transferTo } = useProvideTransfer()
const stepSvc = useProvideVoluntaryStep()
const dataSvc = useProvideVoluntaryData()
const formSvc = useProvideVoluntaryForm()
const cartSvc = useProvideVoluntaryCart()
const highlightSvc = useProvideVoluntaryMajorHighlight()
useProvideVoluntaryHeader()

const { currentStep } = stepSvc
const container = ref(null) // swiper必须指定明确的高度，所以多包了一层
// const {height} = useElementSize(container)

const assistantSvc = useProvideVoluntaryAssistant(stepSvc, dataSvc, formSvc, cartSvc, highlightSvc)
const { navBinding, onComplete, resetAll } = assistantSvc

const showCart = ref(false);
watch(() => currentStep.value, (val) => {
  if (val === 2) {
    setTimeout(() => {
      showCart.value = true;
    }, 300);
  } else {
    showCart.value = false;
  }
});
const handlePrev = () => {
  currentStep.value -= 1
  if (currentStep.value < 0) {
    currentStep.value = 0
  }
}

onComplete((id) => {
  transferTo('/pagesOther/pages/voluntary/detail/detail', { id })
  currentStep.value = 0
  resetAll()
})
</script>

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