<template>

    <GraphSchemaDialog ref="graphSchemaDialog" @std-updated="handleStdSchemaUpdated" />
    <el-row>
        <span style="text-align: right;">
            <h2>图谱标准</h2>
        </span>
    </el-row>
    <el-row style="margin:15px;">
        <el-button @click="handleRefreshTable">刷新</el-button>
    </el-row>

    <el-row>
        <el-table :data="pageData.records" highlight-current-row>
            <el-table-column prop="schema_system" label="标准机构" width="100"></el-table-column>
            <el-table-column prop="schema_type" label="标准类型" width="100"></el-table-column>
            <el-table-column prop="category" label="分类" width="100"></el-table-column>
            <el-table-column prop="name" label="名称" width="200"></el-table-column>

            <el-table-column label="操作" width="500">
                <template v-slot="scope">
                    <el-button type="primary" @click="handleShowStdSchema(scope.row)">查看</el-button>
                    <el-button type="primary" @click="handleIndexSchema(scope.row)">索引</el-button>
                </template>
            </el-table-column>
        </el-table>

    </el-row>
    <el-row style="margin-top:30px;">
        <el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.page_size"
            @current-change="handleCurrentPageChange" :current-page.sync="pageData.page">
        </el-pagination>
    </el-row>

</template>


<script setup lang="ts">

import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import GraphSchemaDialog from '@/dialogs/GraphSchemaDialog.vue'
import { ElNotification, ElMessageBox } from 'element-plus'
import { formatTime } from 'element-plus/es/components/countdown/src/utils.mjs'
import { formatDate } from '@/utils/misc'
import { getSessionVar, saveSessionVar } from '@/utils/session'
import { getGraphStdSchemas, reindexSchema } from '@/api/GraphApi'
//从路由参数中获取队列ID

const sessionId = ref("")
//dialog related

const graphSchemaDialog = ref()
const currentData = ref({})
const currentDialogEntity = ref({})
const entitiesEditable = ref({})

const pageData = ref({ page: 1, pages: 1, page_size: 10, total: 0, records: [] })

const route = useRoute()
const router = useRouter()

const loadTableData = () => {
    getGraphStdSchemas({ page: pageData.value.page, page_size: pageData.value.page_size }).then((res: any) => {
        pageData.value.records = res.records
    })
}

function handleStdSchemaUpdated() {
    console.log("handleStdSchemaUpdated")

}
function handleShowStdSchema(data: any) {
    // console.log("handleShowStdSchema", data)
    data['data'] = JSON.parse(data["content"])
    graphSchemaDialog.value.showDialog(true, data['data'], data.id)
}


const handleIndexSchema = (data: any) => {
    console.log(data)
    ElMessageBox.confirm('是否确定索引该标准？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        // 用户点击了确定按钮，执行相应的操作
        console.log('用户点击了确定按钮');
        reindexSchema({ schema_id: data.id }).then((res: any) => {
            var result = `总计${res.records[0]["entities_count"]}个实体，${res.records[0]["relations_count"]}个关系`
            ElNotification({
                title: 'Success',
                message: '索引成功，' + result,
                type: 'success',
                duration: 3000, // 显示时间（单位：毫秒），0 表示不自动关闭  }) 
            })
        })
    })
}
const handleCurrentPageChange = (val: number) => {
    pageData.value.page = val
    loadTableData()
}
const handleRefreshTable = () => {
    loadTableData()
}
onMounted(() => {

    loadTableData()
})
</script>

<style lang="css" scoped>
.prop_header {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
}
</style>