const $ = require("jquery");
require("babel-polyfill");
require("./../css/participle.less");
require("./../css/common.css");
const { post, api } = require('./api.js');
require('./../resources/images/empty2.png');


function insertStr(soure, start, newStr){   

    return soure.slice(0, start) + newStr + soure.slice(start);
 }
function getEntityPredict(){
    const val = $('#infoTxt').val()
    const param ={
        data:[
            {"medical_text_type": "chief_present",
             "content": val,
             "title": "自定义添加的属性",
             "detail_title": "自定义添加的属性"
             }
    
        ]

    }
    post(api.entity_predict, param).then(res =>{
        const data = JSON.parse(res.data)
        if(data.status){
            const result = data.data[0].entity_relation_object
            const entryList  = result.outputs.annotation['T']
            const relationList = result.outputs.annotation['R']
            let content = result.content
            getSchema(content,entryList)
            getRelationList(relationList,entryList)
        }
    })
}

function getSchema(content, entryList){
    let addNum = 0
    for(let i = 1; i < entryList.length; i++){
        content = insertStr(content, entryList[i].start+addNum, `<span class="entryItem"><span class="type"><span class="trangle"></span>${entryList[i].name}</span>`)
        addNum += 50 + entryList[i].name.length + 29
        content = insertStr(content, entryList[i].end+addNum, '</span>')
        addNum += 7
    }
    $('.resultBoxInfo').html(content)
}
function getRelationList(relationList,entryList){
    let str = ''
    for(let i = 1; i < relationList.length; i++){
        const relationItem = relationList[i]
        const relationName = relationList[i].name
        const entry1 = entryList.find(item => item.id === relationList[i].from).value
        const entry2 = entryList.find(item => item.id === relationList[i].to).value
        str += `<tr>
            <td class="entry1">${entry1}</td>
            <td class="relationType">${relationName}</td>
            <td class="entry2">${entry2}</td>
        </tr>`
    }
    if(str){
        $('.empty').css("display","none");
        $('table').css("display","table")
    }
    $('.relationBody').html(str)
}

$("#analy").click(function(){
    const val = $("#infoTxt").val().trim()
    if(val){
        getEntityPredict()
    }
})

$("#infoTxt").bind("input propertychange",function(event){
    const val = $("#infoTxt").val().trim()
    if(!val){
        $('#analy').addClass('disabled')
        $('.resultBoxInfo').html('')
        $('.empty').css("display","block");
        $('table').css("display","none")
    }else{
        $('#analy').removeClass('disabled')
    }
});