<!-- @format -->

<template>
  <div class="app-container">
    <div class="steps">
      <a-steps
        :current="current"
        :items="[
          {
            title: '填写申请人',
            description,
          },
          {
            title: '提交材料',
            description,
          },
          {
            title: '完成',
            description,
          },
        ]"
      ></a-steps>
    </div>
    <component
      v-model:materialCalssId="materialCalssId"
      @handleNextStep="handleNextStep"
      @handlePrevStep="handlePrevStep"
      :isDisabled="false"
      :is="activeCom"
    >
    </component>
  </div>
</template>
<script setup>
import AmatterClass from "@/components/AmatterClass/index";
import BmatterClass from "@/components/BmatterClass/index";
import materialTable from "@/components/materialTable/index";
import { toValue } from "vue";
import FinishMatter from "@/components/FinishMatter/index";
import { useRoute } from "vue-router";

const route = useRoute();
const current = ref(0);
const activeCom = ref(AmatterClass);
const materialCalssId = ref(null);

if (route.query.materialCalssId != undefined) {
  materialCalssId.value = route.query.materialCalssId;
}

const comList = {
  // 0: route.query.type == "A" ? AmatterClass : BmatterClass,
  0: AmatterClass,
  1: materialTable,
  2: FinishMatter,
};
defineOptions({
  name: "materialApplication",
});

const handlePrevStep = () => {
  if (toValue(current) == 0) return;
  current.value -= 1;
  activeCom.value = comList[toValue(current)];
};

const handleNextStep = (row) => {
  if (toValue(current) >= 2) return;
  current.value += 1;
  activeCom.value = comList[toValue(current)];
};
</script>
<style lang="scss" scoped>
.steps {
  width: 80%;
  margin: 0 auto;
}
.buttonGrounp {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
