{% extends "navigate.html" %} {% block mainbody %}
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <meta charset="utf-8"/>
        <script src="/static/js/echarts.js"></script>
    </head>
    <title>关系</title>
    <div class="container">
        <div class="row">
            <!--head start-->
            <div class="col-md-12">
                <h3 class="page-header"><i class="fa fa-link" aria-hidden="true"></i> 关系查询 </h3>
                <ol class="breadcrumb">
                    <li><i class="fa fa-home"></i><a href="\">主页</a></li>
                    <li><i class="fa fa-link" aria-hidden="true"></i>关系查询</li>
                </ol>
            </div>

            <div class="col-md-12">
                <div class="panel panel-default">
                    <header class="panel-heading">
                        查询条件：
                    </header>
                    <div class="panel-body">

                        <form id="searchRelationForm" class="form-inline" style="padding-left: 10% ; padding-right: 10%" method="get">
                            <div id="entity1" class="form-group" style="padding: 2%">
                                <input type="text" id="entity1_text" name="entity1_text" class="form-control" placeholder="头实体" aria-describedby="basic-addon1">
                            </div>
                            <!--dropdown combobox start-->
                            <div class="btn-group" style="padding: 2%"><a class="btn btn-default dropdown-toggle btn-select form-control" data-toggle="dropdown" id="btnCountry">关系类型<span
                                    class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">症状</a></li>
                                    <li><a href="#">推荐食谱</a></li>
                                    <li><a href="#">推荐药品</a></li>
                                    <li><a href="#">宜吃食物</a></li>
                                    <li><a href="#">忌吃食物</a></li>
                                    <li><a href="#">常用药物</a></li>
                                    <li><a href="#">生产药品</a></li>
                                    <li><a href="#">诊断检查</a></li>
                                    <li><a href="#">并发症</a></li>
                                    <li><a href="#">所属科室</a></li>
                                </ul>
                            </div>
                            <!--dropdown combobox end-->
                            <div id="relation_name" class="form-group hide" style="padding: 2%">
                                <input type="text" id="relation_name_input" name="relation_name_text" class="form-control" placeholder="输入关系名称" aria-describedby="basic-addon1">
                            </div>
                            <div id="entity2" class="form-group" style="padding: 2%">
                                <input type="text" id="entity2_text" name="entity2_text" class="form-control" placeholder="尾实体" aria-describedby="basic-addon1">
                            </div>
                            <div class="btn-group" style="padding: 2%">
                                <button type="button" id="btnSearch" class="btn btn-primary" onclick="document.getElementById('searchRelationForm').submit();">查询</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            {% if ctx %}
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <header class="panel-heading">
                            查询结果：
                        </header>
                        <div class="panel-body">
                            <div style="padding: 2%">
                                <h2>暂未找到相应的匹配</h2>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}

            {% if searchResult %}

                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div class="col-md-12">
                    <div class="panel panel-default ">
                        <header class="panel-heading">
                            关系图 :
                        </header>
                        <div class="panel-body ">
                            <div id="graph" style="width: 100%;height:600px;"></div>
                        </div>
                    </div>
                </div>
                <!-- Footable -->
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <header class="panel-heading">
                            关系列表 :
                        </header>
                        <div class="panel-body">
                            <table class="table" data-paging="true" data-sorting="true"></table>
                        </div>
                    </div>
                </div>
            {% endif %}

        </div>
        <script src="/static/js/jquery-1.8.3.min.js"></script>
        {% if searchResult %}
            <script type="text/javascript">
                var searchResult = {{searchResult|safe}}
                    //用表格列出所有的关系
                    tableData = []
                for (var i = 0; i < (searchResult.length ); i++) {
                    relationData = {};
                    relationData['entity1'] = searchResult[i]['source']['name'];
                    {#relationData['relation'] = searchResult[i]['type'];#}
                    {## self.create_relationship('Disease', 'Food', rels_recommandeat, 'recommand_eat', '推荐食谱')#}
                    {## self.create_relationship('Disease', 'Food', rels_noteat, 'no_eat', '忌吃')#}
                    {## self.create_relationship('Disease', 'Food', rels_doeat, 'do_eat', '宜吃')#}
                    {## self.create_relationship('Department', 'Department', rels_department, 'belongs_to', '属于')#}
                    {## self.create_relationship('Disease', 'Drug', rels_commonddrug, 'common_drug', '常用药品')#}
                    {## self.create_relationship('Producer', 'Drug', rels_drug_producer, 'drugs_of', '生产药品')#}
                    {## self.create_relationship('Disease', 'Drug', rels_recommanddrug, 'recommand_drug', '推荐药品')#}
                    {## self.create_relationship('Disease', 'Check', rels_check, 'need_check', '诊断检查')#}
                    {#self.create_relationship('Disease', 'Symptom', rels_symptom, 'has_symptom', '症状')#}
                    {## 创建关系症状#}
                    {## self.create_relationship('Disease', 'Disease', rels_acompany, 'acompany_with', '并发症')#}
                    {## self.create_relationship('Disease', 'Department', rels_category, 'belongs_to', '所属科室')#}
                    if (searchResult[i]['type'] == 'recommand_eat') {    <!--hzp改-->
                        searchResult[i]['type'] = '推荐食谱'
                    } else if (searchResult[i]['type'] == 'no_eat') {
                        searchResult[i]['type'] = '忌吃食物'
                    } else if (searchResult[i]['type'] == 'recommand_drug') {
                        searchResult[i]['type'] = '推荐药品'
                    } else if (searchResult[i]['type'] == 'has_symptom') {
                        searchResult[i]['type'] = '症状'
                    } else if (searchResult[i]['type'] == 'do_eat') {
                        searchResult[i]['type'] = '宜吃食物'
                    } else if (searchResult[i]['type'] == 'common_drug') {
                        searchResult[i]['type'] = '常用药品'
                    } else if (searchResult[i]['type'] == 'drugs_of') {
                        searchResult[i]['type'] = '生产药品'
                    } else if (searchResult[i]['type'] == 'need_check') {
                        searchResult[i]['type'] = '诊断检查'
                    } else if (searchResult[i]['type'] == 'acompany_with') {
                        searchResult[i]['type'] = '并发症'
                    } else if (searchResult[i]['type'] == 'belongs_to') {
                        searchResult[i]['type'] = '所属科室'
                    }
                    relationData['relation'] = searchResult[i]['type'];

                    relationData['entity2'] = searchResult[i]['target']['name'];
                    tableData.push(relationData);
                }
                jQuery(function () {
                    $('.table').footable({
                        "columns": [{"name": "entity1", title: "头实体"},
                            {"name": "relation", title: "关系"},
                            {"name": "entity2", title: "尾实体"}],
                        "rows": tableData
                    });
                });

                //echarts 数据
                var data = [];
                var links = [];

                //构造展示的数据
                var maxDisPlayNode = 15;
                var id = 0;
                for (var i = 0; id < Math.min(maxDisPlayNode, searchResult.length) && i < searchResult.length; i++) {
                    //获取node1
                    node1 = {};
                    node1['name'] = searchResult[i]['source']['name'];
                    node1['draggable'] = true;
                    if ('url' in searchResult[i]['source']) {
                        node1['category'] = 1;
                    } else {
                        node1['category'] = 2;
                    }
                    var flag = 1;

                    relationTarget = id.toString();
                    for (var j = 0; j < data.length; j++) {
                        if (data[j]['name'] == node1['name']) {
                            flag = 0;
                            relationTarget = data[j]['id'];
                            break;
                        }
                    }

                    node1['id'] = relationTarget;
                    if (flag == 1) {
                        id++;
                        data.push(node1);
                    }

                    //获取node2
                    node2 = {};
                    node2['name'] = searchResult[i]['target']['name'];
                    node2['draggable'] = true;

                    flag = 1;
                    relationTarget = id.toString();
                    for (var j = 0; j < data.length; j++) {
                        if (data[j]['name'] == node2['name']) {
                            flag = 0;
                            relationTarget = data[j]['id'];
                            break;
                        }
                    }
                    node2['id'] = relationTarget;
                    if (flag == 1) {
                        id++;
                        data.push(node2);
                    }

                    //获取relation
                    relation = {}
                    relation['source'] = node1['id'];
                    relation['target'] = node2['id'];
                    relation['category'] = 0;
                    flag = 1;
                    for (var j = 0; j < links.length; j++) {
                        if (links[j]['source'] == relation['source'] && links[j]['target'] == relation['target']) {
                            links[j]['value'] = links[j]['value'] + ' & ' + searchResult[i]['type'];
                            flag = 0;
                            break;
                        }
                    }
                    if (flag == 1) {
                        relation['value'] = searchResult[i]['type'];
                        relation['symbolSize'] = 10;
                        links.push(relation);
                    }

                }


                // Echarts初始化设置
                var myChart = echarts.init(document.getElementById('graph'));

                option = {
                    title: {
                        text: ''
                    },
                    tooltip: {},
                    animationDurationUpdate: 1500,
                    animationEasingUpdate: 'quinticInOut',
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 12
                            },
                        }
                    },
                    legend: {
                        x: "center",
                        show: false
                    },
                    series: [

                        {
                            type: 'graph',
                            layout: 'force',
                            symbolSize: 45,
                            focusNodeAdjacency: true,
                            roam: true,
                            edgeSymbol: ['none', 'arrow'],
                            categories: [{
                                name: '查询实体',
                                itemStyle: {
                                    normal: {
                                        color: "#009800",
                                    }
                                }
                            }, {
                                name: 'Bank',
                                itemStyle: {
                                    normal: {
                                        color: "#4592FF",
                                    }
                                }
                            }, {
                                name: 'Serise',
                                itemStyle: {
                                    normal: {
                                        color: "#C71585",
                                    }
                                }
                            }],
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 12,
                                    },
                                }
                            },
                            force: {
                                repulsion: 1000
                            },
                            edgeSymbolSize: [4, 50],
                            edgeLabel: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 10
                                    },
                                    formatter: "{c}"
                                }
                            },
                            data: data,
                            links: links,
                            lineStyle: {
                                normal: {
                                    opacity: 0.9,
                                    width: 1.3,
                                    curveness: 0,
                                    color: "#262626",
                                }
                            }
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            </script>
        {% endif %}
        <script>
            $(".dropdown-menu li a").click(function () {
                var selText = $(this).text();
                $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
                if (selText.trim() != "Other") {
                    $("#relation_name_input").val(selText.trim());
                }
                //combobox behavior
                if (selText.trim() == "Other") {
                    $("#relation_name").removeClass("hide");
                } else {
                    $("#relation_name").addClass("hide");
                }

            });
        </script>
    </div>
{% endblock %}