{% block body %}
<link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css" media="all">
<title>KG-SEARCH</title>
<div class="container">
    <div class="row">

    <div class = "col-md-12">
        <form method = "get" id = 'searchEntityForm'>
            <div style="display: flex">
                <input type="text" id = "user_text" name = "user_text" class="form-control" placeholder=" 搜索关键字，空格分开" aria-describedby="basic-addon1" style="width: 400px; height: 40px; margin: 6px ; border-radius: 3px">
                <span class="layui-btn layui-btn-normal" type="button" id="relationSearchButton" style="margin: 7px;" onclick="document.getElementById('searchEntityForm').submit();">搜索</span>
            </div>
        </form>
    </div>
    <p>
        <div class = "col-md-12">
            {% if nothing %}
                <div class = "panel-body">
                    <h2>Sorry, Not Found In Database.</h2>
                </div>
            {% endif %}
        </div>
    </p>
    <!--relation start-->
    {% if entity_relation %}
        <div class = "result" style = " display: flex">
            <div class = "graph-div"><div id="graph" style="width: 700px ;height:700px; margin: 10px; padding:5px; box-shadow:4px 4px 5px silver;"></div></div>
            <div class="table-div" style="margin: 10px; padding:5px; box-shadow:0 0 8px silver;"><table class="layui-hide" id="graph-table"></table></div>
        </div>
    {% endif %}
    </div>
    </div>
    {% if entity_relation %}
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/echarts.js"></script>
    <script src="../static/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript">
        const nothing = [{{nothing|safe}}];
        const entity_relation = [{{entity_relation|safe}}][0];
        const format_triple = [];
        console.log(entity_relation);
        //let categories = [{name: 'Location'}, {name: 'Event'}, {name: 'Patient'}];
        let categories = [];
        let cat_only = [];
        let data = [];
        let links = [];
        n1_only = [];
        n2_only = [];
        n3_only = [];
        if(0 === nothing.length){
            let node = {};
            let relation = {};
            let url = decodeURI(location.search);
            let str = "";
            if(url.indexOf("?") !== -1){
                str = url.split("=")[1];
            }
            let flag4loc = 0;
            for(let i = 0; i < entity_relation.length; i++){
                let triple = {};
                triple['relation'] = entity_relation[i]['rel']['type'];
                relation = {};
                relation['value'] = entity_relation[i]['rel']['type'];
                if(entity_relation[i]['rel']['type'] === 'diagnosedIn'){
                    node = {};
                    node['id'] = 'l' + entity_relation[i]['n1']['l_id'];
                    node['draggable'] = true;
                    node['name'] = entity_relation[i]['n1']['locationName'];
                    node['value'] = 0;
                    node['symbolSize'] = 50;
                    node['category'] = 0;
                    if(n1_only.indexOf(node['id']) <= -1){
                        n1_only.push(node['id']);
                        data.push(node);
                        if(cat_only.indexOf('Location') <= -1) {
                            categories.push({'name': 'Location'});
                            cat_only.push('Location');
                        }
                    }

                    relation['source'] = node['id'];
                    node = {};
                    node['id'] = 'p' + entity_relation[i]['n2']['p_id'];
                    node['draggable'] = true;
                    node['name'] = entity_relation[i]['n2']['gender'] + ' ' + entity_relation[i]['n2']['age'];
                    node['value'] = 0;
                    node['symbolSize'] = 50;
                    node['category'] = 1;
                    if(flag4loc ===  1)node['category'] = 2;
                    if(n2_only.indexOf(node['id']) <= -1) {
                        n2_only.push(node['id']);
                        data.push(node);
                        if(cat_only.indexOf('Patient') <= -1) {
                            categories.push({'name': 'Patient'});
                            cat_only.push('Patient');
                        }
                    }
                    relation['target'] = node['id'];
                    triple['target'] = entity_relation[i]['n1']['locationName'];
                    triple['source'] = entity_relation[i]['n2']['gender'] + ' ' + entity_relation[i]['n2']['age'];
                }else if(entity_relation[i]['rel']['type'] === 'happenIn'){
                    flag4loc = 1;
                    node = {};
                    node['id'] = 'l' + entity_relation[i]['n1']['l_id'];
                    node['draggable'] = true;
                    node['name'] = entity_relation[i]['n1']['locationName'];
                    node['value'] = 0;
                    node['symbolSize'] = 50;
                    node['category'] = 0;
                    if(n1_only.indexOf(node['id']) <= -1){
                        n1_only.push(node['id']);
                        data.push(node);
                        if(cat_only.indexOf('Location') <= -1) {
                            categories.push({'name': 'Location'});
                            cat_only.push('Location');
                        }
                    }

                    relation['target'] = node['id'];
                    node = {};
                    node['id'] = 'e' + entity_relation[i]['n2']['e_id'];
                    node['draggable'] = true;
                    node['name'] = entity_relation[i]['n2']['time'] + ' ' + entity_relation[i]['n2']['text'];
                    node['value'] = 0;
                    node['symbolSize'] = 50;
                    node['category'] = 1;
                    if(n2_only.indexOf(node['id']) <= -1) {
                        n2_only.push(node['id']);
                        data.push(node);
                        if(cat_only.indexOf('Event') <= -1) {
                            categories.push({'name': 'Event'});
                            cat_only.push('Event');
                        }
                    }
                    relation['source'] = node['id'];
                    triple['target'] = entity_relation[i]['n1']['locationName'];
                    triple['source'] = entity_relation[i]['n2']['time'] + ' ' + entity_relation[i]['n2']['text'];

                }else if(entity_relation[i]['rel']['type'] === 'belong2'){
                    node = {};
                    node['id'] = 'e' + entity_relation[i]['n1']['e_id'];
                    node['draggable'] = true;
                    node['name'] = entity_relation[i]['n1']['time'] + ' ' + entity_relation[i]['n1']['text'];
                    node['value'] = 0;
                    node['symbolSize'] = 50;
                    node['category'] = 0;
                    if(n1_only.indexOf(node['id']) <= -1){
                        n1_only.push(node['id']);
                        data.push(node);
                        if(cat_only.indexOf('Event') <= -1) {
                            categories.push({'name': 'Event'});
                            cat_only.push('Event');
                        }
                    }

                    relation['source'] = node['id'];
                    node = {};
                    node['id'] = 't' + entity_relation[i]['n2']['t_id'];
                    node['draggable'] = true;
                    node['name'] = entity_relation[i]['n2']['topicName'];
                    node['value'] = 0;
                    node['symbolSize'] = 50;
                    node['category'] = 1;
                    if(n2_only.indexOf(node['id']) <= -1) {
                        n2_only.push(node['id']);
                        data.push(node);
                        if(cat_only.indexOf('Topic') <= -1) {
                            categories.push({'name': 'Topic'});
                            cat_only.push('Topic');
                        }
                    }
                    relation['target'] = node['id'];
                    triple['target'] = entity_relation[i]['n2']['topicName'];
                    triple['source'] = entity_relation[i]['n1']['time'] + ' ' + entity_relation[i]['n1']['text'];
                }else if(entity_relation[i]['rel']['type'] === 'hasEvent'){
                    node = {};
                    node['id'] = 'p' + entity_relation[i]['n1']['p_id'];
                    node['draggable'] = true;
                    node['name'] = entity_relation[i]['n1']['gender'] + ' ' + entity_relation[i]['n1']['age'];
                    node['value'] = 0;
                    node['symbolSize'] = 50;
                    node['category'] = 0;
                    if(n1_only.indexOf(node['id']) <= -1){
                        n1_only.push(node['id']);
                        data.push(node);
                        if(cat_only.indexOf('Patient') <= -1) {
                            categories.push({'name': 'Patient'});
                            cat_only.push('Patient');
                        }
                    }

                    relation['source'] = node['id'];
                    node = {};
                    node['id'] = 'e' + entity_relation[i]['n2']['e_id'];
                    node['draggable'] = true;
                    node['name'] = entity_relation[i]['n2']['time'] + ' ' + entity_relation[i]['n2']['text'];
                    node['value'] = 0;
                    node['symbolSize'] = 50;
                    node['category'] = 1;
                    if(n2_only.indexOf(node['id']) <= -1) {
                        n2_only.push(node['id']);
                        data.push(node);
                        if(cat_only.indexOf('Event') <= -1) {
                            categories.push({'name': 'Event'});
                            cat_only.push('Event');
                        }
                    }
                    relation['target'] = node['id'];
                    triple['source'] = entity_relation[i]['n1']['patientName'];
                    triple['target'] = entity_relation[i]['n2']['time'] + ' ' + entity_relation[i]['n2']['text'];
                }
                links.push(relation);
                format_triple.push(triple);
            }

            // double
            if('rel2' in entity_relation[0]) {
                for(let i = 0; i < entity_relation.length; i++){
                    let triple = {};
                    triple['relation'] = entity_relation[i]['rel2']['type'];
                    relation = {};
                    relation['value'] = entity_relation[i]['rel2']['type'];
                    if(entity_relation[i]['rel2']['type'] === 'happenIn'){
                        node = {};
                        node['id'] = 'l' + entity_relation[i]['n3']['l_id'];
                        node['draggable'] = true;
                        node['name'] = entity_relation[i]['n3']['locationName'];
                        node['value'] = 0;
                        node['symbolSize'] = 50;
                        node['category'] = 2;
                        if(n3_only.indexOf(node['id']) <= -1){
                            n3_only.push(node['id']);
                            data.push(node);
                            if(cat_only.indexOf('Location') <= -1) {
                                categories.push({'name': 'Location'});
                                cat_only.push('Location');
                            }
                        }

                        relation['target'] = node['id'];
                        node = {};
                        node['id'] = 'e' + entity_relation[i]['n2']['e_id'];
                        node['draggable'] = true;
                        node['name'] = entity_relation[i]['n2']['time'] + ' ' + entity_relation[i]['n2']['text'];
                        node['value'] = 0;
                        node['symbolSize'] = 50;
                        node['category'] = 1;
                        if(n2_only.indexOf(node['id']) <= -1) {
                            n2_only.push(node['id']);
                            data.push(node);
                            if(cat_only.indexOf('Event') <= -1) {
                                categories.push({'name': 'Event'});
                                cat_only.push('Event');
                            }
                        }
                        relation['source'] = node['id'];
                        triple['target'] = entity_relation[i]['n3']['locationName'];
                        triple['source'] = entity_relation[i]['n2']['time'] + ' ' + entity_relation[i]['n2']['text'];
                    }else if(entity_relation[i]['rel2']['type'] === 'hasEvent'){
                        node = {};
                        node['id'] = 'p' + entity_relation[i]['n3']['p_id'];
                        node['draggable'] = true;
                        node['name'] = entity_relation[i]['n3']['gender'] + ' ' + entity_relation[i]['n3']['age'];
                        node['value'] = 0;
                        node['symbolSize'] = 50;
                        node['category'] = 2;
                        if(n3_only.indexOf(node['id']) <= -1){
                            n3_only.push(node['id']);
                            data.push(node);
                            if(cat_only.indexOf('Patient') <= -1) {
                                categories.push({'name': 'Patient'});
                                cat_only.push('Patient');
                            }

                        }

                        relation['source'] = node['id'];
                        node = {};
                        node['id'] = 'e' + entity_relation[i]['n2']['e_id'];
                        node['draggable'] = true;
                        node['name'] = entity_relation[i]['n2']['time'] + ' ' + entity_relation[i]['n2']['text'];
                        node['value'] = 0;
                        node['symbolSize'] = 50;
                        node['category'] = 1;
                        if(n2_only.indexOf(node['id']) <= -1) {
                            n2_only.push(node['id']);
                            data.push(node);
                            if(cat_only.indexOf('Event') <= -1) {
                                categories.push({'name': 'Event'});
                                cat_only.push('Event');
                            }
                        }
                        relation['target'] = node['id'];
                        triple['source'] = entity_relation[i]['n3']['gender'] + ' ' + entity_relation[i]['n3']['age'];
                        triple['target'] = entity_relation[i]['n2']['time'] + ' ' + entity_relation[i]['n2']['text'];
                    }
                    links.push(relation);
                    format_triple.push(triple);
                }
            }
        }



        console.log('###');
        console.log(data);
        console.log('@@@');
        console.log(links);
        console.log(categories)
        let myChart = echarts.init(document.getElementById('graph'));
        option = {
            color: [
                "#2ec7c9",
                "#b6a2de",
                "#d87a80",
                "#8d98b3",
                "#e5cf0d",
                "#97b552",
                "#95706d",
                "#dc69aa",
                "#07a2a4",
                "#9a7fd1",
                "#588dd5",
                "#f5994e",
                "#c05050",
                "#59678c",
                "#c9ab00",
                "#7eb00a",
                "#6f5553",
                "#c14089"
            ],
            tooltip: {},
            legend: [{
                x: 'center',
                y: 'top',
                orient:'horizontal',
                data: categories.map(function (a) {
                    return a.name;
                }),
            }],
            zoom: 2.0,
            animation: true,
            series : [
                {
                    type: 'graph',
                    layout: 'force',
                    data: data,
                    links: links,
                    categories: categories,
                    roam: true,
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 12,
                            },
                        }
                    },
                    edgeLabel:{
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 12
                            },
                            formatter: "{c}"
                        }
                    },
                    lineStyle: {
                        normal: {
                            opacity: 0.6,
                            width: 1.3,
                            curveness: 0,
                            color:"#262626"
                        }
                    },
                    force: {
                        repulsion: 600
                    }
                }
            ]
        };
        myChart.setOption(option);
    </script>
    <script>
        layui.use('table', function(){
          var table = layui.table;

          //展示已知数据
          table.render({
            elem: '#graph-table'
            ,cols: [[ //标题栏
              {field: 'source', title: 'Source', width: 200}
              ,{field: 'relation', title: 'Relation', width: 100}
              ,{field: 'target', title: 'Target', Width: 200}
            ]]
            ,data: format_triple
            ,page: true //是否显示分页
            ,limits: [5, 10, 15, 20]
            ,limit: 15 //每页默认显示的数量
            ,even: true
          });
        });
    </script>
{% endif %}
{% endblock %}