<template>
<div style=" margin-bottom: 20px; ">请为图谱中的类型进行标准化</div>
<div style="display: flex; flex-direction: row; margin-bottom: 20px; ">
        <el-text style="margin-right: 10px;">整合对象</el-text>
        <el-select style="width: 120px;margin-right: 10px;" v-model="formData.category" placeholder="请选择分类">
          <el-option label="节点" value="node"></el-option>
          <el-option label="关系" value="edge"></el-option>
        </el-select>
        <el-input style="width: 240px;margin-right: 10px;" v-model="formData.searchText" placeholder="请输入你要搜索的名称" />
        <el-button type="primary" @click="handleSearch">搜索</el-button>
 </div>

 <el-table :data="categoryData"  style="width: 100%">
    <el-table-column prop="name" label="原类型" width="180" />
    <el-table-column prop="std_name" label="标准类型" />
    <el-table-column prop="accept" label="采纳" >
      <template #default="scope">
        <el-switch v-model="scope.row.accept" />
      </template>
    </el-table-column>
  </el-table>
  
<div style=" margin-top: 20px; ">
1、采纳后的类型将会被转换为标准类型<br/>
2、未采纳的类型将不会出现在后续的导出数据中<br/>
3、如何您没有设置标准类型，但是依然采纳了，那么该类型将包括在后续的导出数据中</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { RouterView } from 'vue-router'
import {getGraphNodeSchema, getGraphEdgeSchema} from '@/api/GraphApi'

const props = defineProps({
    graphId: { type: Number, required: true, default: 0}
  
})
const formData = ref({
  searchText: '',
  category: 'node'
})

const categoryData = ref([{name:'', accept: false, std_name:''}])

function handleSearch() {
  if (formData.value.category === 'node') {
    getGraphNodeSchema({graph_id : props.graphId}).then(response => {
        categoryData.value = []
        response.records.forEach(element => {
            element.std_name = '';
            element.accept = true;
            categoryData.value.push(element)
        });
    })
  }
  if (formData.value.category === 'edge') {
    getGraphEdgeSchema({graph_id : props.graphId}).then(response => {
        categoryData.value = []
        response.records.forEach(element => {
            element.std_name = '';
            element.accept = true;
            categoryData.value.push(element)
        });
    })
  }
}
</script>