const $ = require("jquery");
require("babel-polyfill");
const echarts = require("echarts");
require("./../css/knowledgeMap.less");
require("./../css/common.less");
// require("ztree");
require('./../resources/images/icon.png');
require('./../resources/images/iconOpen.png');
require('./../resources/images/iconClose.png');
require('./../resources/images/node.png');
require('./../resources/images/radioUnSelect.png');
require('./../resources/images/radioSelect.png');
require('./../resources/images/iconSlideUp.png');
require('./../resources/images/iconSlideDown.png');
require('./../resources/images/iconSelect.png');
require('./../resources/images/syflogo.png');
require('./../resources/images/logo.png');
require('./../resources/images/logo_shaoyifu.png');
require('./../resources/zTree/js/jquery.ztree.core.min.js');
require('./../resources/zTree/js/jquery.ztree.excheck.min.js')
require('./../resources/zTree/css/zTreeStyle/zTreeStyle.css');
const iconUp = require('./../resources/images/iconUp.png');
const iconDown = require('./../resources/images/iconDown.png');
const { post, api, ifHideLogo, getUrlArgObject } = require('./api.js');
const { mapData, zTreeData, mapData3, zTreeData3 } = require('./data.js');
const { drawGraph, updateTree, getGraph, getTree, getNode, getTab, renderTab, setTabBottomHei, selectedZTreeNode,
    setSelectName, hideHideTab, hideSlide } = require('./graphMap.js');
/**右侧侧边栏折叠*/
let isRightCollapse = false
window.select_type = "疾病";
window.select_type_noSearch = "疾病";
window.refreshTree = true
let disease = getUrlArgObject("disease")
// 用来存储节点操作的数据
window.knowledgeMapData = {}
/**知识图谱的部分配置信息*/
window.knowledgeMapSetting = {
    operation: "view", //操作类型,查看
    showLegend: true, //是否展示图例
    draggable: false,
    zTree: true
}

setHei()
ifHideLogo();
function setHei() {
    const clientHei = $(window).height()
    const contentHei = 580
    $(".left").css("height", contentHei + 'px')
    $(".right").css("height", contentHei + 'px')
    if (select_type == "疾病") {
        setTabBottomHei(1)
    } else {
        setTabBottomHei(2)
    }
    $("#main").css("height", contentHei - 20 - 20 - 10 + 'px')
}
$(window).resize(function () {
    setHei()
    // getGraph(graphTxt,select_type);
})

//关系图
getGraph(disease || "艾滋病", select_type);
getTree(1, 1, disease || "艾滋病");
$('#searchInp').val(disease || "艾滋病")

//选择类型
$('.select').click(function (e) {
    e.stopPropagation();
    hideSlide('selectList')
    const selectListShow = $('.selectList').css('display')
    if (selectListShow == 'none') {
        $('.iconSlide').attr('src', './images/iconSlideUp.png')
    } else {
        $('.iconSlide').attr('src', './images/iconSlideDown.png')
    }
    $('.selectList').fadeToggle()

})
$('.selectList .selectItem').click(function () {
    select_type_noSearch = $(this).attr('data-id')
    const txt = $(this).text()
    const oldTxt = $(".selectedName").html()
    setSelectName(txt)

    $("#searchInp").attr("placeholder", `请输入${txt}名称`)
    if (txt != oldTxt) {
        $('#searchInp').val("")
    }

})



//搜索节点名
$("#searchInp").bind("input propertychange", function (event) {
    const val = $("#searchInp").val().trim()
    if (val) {
        getNode(val, select_type_noSearch)
    } else {
        $(".tabNameList").hide()
    }
});

//切换条目
$('.radioItem').click(function (e) {
    $('.radioItem').css('color', '#333333')
    $(this).css("color", '#409EF1')
    const initDiag = disease || "艾滋病"
    const type = $(this).attr('data-type')
    // $(this).children('img').attr('src')
    $('.iconRadio').attr('src', '/images/radioUnSelect.png')
    $(this).children('img').attr('src', '/images/radioSelect.png')
    $('#searchInp').val(initDiag)
    getTree(type, 1, initDiag);
    getGraph(initDiag, select_type);
    // updateTree(initDiag)
})

