<template>
    <GraphNodeDialog ref="graphNodeDialog" :title="'节点详情'" :graph-id="graphId" ></GraphNodeDialog>
  <div>
    <el-row>
        <span class="view-title">图谱数据管理</span>
      </el-row>
    <el-row>
        <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%;">
            <el-tab-pane label="基本信息" name="tab1">
                <el-collapse accordion>
                    <el-collapse-item  name="1">
                        <template #title><span style="color:blue;">图谱数据概览</span></template>
                        当前图谱共有 {{ graphSummary.nodes_count }} 个节点，{{ graphSummary.edges_count }} 条边<br>
                        
                    </el-collapse-item>

                    <el-collapse-item  name="2">
                        <template #title><span style="color:blue;">节点类型</span></template>
                        节点类型包括：{{ graphSummary.nodes_categories.join(', ') }}<br></el-collapse-item>
                        
                    <el-collapse-item  name="3">
                        <template #title><span style="color:blue;">边类型</span></template>
                        边类型包括：{{ graphSummary.edges_categories.join(', ') }}<br></el-collapse-item>
                </el-collapse>
            </el-tab-pane>
            <el-tab-pane label="节点搜索" name="tab2">                
                <div style="display: flex; flex-direction: row;">
                    <el-input style="width: 240px" v-model="formData.searchText" placeholder="请输入你要搜索的节点" />
                    <el-button type="primary" @click="loadGraphNodes(formData.searchText)">节点搜索</el-button>
                </div>
                
                <el-table :data="graphNodes"  height="650" style="width: 100%"  @current-change="handleCurrentChange">
                <el-table-column prop="id" label="ID" width="180"></el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="category" label="类型"></el-table-column>

                </el-table>
            </el-tab-pane>
            <el-tab-pane label="类型整合" name="tab3">
                <GraphCategoryMgr :graph-id="graphId"></GraphCategoryMgr>
            </el-tab-pane>
            <el-tab-pane label="术语标注" name="tab4">术语标注</el-tab-pane>
            <el-tab-pane label="语义检查" name="tab5"><el-menu>
                <el-menu-item index="4-1">孤立节点</el-menu-item>
                <el-menu-item index="4-2">矛盾关系</el-menu-item>
                <el-menu-item index="4-2">循环关系</el-menu-item>
                <el-menu-item index="4-2">冗余关系</el-menu-item>
                <el-menu-item index="4-2">自动检查</el-menu-item>
                </el-menu></el-tab-pane>
        </el-tabs>

    <el-col :span="18">

    </el-col>
    
    <el-col :span="6">
        <span style="margin-left: 20px;"> </span>
    </el-col>

    </el-row>

  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { getSessionVar } from '@/utils/session'
import { searchNodes, getGraphSummary } from '@/api/GraphApi'
import { ElNotification } from 'element-plus'
import  GraphNodeDialog  from '@/dialogs/GraphNodeDialog.vue'
import GraphCategoryMgr from '@/components/GraphCategoryMgr.vue'
const graphNodeDialog=ref()
const formData = ref({
    searchText: '%',
})
const graphId = ref(0)
const graphSummary = ref({nodes_count:0, edges_count:0, nodes_categories:[], edges_categories:[]})
const currentNode = ref({id:0})
const graphNodes = ref([])
onMounted(() => {
    var route = useRoute()
    graphId.value = Number(route.params.id as string  | "0" )
    console.log("graphId", graphId.value)
    loadGraphSummary()
    loadGraphNodes(formData.value.searchText)
})
const handleCurrentChange = (val:any) => {
    if (val == null) return
    console.log("handleCurrentChange", val)
    graphNodeDialog.value.showDialog(true, val.id)
}
const loadGraphSummary = () => {
    console.log("loadGraphSummary", graphId.value) 
    getGraphSummary({graph_id: graphId.value}).then((res:any) => {
        graphSummary.value = res.records[0]})
}
const loadGraphNodes = (searchKey:string) => {
    console.log("loadGraphNodes", searchKey, graphId.value)
    if (graphId.value == 0 || graphId.value == undefined) {
        ElNotification({
            title: 'Error',
            message: 'Graph ID is required',
            type: 'error', 
        })
    }
    if (searchKey == '') {
        ElNotification({
            title: 'Error',
            message: 'Search key is required',
            type: 'error',
        }) 
        return
    }
    searchNodes(searchKey, graphId.value).then((res:any) => {
        graphNodes.value = res.records
    })
}

</script>
<style scoped>
.view-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px; 
    color:darkblue;
}
.graphMenu {
    width:100%
}
</style>