<template>
  <div>
    <Main v-if="showPage === 'Main'" @changePage="changePage"></Main>
    <AddOrEdite v-else-if="showPage === 'AddOrEdite'" @changePage="changePage" :editObj="editObj"></AddOrEdite>
   <Details v-else-if="showPage === 'Details'" @changePage="changePage" :editObj="editObj"></Details>
  </div>
</template>

<script setup>
import Main from "./Main/index.vue";
import AddOrEdite from "../khtj/AddOrEdite/index.vue";
import Details from "../khtj/Details/index.vue";
import { reactive, ref } from "vue";

let showPage = ref('Main')
let editObj = ref({})
const changePage = (val, obj) => {
  if(obj){
    editObj.value = obj
  } else {
    editObj.value = null
  }
  showPage.value = val
}
</script>
 
<style lang = "scss" scoped>
</style>