<script setup>

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

const cachedProject1 = cachedProject()

const router = useRouter()

const pageFlag = 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())
  pageFlag.value = 'op'
}

</script>

<template>

  <div v-if="pageFlag === 'project'">
    <component :is="tableView" resource_url="/project" :row_click_handler="row_click_handler"></component>
  </div>
  <div v-else-if="pageFlag === 'op'">
    <component :is="op" resource_url="/project" :row_click_handler="row_click_handler"></component>
  </div>
</template>

<style scoped>

</style>