<template>
  <div>
    <Main v-if="showPage === 'Main'" @changePage="changePage" :editObj="editObj.editObj" :tabTitle="tabTitle"></Main>

    <!-- 管理层 -->
    <ManagerDetails v-if="showPage === 'ManagerDetails'" @changePage="changePage" :editObj="editObj.editObj">
    </ManagerDetails>
    <!-- 员工层 -->
    <Details v-if="showPage === 'Details'" @changePage="changePage" :editObj="editObj.editObj">
    </Details>

  </div>
</template>

<script setup>
import Main from "./Main/index.vue";
import Details from "./Details/index.vue";
import ManagerDetails from "./Details/manager.vue";
import { reactive, ref } from "vue";
let showPage = ref('Main')
let editObj = reactive({
  editObj: {}
})
const tabTitle = ref('管理层')
const changePage = (val, obj,title) => {
  
  if (obj) {
    editObj.editObj = obj
  } else {
    editObj.editObj = null
  }
  showPage.value = val
  tabTitle.value = obj.title.indexOf('管理层') > -1 ? '管理层' : '员工层'
}
</script>