<template>
    <div>
        <div class="menu-title">
            知识图谱融合
        </div>
        <div class="menu-content">
            <el-row :gutter="20">
                <el-col :span="8">
                    <div class="result" style="margin-bottom: 20px">待融合的图谱1</div>
                    <el-select v-model="sourceGraph.name" placeholder="请选择要融合的知识图谱1" @change="handleSourceGraphChange">
                        <el-option v-for="item in resultCmd.graphs" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                    <div style="margin-top: 20px;height: 138px;border: 1px solid rgba(0, 0, 0, 0.1);padding: 20px">
                        <el-descriptions title="" :column="1"  v-if="sourceGraph.name">
                            <el-descriptions-item label="概念数量">{{sourceGraph.gn_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
                            <el-descriptions-item label="属性数量">{{sourceGraph.sx_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
                            <el-descriptions-item label="实体数量">{{sourceGraph.sl_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
                            <el-descriptions-item label="三元组数量">{{sourceGraph.saz_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <div class="result">待融合的图谱2</div>
                    <el-select v-model="targetGraph.name" placeholder="请选择要融合的知识图谱2"
                               @change="handleTargetGraphChange" style="margin-top: 25px">
                        <el-option
                                v-for="item in resultCmd.graphs"
                                :label="item.name"
                                :value="item.name">
                        </el-option>
                    </el-select>
                    <div style="margin-top: 20px;height: 138px;border: 1px solid rgba(0, 0, 0, 0.1);padding: 20px">
                        <el-descriptions class="margin-top" title="" :column="1" v-if="targetGraph.name">
                            <el-descriptions-item label="概念数量">{{targetGraph.gn_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
                            <el-descriptions-item label="属性数量">{{targetGraph.sx_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
                            <el-descriptions-item label="实体数量">{{targetGraph.sl_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
                            <el-descriptions-item label="三元组数量">{{targetGraph.saz_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <div style="margin: 0 auto;margin-top: 25px;display: flex;justify-content: center">
                        <el-button type="primary" @click="fusionData" :loading="loading">开始融合</el-button>
                    </div>
                </el-col>
                <el-col :span="16"  v-if="showFlag">
                    <el-row :gutter="50">
                        <el-col :span="12" >
                            <div class="result" style="text-align: center;width: 100%;margin-bottom: 20px;color: #5c5c5c;">本体匹配结果展示</div>
                            <el-table :data="btResults" style="width: 100%" height="350px" @current-change="handleCurrentChange1" highlight-current-row>
                                <el-table-column prop="srcNode" label="本体1"></el-table-column>
                                <el-table-column prop="dctNode" label="本体2"></el-table-column>
                                <el-table-column prop="type" label="类型"></el-table-column>
                                <el-table-column prop="reliability" label="匹配置信度"></el-table-column>
                                <el-table-column prop="result" label="匹配结果"></el-table-column>
                            </el-table>
                            <div class="page-box">
                                <el-pagination background
                                               @current-change="handleChange1"
                                               :current-page="qo1.pageNo"
                                               :page-size="qo1.pageSize"
                                               layout="total, prev, pager, next"
                                               :total="resultCmd1.btResults.length">
                                </el-pagination>
                            </div>
                            <div style="display: flex;width: 100%;margin-top: 20px">
                                <el-button type="primary" size="small" style="flex: 1" @click="clickStr('currentRow1','srcNode')">验证本体1</el-button>
                                <el-button type="primary" size="small" style="flex: 1" @click="clickStr('currentRow1','dctNode')">验证本体2</el-button>
                            </div>
                            <div class="result">本体匹配结果： {{resultCmd1.bfb.bt_result}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="result" style="text-align: center;width: 100%;margin-bottom: 20px;color: #5c5c5c;">实例匹配结果展示</div>
                            <el-table :data="slResults" style="width: 100%" height="350px"  @current-change="handleCurrentChange2" highlight-current-row>
                                <el-table-column prop="srcNode" label="本体1"></el-table-column>
                                <el-table-column prop="dctNode" label="本体2"></el-table-column>
                                <el-table-column prop="type" label="类型"></el-table-column>
                                <el-table-column prop="reliability" label="匹配置信度"></el-table-column>
                                <el-table-column prop="result" label="匹配结果"></el-table-column>
                            </el-table>
                            <div class="page-box">
                                <el-pagination background
                                               @current-change="handleChange2"
                                               :current-page="qo2.pageNo"
                                               :page-size="qo2.pageSize"
                                               layout="total, prev, pager, next"
                                               :total="resultCmd1.slResults.length">
                                </el-pagination>
                            </div>
                            <div style="display: flex;width: 100%;margin-top: 20px">
                                <el-button type="primary" size="small" style="flex: 1" @click="clickStr('currentRow2','srcNode')">验证本体1</el-button>
                                <el-button type="primary" size="small" style="flex: 1" @click="clickStr('currentRow2','dctNode')">验证本体2</el-button>
                            </div>
                            <div class="result">实例匹配结果： {{resultCmd1.bfb.sl_result}}</div>
                        </el-col>
                    </el-row>
                    <div class="result" style="text-align: center;width: 100%;margin-top: 20px;color: #5c5c5c;">融合后知识图谱统计信息</div>
                    <div  style="margin-top: 20px;height:20px;border: 1px solid rgba(0, 0, 0, 0.1);padding: 20px">
                        <el-descriptions title="" :column="4">
                            <el-descriptions-item label="概念数量">{{resultCmd1.rhGraph.gn_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
                            <el-descriptions-item label="属性数量">{{resultCmd1.rhGraph.sx_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
                            <el-descriptions-item label="实体数量">{{resultCmd1.rhGraph.sl_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
                            <el-descriptions-item label="三元组数量">{{resultCmd1.rhGraph.saz_count.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,')}}</el-descriptions-item>
                        </el-descriptions>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import request from '@/utils/request';

    var _this;
    export default {
        name: "knowledgeFusion",
        data() {
            return {
                sourceGraph: {
                    "name": "",
                    "gn_count": "",
                    "sx_count": "",
                    "sl_count": "",
                    "saz_count": ""
                },
                targetGraph: {
                    "name": "",
                    "gn_count": "",
                    "sx_count": "",
                    "sl_count": "",
                    "saz_count": ""
                },
                resultCmd: {},
                resultCmd1: {
                    bfb:{
                        bt_result:"",
                        sl_result:""
                    },
                    rhGraph: {
                        "gn_count": "",
                        "sx_count": "",
                        "sl_count": "",
                        "saz_count": ""
                    },
                    btResults:[],
                    slResults:[]
                },
                currentRow1:{},
                currentRow2:{},
                qo1:{
                    pageNo:1,
                    pageSize:10
                },
                qo2:{
                    pageNo:1,
                    pageSize:10
                },
                btResults:[],
                slResults:[],
                showFlag: false,
                loading:false
            }
        },
        mounted() {
            _this = this;
            _this.queryData();
        },
        methods: {
            handleSourceGraphChange() {
                _this.resultCmd.graphs.forEach(item => {
                    if(item.name == _this.sourceGraph.name){
                        _this.sourceGraph = JSON.parse(JSON.stringify(item))
                    }
                })
                console.log(_this.resultCmd.graphs)
            },
            handleTargetGraphChange() {
                _this.resultCmd.graphs.forEach(item => {
                    if(item.name == _this.targetGraph.name){
                        _this.targetGraph = JSON.parse(JSON.stringify(item))
                    }
                })
            },
            handleChange1(val) {
                _this.qo1.pageNo = val;
                _this.btResults = _this.resultCmd1.btResults.slice((_this.qo1.pageNo - 1) * 10, _this.qo1.pageNo * 10);
            },
            handleChange2(val) {
                _this.qo2.pageNo = val;
                _this.slResults = _this.resultCmd1.slResults.slice((_this.qo2.pageNo - 1) * 10, _this.qo2.pageNo * 10);
            },
            fusionData(){
                if(_this.targetGraph.name == _this.sourceGraph.name){
                    _this.$message.warning("待融合图谱1和待融合图谱2不可相同");
                    return false;
                }
                _this.queryResult();
            },
            queryData() {
                request({
                    url: '/indicator/indicator4/1',
                    method: 'get',
                }).then(res => {
                    _this.resultCmd = res.data;
                    if(_this.resultCmd.graphs.length >= 2){
                        _this.sourceGraph = JSON.parse(JSON.stringify(_this.resultCmd.graphs[0]))
                        _this.targetGraph = JSON.parse(JSON.stringify(_this.resultCmd.graphs[1]))
                    }
                });
            },
            queryResult() {
                _this.loading = true
                request({
                    url: '/indicator/indicator4/2',
                    method: 'get',
                }).then(res => {
                    _this.loading = false
                    _this.resultCmd1 = res.data;
                    _this.$nextTick(()=>{
                        _this.showFlag = true;
                        _this.handleChange1(1);
                        _this.handleChange2(1);
                    })
                });
            },
            handleCurrentChange1(val) {
                this.currentRow1 = val;
            },
            handleCurrentChange2(val) {
                this.currentRow2 = val;
            },
            clickStr(name,value){
                if(!this[name][value]){
                    _this.$message.warning("请选中行");
                    return false;
                }

                var srcNode = this[name][value];

                if(srcNode.substring(0,1) == '<'){
                    srcNode = srcNode.substring(1)
                }

                if(srcNode.substring(srcNode.length-3) == '> .'){
                    srcNode = srcNode.substring(0,srcNode.length-3)
                }

                if(srcNode.substring(srcNode.length-1) == '>'){
                    srcNode = srcNode.substring(0,srcNode.length-1)
                }

                window.open(srcNode, "_blank")
            }
        }
    }
</script>

<style scoped lang="scss">
    .result {
        text-align: center;
        margin-top: 25px;
        font-size: 16px;
        color: #5c5c5c;
    }

</style>


