<script setup>

import table from '@/components/restful/table.vue'
import operation from '@/views/project/operation.vue'
import {cachedProject} from '@/stores/project.js'
import {useRouter} from 'vue-router'

const cachedProject1 = cachedProject()

const router = useRouter()

const page = ref('project')

const row_click_handler = (row, column, event) => {
  // console.log("project row is clicked:", row)
  cachedProject1.set(row)
  const cachePro = cachedProject1.get()
  console.log('cached project:', cachePro)
  console.log("router:", router.getRoutes())
  page.value = 'operation'
}

</script>

<template>
  <div v-if="page === 'project'">
    <component :is="table" resource_url="/project" :row_click_handler="row_click_handler"></component>
  </div>
  <div v-else-if="page === 'operation'">
    <component :is="operation" resource_url="/project" :row_click_handler="row_click_handler"></component>
  </div>
</template>

<style scoped>

</style>