//搜索
$('#searchBtn').click(function (e) {
    e.stopPropagation()
    hideSlide()
    const val = $('#searchInp').val().trim()
    if (val) {
        const clientHei = $(window).height()
        const contentHei = clientHei - 80
        $(".tabNameList").hide()
        getGraph(val, select_type_noSearch).then(() => {
            if (!window.refreshTree) {
                return
            }
            select_type = select_type_noSearch

            if (select_type == '疾病') {
                // $('#searchInp').val("高血压3级")
                getTree(1, 1, val);
            } else if (select_type == '药品通用名') {
                getTree(0, 2, val);
            } else if (select_type == '症状') {
                getTree(0, 3, val);
            } else if (select_type == '手术和操作') {
                getTree(0, 4, val);
            } else if (select_type == '实验室检查') {
                getTree(0, 5, val);
            } else if (select_type == '辅助检查') {
                getTree(0, 6, val);
            }
            if (select_type == '疾病') {
                $('.iconRadio').attr('src', '/images/radioUnSelect.png')
                $('.ICD10 img').attr('src', '/images/radioSelect.png')
                $(".radioList").show()
                setTabBottomHei(1)
            } else {
                $(".radioList").hide()
                setTabBottomHei(2)
            }
            let renderTabInfo = getTab(select_type)
            renderTab(renderTabInfo)
        })
    } else {
        $('.tabNameListNoSearch').show()
    }
})



let renderTabInfo = getTab("疾病")
renderTab(renderTabInfo)

$(".tabList").click(function (e) {
    e.stopPropagation()
    hideSlide()
})
$(".hideTabList").click(function (e) {
    e.stopPropagation()
    hideSlide()
})
//点击页面其他地方关闭下拉
$('html').click(function () {
    hideSlide()
    // const selectListShow = $('.selectList').css('display')
    // const tabNameListShow = $('.tabNameList').css('display')
    // const tabNameListNoSearchShow = $('.tabNameListNoSearch').css('display')
    // const hideTabListShow = $('.hideTabList').css('display')
    // if(selectListShow == 'block'){
    //     $('.selectList').hide()
    //     $('.iconSlide').attr('src','./images/iconSlideDown.png')
    // }
    // if(tabNameListShow == 'block'){
    //     $('.tabNameList').hide()
    // }
    // if(tabNameListNoSearchShow == 'block'){
    //     $('.tabNameListNoSearch').hide()
    // }
    // if(hideTabListShow == 'block'){
    //     hideHideTab()
    // }
})

// $(function () {
//     $(".right-aside-collapse").on("click", function () {
//         isRightCollapse = !isRightCollapse
//         if (isRightCollapse) {
//             $("#tabList > .toggleTab").hide()
//             $(".right").animate({ "width": '150px' })
//         } else {
//             $(".right").animate({ "width": '394px' })
//         }
//     })
// })

let toggleTabHtml = ""
$(".right-aside-collapse").on("click", function () {
    isRightCollapse = !isRightCollapse
    if (isRightCollapse) {
        $(this).attr('class', 'right-aside-collapsed')
        toggleTabHtml = $("#tabList > .toggleTab").html()
        $("#tabList > .toggleTab").empty()
        // document.querySelector('.toggleTab').style.display = 'none';
        $(".right").animate({ "width": '150px' }, function () {
        })
        const contentWidth = $(".content").width()
        const leftWidth = (contentWidth - 150).toString() + 'px'
        // console.log("contentWidth", leftWidth);
        $(".content .left").animate({ 'width': leftWidth, }, function () {
            window.graphMap.resize()
            // console.log("graphMap", window.graphMap)
        })

    } else {
        $(this).attr('class', 'right-aside-collapse')
        $("#tabList > .toggleTab").html(toggleTabHtml)
        $(".right").animate({ "width": '461px' })
        const contentWidth = $(".content").width()
        const leftWidth = (contentWidth - 461).toString() + 'px'
        $(".content .left").animate({ 'width': leftWidth, }, function () {
            window.graphMap.resize()
            // console.log("graphMap", window.graphMap)
        })
    }
})

window.addEventListener("message", function (event) {
    // console.log("message", event.data);
    if (event.data.operation == "left-collapse") {
        const contentWidth = $(".content").width()
        console.log("contentWidth", contentWidth)
        let leftWidth = 0
        if (isRightCollapse) {
            leftWidth = (contentWidth - 150).toString() + 'px'
            $(".content .left").css('width', leftWidth)

        } else {
            leftWidth = (contentWidth - 461).toString() + 'px'
            $(".content .left").css('width', leftWidth)

        }
        console.log("leftWidth", leftWidth);
        window.graphMap.resize()
    }
})

module.exports = {
    getTab,
    renderTab
}



